I have created an application using cropper.js for cropping an images. The application is working and the image is cropping, after that I am trying to send the cropped image as blob to the server side for storing,

As per the cropper.js documentation we can use canvas.toDataURL to get a Data URL, or use canvas.toBlob to get a blob and upload it to server with FormData. when I tried canvas.toDataURL() I am getting the base64 string, but actually I need to send the file as blob so I tried with canvas.toBlob() but I am getting Uncaught TypeError: canvas.toBlob is not a function in chrome and TypeError: Not enough arguments to HTMLCanvasElement.toBlob. in Firefox

Can anyone please tell me some solution for this

My code is like this

var canvas = $image.cropper("getCroppedCanvas", undefined);
var formData = new FormData();
formData.append('mainImage', $("#inputImage")[0].files[0]);
formData.append('croppedImage', canvas.toBlob());

I have created an application using cropper.js for cropping an images. The application is working and the image is cropping, after that I am trying to send the cropped image as blob to the server side for storing,

As per the cropper.js documentation we can use canvas.toDataURL to get a Data URL, or use canvas.toBlob to get a blob and upload it to server with FormData. when I tried canvas.toDataURL() I am getting the base64 string, but actually I need to send the file as blob so I tried with canvas.toBlob() but I am getting Uncaught TypeError: canvas.toBlob is not a function in chrome and TypeError: Not enough arguments to HTMLCanvasElement.toBlob. in Firefox

Can anyone please tell me some solution for this

My code is like this

var canvas = $image.cropper("getCroppedCanvas", undefined);
var formData = new FormData();
formData.append('mainImage', $("#inputImage")[0].files[0]);
formData.append('croppedImage', canvas.toBlob());

• javascript
• jquery
• html
• image
• canvas

2 Answers 2

The method toBlob is asynchronous and require two arguments, the callback function and image type (there is optional third parameter for quality):

void canvas.toBlob(callback, type, encoderOptions);

Example

if (typeof canvas.toBlob !== "undefined") {
  canvas.toBlob(function(blob) {
      // send the blob to server etc.
      ...
  }, "image/jpeg", 0.75);
}
else if (typeof canvas.msToBlob !== "undefined") {
  var blob = canvas.msToBlob()
  // send blob
}
else {
  // manually convert Data-URI to Blob (if no polyfill)
}

Not all browsers supports it (IE needs prefix, msToBlob, and it works differently than the standard) and Chrome needs a polyfill.

Update (to OP's edit, now removed) The main reason why the cropped image is larger is because the original is JPEG, the new is PNG. You can change this by using toDataURL:

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

before passing it to the manual data-uri to Blob. I would recommend using the polyfill as if the browser supports toBlob() it will be many times faster and use less memory overhead than going by encoding a data-uri.

The proper use: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

you have to pass the callback and use the blob object within callback. toBlob() does not returns the blob rather it accepts a callback which provides blob as parameter.

var canvas = document.getElementById("canvas");

canvas.toBlob(function(blob) {
  var newImg = document.createElement("img"),
      url = URL.createObjectURL(blob);

  newImg.onload = function() {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
});