Unable to make an Image Blob JSON Serializable

问题

JIRA Ticket created due to base64encode failure: https://jira.appcelerator.org/browse/TC-5876

My Current CFG: Titanium SDK 5.1.2.GA Testing on an iPhone iOS 9.1

I'm stuck in a problem in a project for a client that requires images took on device (using the camera) to be sent to a WebService and afterwards be seen on any device using the app (both Android and iOS devices). Titanium provides a Ti.Blob object (event.media) after taking a picture (which is not JSON serializable) and I need somehow to send this to the server. The server responds always a JSON object, thus this Blob must be somehow JSON serializable.

I've tried many ways without success:

1 - Base64Encode the Blob

var base64blob = Ti.Utils.base64encode(event.media);

Doesn't work, it stucks the app and throws a ASL exceeded maximum size error. I imagine that the image is too large to be base64encoded.

2 - Read the Blob into a Buffer

var blobStream = Ti.Stream.createStream({ source: event.media, mode: Ti.Stream.MODE_READ });
var buffer = Ti.createBuffer({ length: event.media.length });
var bytes = blobStream.read(buffer);

It works but I have no idea how can I transform this buffer holding the image contents into something that the server can return in a JSON object and later be transformed into an Image Blob again.

The server can't manage Ti.Blob objects or Ti.Buffer objects because, first of all, they are Titanium objects and the server is C# based, and second due to Ti.Blob and Ti.Buffer aren't JSON serializable, thus the JSON return doesn't work.

What I need is basically described in the imaginary example below:

var imageBlob = event.media;
var JSONSerializableImg = imageBlob.toJSON();
sendImageToServer(JSONSerializableImg);

var imgFromServer = getImageFromServer();
var imageBlob = imgFromServer.toBlob();
var imgView = createImageView({
    image: imageBlob 
});

I hope someone can help me with any conversion method possible.

Thank's

回答1:

OK,

This is what I think you have to do. Looking at the API, this is very doable.

1: You need to create an object Server side that will hold the BLOB.

public class BlobContainer 
{
    public string fileName{get;set;}
    //... (Other properties)
    public byte[] data {get;set;}
}

2: Convert the important information from the BLOB into a binary array and send to server.

var blobStream = Ti.Stream.createStream({ source: myBlob, mode: Ti.Stream.MODE_READ });
var newBuffer = Ti.createBuffer({ length: myBlob.length });
var bytes = blobStream.read(newBuffer);

3: Then send the byte data to the server through Ajax requests. Be mindful of how big your array is that you are sending. It might be advantageous to split the array up and combine it on the other side (Might not be necessary):

var dataObjects: [
    { id: 1, data: [BYTE_DATA_PART] },
    { id: 2, data: [BYTE_DATA_PART] }...
]
$.each(dataObjects, function(i,a) {
    $.ajax({ url: "BLA", data: JSON.stringify(a), dataType: "json", type: "POST",
        success: function() { //CONTINUE\\ },
        error: function() {alert("ERROR BRO"}) 
    });
});

4: Then server side get each request in your little blob container, store in a session object or cache object and once you have N out of N, piece it all together and store that sucker in the Database.

5: Retrieve the stuff in the reverse order. Just remember that it is stored as byte[] data. You may have to fuddle with it and store it as a string because of the way the TI buffer creates bytes and the way c# interprets bytes. Best thing is trial and error. Once you have all the pieces back on the client.

var newBuffer = Ti.Stream.read(data, 0, data.length);
var newBlob = newBuffer.toBlob();

回答2:

To send and receive binary data to and from a server it's best to use Ti.Network.HTTPClient which can send and receive binary data.

There's a guide on uploading and downloading files here: http://docs.appcelerator.com/platform/latest/#!/guide/File_Uploads_and_Downloads

JSON isn't designed to carry binary data, although base64encoded binary data should work. This is what Ti.Utils.base64encode() indeed is for. If you believe the "ASL exceeded maximum size error" you get shouldn't happen, please create a ticket on Appcelerator JIRA

回答3:

I solved this issue by creating a separate method on server-side specially to upload photos. I followed the link below for server side:

PHP code

In Titanium I had to set XHR's header like this:

this.xhr.setRequestHeader("ContentType", "image/png"); this.xhr.setRequestHeader('enctype', 'multipart/form-data');

That's it! Thank's for all the answers.

回答4:

I've used the following method before (not in Titanium, but another web-based mobile app platform).

function convertToDataURLviaCanvas(url, callback, outputFormat){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var canvas = document.createElement('CANVAS');
        var ctx = canvas.getContext('2d');
        var dataURL;
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null; 
    };
    img.src = url;
}

convertToDataURLviaCanvas('http://example.com/image.png', function(base64Img){
    // Base64DataURL
});

I used this to send the base64 encoded image string as JSON to my backend server. Then re-encoded the image on the server. It worked for me, but the base64 encoded string is huge.

来源：https://stackoverflow.com/questions/35233932/unable-to-make-an-image-blob-json-serializable

标签

javascript

ios

titanium

appcelerator

appcelerator-titanium