使用cropper js将canvas转换为blob

我使用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中Uncaught TypeError: canvas.toBlob is not a function和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需要填充 。

更新 （ 到OP的编辑，现在删除 ）裁剪图像较大的主要原因是因为原件是JPEG，新的是PNG。 您可以使用toDataURL更改此设置：

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

在将其传递给手动数据-uri到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); });