问题描述
我使用 创建了一个应用程序,用于裁剪图片。应用程序正在工作,图像正在裁剪,之后,我试图发送裁剪图像作为blob到服务器端进行存储
根据 文档,我们可以使用 canvas.toDataURL 获取数据网址,或使用 canvas.toBlob 获取一个blob,并使用FormData将其上传到服务器。当我尝试 canvas.toDataURL()我得到base64字符串,但实际上我需要发送文件为blob所以我试着用 canvas.toBlob()获取未捕获的TypeError:canvas.toBlob不是chrome中的函数
和 TypeError: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());
toBlob方法是异步的,回调函数和图像类型(有可选的第三个参数为质量):
示例
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 {
//手动将Data-URI转换为Blob(如果没有polyfill)
}
不是所有的浏览器都支持它(IE需要前缀msToBlob,它的工作方式与标准不同),Chrome需要 )裁剪后的图片较大的主要原因是原始图片为JPEG ,新的是PNG。您可以使用toDataURL更改此设置:
var uri = canvas.toDataURL(image / jpeg,0.7); // last = quality
,然后将其传递到Blob的手动数据uri。我建议使用polyfill,就好像浏览器支持toBlob(),它会比通过编码一个data-uri更快,使用更少的内存开销。
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,
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
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());
The method toBlob is asynchronous and require two arguments, the callback function and image type (there is optional third parameter for quality):
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.
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
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将canvas转换为blob的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!