使用cropper js将canvas转换为blob [英] converting canvas to blob using cropper js

问题描述

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

根据 cropper.js 文档，我们可以使用 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方法是异步的，回调函数和图像类型（有可选的第三个参数为质量）：

void canvas.toBlob（callback，type，encoderOptions） / p>

示例

  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需要 更新（ OP的修改，现已删除 ）裁剪后的图片较大的主要原因是原始图片为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):

void canvas.toBlob(callback, type, 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.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！