javascript 使用cropper js将画布转换为blob
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29814895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
converting canvas to blob using cropper js
提问by Alex Man
I have created an application using cropper.jsfor 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创建了一个应用程序来裁剪图像。应用程序正在运行并且图像正在裁剪，之后我尝试将裁剪后的图像作为 blob 发送到服务器端进行存储，
As per the cropper.jsdocumentation we can use canvas.toDataURLto get a Data URL, or use canvas.toBlobto 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 functionin chrome and TypeError: Not enough arguments to HTMLCanvasElement.toBlob.in Firefox
根据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
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());
回答by
The method toBlob is asynchronous and require two arguments, the callback function and image type (there is optional third parameter for quality):
toBlob 方法是异步的，需要两个参数，回调函数和图像类型（质量有可选的第三个参数）：
void canvas.toBlob(callback, type, encoderOptions);
void canvas.toBlob（回调，类型，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.
并非所有浏览器都支持它（IE 需要前缀 msToBlob，它的工作方式与标准不同）并且 Chrome 需要一个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:
更新（到 OP 的编辑，现已删除） 裁剪图像较大的主要原因是因为原始是 JPEG，新的是 PNG。您可以使用 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.
在将其传递给手动数据 uri 到 Blob 之前。我建议使用 polyfill，就像浏览器支持 toBlob() 一样，它比通过编码 data-uri 快很多倍并且使用更少的内存开销。
回答by Vijay
The proper use: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
正确使用：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 blobas parameter.
您必须传递回调并在回调中使用 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);
});
