Javascript JS不使用“toDataURL”方法从画布上载图像

我正在尝试将图像从画布上载到服务器。常见的解决方案是使用toDataURL方法从画布获取数据，但不幸的是，一些图像会导致Chrome崩溃。我试着使用image/png和image/jpeg mime类型，我也试着将image/jpeg的质量降低到0.4，但Chrome vesrion 45.0.2454.85 m无论如何都会崩溃。有没有办法不用这个方法从cavnas中提取图像，比如检索Blob对象或类似的东西？

您的问题是图像太大，chrome会因内存不足而崩溃。也许您的解决方案是降低以JPEG格式返回的图像的质量

 var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
 var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
 var lowQuality = canvas.toDataURL("image/jpeg", 0.1);

您也可以尝试在chrome中使用图像格式image/webp special

祝你好运

编辑 如果需要更改逻辑，您也可以使用toBlob方法：

编辑2 根据MDN网站，您有一个polyfill

if (!HTMLCanvasElement.prototype.toBlob) {
 Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  value: function (callback, type, quality) {

    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
        len = binStr.length,
        arr = new Uint8Array(len);

    for (var i=0; i<len; i++ ) {
     arr[i] = binStr.charCodeAt(i);
    }

    callback( new Blob( [arr], {type: type || 'image/png'} ) );
  }
 });
}

---

我已经尝试将图像质量降低到0.4，但没有效果。而0.1的质量太低。我试过你的建议使用image/webp类型，有时它仍然会在一些图像上崩溃。至于toBlob方法，Chrome不支持它=/图像大小为1200x600，图像/webp的dataUrl字符串长度约为70000，因此看起来不会出现内存不足的情况。您可以使用polyfill与Chrome兼容。请参见编辑。但是polyfill基于相同的toDataURL方法，因此它仍然无法解决问题=/在web浏览器上下文中，有些东西是无法实现的。如果chrome有这个bug，你就无法解决它。您必须更改逻辑或功能，或避免使用此浏览器的功能。我明白了。我希望不使用这个特殊功能也能实现同样的逻辑从未找到解决方案呃？幸运的是，我再也不会崩溃了，似乎后来的chrome版本解决了最初的问题

if (!HTMLCanvasElement.prototype.toBlob) {
 Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  value: function (callback, type, quality) {

    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
        len = binStr.length,
        arr = new Uint8Array(len);

    for (var i=0; i<len; i++ ) {
     arr[i] = binStr.charCodeAt(i);
    }

    callback( new Blob( [arr], {type: type || 'image/png'} ) );
  }
 });
}