Question

我正在尝试将图片从画布上传到服务器。常见的解决方案是使用PlayerConstants.PROGRESSBAR_HANDLER = new Handler(){ @Override public void handleMessage(Message msg){ //get seek bar variable value and set to progress bar } }; }catch(Exception e){}方法从画布中获取数据，但遗憾的是一些图像会导致Chrome崩溃。我试图使用toDataURL和image/png mime类型，我也试图将image/jpeg的质量降低到0.4，但Chrome（vesrion 45.0.2454.85 m）仍在粉碎。有没有办法在没有这种方法的情况下从cavnas中提取图像，比如检索Blob对象或类似的东西？

Answer 1

您的问题是图片太大，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。

祝你好运。

修改

如果您需要更改逻辑，那么您也可以使用方法toBlob()：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

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);
});

编辑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'} ) );
  }
 });
}

JS从Canvas上传图像而没有“toDataURL”方法

1 个答案:

修改

编辑2