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

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). — Raphael Schweikert, Dec 08 '13 at 15:24
Possible duplicate of [Convert Data URI to File then append to FormData](http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata) — Dmitry Shvedov, Jan 11 '17 at 19:44
Does this answer your question? [Sending canvas.toDataURL() as FormData](https://stackoverflow.com/questions/48195480/sending-canvas-todataurl-as-formdata) — gre_gor, May 15 '23 at 12:25

score 0 · Answer 1 · answered Jul 17 '22 at 06:30

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

...

score -5 · Answer 2 · answered Dec 08 '13 at 12:37

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..."
    //  
})

this will send image data as base64 .. multipart is something different — Jan Jůna, Sep 22 '15 at 12:59

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

2 Answers2