javascript - 使用cropper js将 Canvas 转换为blob

Question

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

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

谁能告诉我一些解决办法

我的代码是这样的

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

Answer 1

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

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 .

更新 ( to OP's edit, now removed ) 裁剪后的图片变大的主要原因是原图是JPEG，新的是PNG。您可以使用 toDataURL 更改此设置:

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

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