Convert image into base64string in JQuery

Question

I am working on VS2015 cordova app .I want to send an base 64 string of an image to another server . I have a problem when i get image from gallery and corverting it into base64string . I got the base64string successfully but when i dispalayed it I always get black image . here is my code :

   function onPhotoURISuccess(imageURI) {
     var largeImage = document.getElementById('smallImage');
    largeImage.style.display = 'block';
    largeImage.src = imageURI;
    basestrg = encodeImageUri(imageURI);

}

function getPhoto(source) {
           navigator.camera.getPicture(onPhotoURISuccess, onFail, {
        destinationType: Camera.DestinationType.NATIVE_URI, mediaType: Camera.MediaType.Photo,
        sourceType: source
    });
}
function encodeImageUri(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;
}

Please advice .

Check if the base64 string starts with an identifier if not make sure to add it. — seahorsepip, Feb 13 '16 at 21:47
you draw the image at `onload` with a async callback. So when you build up `dataUrl` few lines below the image has not been drawn yet — Paolo, Feb 13 '16 at 21:50

score 2 · Answer 1 · edited May 23 '17 at 11:59

This is beside the context but may help you. You can upload the image directly from your html5 form.

<form enctype="multipart/form-data" action="upload.php" method="post">    
    <input name="userImage" type="file" accept="image/*;capture=camera">    
    <button type="submit">Submit</button>
</form>

Get the image data in upload.php file and save as image. In PHP use $_FILES array and for C# use HttpContext to save the image.
Ref: Using form input to access camera and immediately upload photos using web app

powerc9000 · Answer 2 · 2016-02-13T23:09:10.667

0

Your image isn't loaded by the time you try to get the data url.

function encodeImageUri(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);
        var dataURL = c.toDataURL("image/jpeg");
        callback(dataURL);
    };
    img.src = imageUri;
}

Then change the other function to pass a callback

function onPhotoURISuccess(imageURI) {
    var largeImage = document.getElementById('smallImage');
    largeImage.style.display = 'block';
    largeImage.src = imageURI;
    encodeImageUri(imageURI, function(datauri){
      basestrg = datauri;
      //Now send the string to the server here.
    });

}

edited Feb 13 '16 at 23:09

answered Feb 13 '16 at 22:47

powerc9000

2,030
19
30

ok it solved black box image , but i get large base64string from my image which can't be passed to my web service any idea to reduce this base64strg ? – prime Feb 13 '16 at 23:23
@prime not unless you compress the image. The base64 string is literally the binary representation of the image as text. Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size. So if you have a 1MB file you get 1.37MBs of text. I'm not sure why you just dont upload the image directly? – powerc9000 Feb 14 '16 at 04:12
I want to upload the image directly but I haven't did this before . any idea how can i begin? – prime Feb 14 '16 at 11:53

Convert image into base64string in JQuery

2 Answers2