Question

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

根据 cropper.js 文档，我们可以使用 canvas.toDataURL 来获取数据网址，或使用 canvas.toBlob 获取blob并使用FormData将其上传到服务器。当我试图 canvas.toDataURL（）我收到的base64字符串，但实际上我需要发送的文件作为BLOB所以我试图 canvas.toBlob（）但是我我在chrome中获得Uncaught TypeError: canvas.toBlob is not a function，在Firefox中获得TypeError: Not enough arguments to HTMLCanvasElement.toBlob.

任何人都可以告诉我一些解决方案吗

我的代码就像这样

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

在将其传递给手动数据-ur到Blob之前。我建议使用polyfill，就像浏览器支持toBlob（）一样，它将比使用data-uri编码更快，并且使用更少的内存开销。

Answer 2

正确使用：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

你必须传递回调并在回调中使用blob对象。 toBlob()不返回blob，而是接受以blob为参数的回调。

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

使用cropper js将canvas转换为blob

2 个答案: