How to upload canvas image through FormData/multipart with Jquery Ajax?

Question

I want to upload canvas image through formdata/multipart. I have a canvas which generates the image data with toDataURL(). I want to upload image data as formdata/multipart with Ajax post.

Here is the code ....

var dataUrl =  canvas.toDataURL('image/png');
var multipart = new FormData(); 

multipart.append('user_id', userID);
multipart.append('password', pwd);
multipart.append('inputdata',image data here);

 $.ajax({
            type : 'POST',
            // dataType: 'json',
            url : serviceURL,
            data : multipart,
            cache : false,
            processData : false,
            contentType : false,
            success : function(data) {


            },
            error : function(xhr, status, error) {

            }

        });

I know that one can not append the image data uri into FormData. So how can i append this?

Thanks

Mcmillian

Try using canvas.toBlob() instead of toDataURL. You would then need to call multipart.append('inputdata', canvas.toBlob(), "filename") (notice the third argument; the filename will default to "blob" if you don’t provide it). – Disobedience

Possible duplicate of Convert Data URI to File then append to FormData – Metaphosphate

Does this answer your question? Sending canvas.toDataURL() as FormData – Jocelynjocelyne

Answer 1

example - we have a canvas

<canvas id="flatten" width="800" height="600"></canvas>

get context to 2D

var snap = document.getElementById('flatten');
var flatten = snap.getContext('2d');

Canvas => Base64 => Binary

var file;

function postCanvasToURL() {
  var img = snap.toDataURL(); // Convert canvas image to Base64
  file = dataURItoBlob(img); // Convert Base64 image to binary
}

function dataURItoBlob(dataURI) {
  // convert base64/URLEncoded data component to raw binary data held in a string
  var byteString;
  if (dataURI.split(',')[0].indexOf('base64') >= 0)
    byteString = atob(dataURI.split(',')[1]);
  else
    byteString = unescape(dataURI.split(',')[1]);

  // separate out the mime component
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  
  // write the bytes of the string to a typed array
  var ia = new Uint8Array(byteString.length);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ia], {type:mimeString});
}

and in the end

...
var multipart = new FormData(); 

multipart.append('user_id', userID);
multipart.append('password', pwd);
multipart.append('file', file);  // add file

...

Strangulate

Answer 2

Try this ?

var dataUrl =  canvas.toDataURL('image/png');
var formData = {
    user_id: userID,
    password: pwd,
    inputdata: dataUrl
}

 $.ajax({
        type : 'POST',
        // dataType: 'json',
        url : serviceURL,
        data : formData,
        cache : false,
        success : function(data) {
        },
        error : function(xhr, status, error) {

        }
    });

// get data on express(nodejs)  server side :
app.post("/postUrl",function(q,s){
    var requestData = q.body;
    console.log(requestData.inputdata);
    //  Output: 
    //  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
    //  
})

Diomedes

this will send image data as base64 .. multipart is something different – Antiquate