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
– seahorsepip, Commented Feb 13, 2016 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
– Paolo, Commented Feb 13, 2016 at 21:50

Community · Accepted Answer · 2017-05-23 11:59:37Z

2

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

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Feb 14, 2016 at 19:18

Avijit

1,31313 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

powerc9000 · Accepted Answer · 2016-02-13 23:09:10Z

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, 2016 at 23:09

answered Feb 13, 2016 at 22:47

powerc9000

2,11220 silver badges32 bronze badges

3 Comments

prime Over a year ago

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 ?

powerc9000 Over a year ago

@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?

prime Over a year ago

I want to upload the image directly but I haven't did this before . any idea how can i begin?

Collectives™ on Stack Overflow

Convert image into base64string in JQuery

2 Answers 2

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Linked

Related