javascript - converting canvas to blob using cropper js -

i have created application using cropper.js cropping images. application working , image cropping, after trying send cropped image blob server side storing,

as per cropper.js documentation can use canvas.todataurl data url, or use canvas.toblob blob , upload server formdata. when tried canvas.todataurl() getting base64 string, need send file blob tried canvas.toblob() getting uncaught typeerror: canvas.toblob not function in chrome , typeerror: not enough arguments htmlcanvaselement.toblob. in firefox

can please tell me solution this

my code this

var canvas = $image.cropper("getcroppedcanvas", undefined); var formdata = new formdata(); formdata.append('mainimage', $("#inputimage")[0].files[0]); formdata.append('croppedimage', canvas.toblob()); 

the method toblob asynchronous , require 2 arguments, callback function , image type (there optional third parameter quality):

void canvas.toblob(callback, type, encoderoptions);

example

if (typeof canvas.toblob !== "undefined") {   canvas.toblob(function(blob) {       // send blob server etc.       ...   }, "image/jpeg", 0.75); } else if (typeof canvas.mstoblob !== "undefined") {   var blob = canvas.mstoblob()   // send blob } else {   // manually convert data-uri blob (if no polyfill) } 

not browsers supports (ie needs prefix, mstoblob, , works differently standard) , chrome needs polyfill.

update (to op's edit, removed) main reason why cropped image larger because original jpeg, new png. can change using todataurl:

var uri = canvas.todataurl("image/jpeg", 0.7);  // last=quality 

before passing manual data-uri blob. recommend using polyfill if browser supports toblob() many times faster , use less memory overhead going encoding data-uri.