I'm trying to encode an image to base64 and send it to a server. When I retrieve the image all it shows is blank.

The code I'm using to encode it is this:

encodeImageUri = function(imageUri) {
        var c = document.createElement('canvas');
        var ctx = c.getContext("2d");
        var img = new Image();
        img.onload = function() {
            c.width = this.width;
            c.height = this.height;
            ctx.drawImage(img, 0, 0);
        };
        img.src = imageUri;
        var dataURL = c.toDataURL("image/jpeg");

        return dataURL.slice(22, dataURL.length);
    }

Taken from: Using PhoneGap, How to get base64 image data of the photo chosen from photo library in iPhone

I'm trying to encode an image to base64 and send it to a server. When I retrieve the image all it shows is blank.

The code I'm using to encode it is this:

encodeImageUri = function(imageUri) {
        var c = document.createElement('canvas');
        var ctx = c.getContext("2d");
        var img = new Image();
        img.onload = function() {
            c.width = this.width;
            c.height = this.height;
            ctx.drawImage(img, 0, 0);
        };
        img.src = imageUri;
        var dataURL = c.toDataURL("image/jpeg");

        return dataURL.slice(22, dataURL.length);
    }

Taken from: Using PhoneGap, How to get base64 image data of the photo chosen from photo library in iPhone

• javascript
• image
• cordova
• base64

3 Answers 3

I use the following code to convert an image to Base64:

var Base64 = {
    /**
     * This implementation relies on Cordova 1.5 or above implementations.
     */
    getBase64ImageFromInput : function (input, callback) {
        var imageReader = new FileReader();
        imageReader.onloadend = function (evt) {
            if (callback)
                callback(evt.target.result);
        };
        //Start the asynchronous data read.
        imageReader.readAsDataURL(input);
    },
    formatImageSrcString : function (base64) {
        return (base64.match(/(base64)/))? base64 : "data:image/jpeg;base64," + base64;
    } 
};

Below is an example using this object to convert an image from a file input to base64 encoding:

var fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.onchange = function () {
    var input = this.files[0];
    if (input) {
        Base64.getBase64ImageFromInput(input, function (imageData) {
            //Process the image string. 
            console.log(imageData);
        });
    } else {
       alert("Please select an image.");
    }
};

Hope this helps. Let me know if you have any questions.

The image is loading asynchronously, meaning that your return dataURL... happens before the image is loaded into the canvas.

Instead of having this function return a value, have it call a callback function.

encodeImageUri = function(imageUri, callback) {
    var c = document.createElement('canvas');
    var ctx = c.getContext("2d");
    var img = new Image();
    img.onload = function() {
        c.width = this.width;
        c.height = this.height;
        ctx.drawImage(img, 0, 0);

        if(typeof callback === 'function'){
            var dataURL = c.toDataURL("image/jpeg");
            callback(dataURL.slice(22, dataURL.length));
        }
    };
    img.src = imageUri;
}

You now call it like this:

encodeImageUri('/path/to/image.png', function(base64){
    // Do something with the b64'd image
});

NOTE: For this to work, the image needs to be on the same domain as your page.

Use the readAsDataURL method of FileReader.