使用cropper js将画布转换为blob [英] converting canvas to blob using cropper js

问题描述

我使用 cropper.js 创建了一个用于裁剪图像的应用程序.应用程序正在运行并且图像正在裁剪，之后我尝试将裁剪后的图像作为 blob 发送到服务器端进行存储，

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,

根据 cropper.js 文档，我们可以使用 canvas.toDataURL 获取数据 URL，或使用 canvas.toBlob 获取 blob 并使用 FormData 将其上传到服务器.当我尝试 canvas.toDataURL() 时，我得到了 base64 字符串，但实际上我需要将文件作为 blob 发送，所以我尝试使用 canvas.toBlob() 但我我在 Chrome 中收到 Uncaught TypeError: canvas.toBlob is not a function 和 TypeError: Not enough arguments to HTMLCanvasElement.toBlob. 在 Firefox 中

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

我的代码是这样的

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

推荐答案

toBlob 方法是异步的，需要两个参数，回调函数和图像类型(质量有可选的第三个参数):

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);

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

示例

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)
}

并非所有浏览器都支持它(IE 需要前缀 msToBlob，它的工作方式与标准不同)并且 Chrome 需要一个 polyfill.

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

更新(到 OP 的编辑，现已删除)裁剪出来的图片较大的主要原因是因为原来是JPEG，新的是PNG.您可以使用 toDataURL 更改此设置:

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

在将其传递给手动数据 uri 之前，再将其传递给 Blob.我建议使用 polyfill，就像浏览器支持 toBlob() 一样，它比通过编码 data-uri 快很多倍并且使用更少的内存开销.

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.

这篇关于使用cropper js将画布转换为blob的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！