小编典典

在Fabric.js中将Canvas下载为PNG,从而导致网络错误

html

我想使用fabric.js将Canvas下载为PNG。下载时,我想缩放图像。所以我使用函数的multiplier属性toDataURL()。但我收到失败网络错误

PS: 如果我不提供multiplier财产,它正在下载,但是我 确实 想使用multiplier财产,因为我必须缩放图像

这就是我在做什么:

HTML代码:

<canvas width="400" height="500" id="canvas" ></canvas>
 <a id='downloadPreview' href="javascript:void(0)"> Download Image </a>

JS

document.getElementById("downloadPreview").addEventListener('click', downloadCanvas, false);

var _canvasObject = new fabric.Canvas('canvas');

var downloadCanvas =    function(){
    var link = document.createElement("a");

link.href = _canvasObject.toDataURL({format: 'png', multiplier: 4});
      link.download = "helloWorld.png";
     link.click();

}

阅读 478

收藏
2020-05-10

共1个答案

小编典典

您面临的问题与fabric.js(也不是canvas,甚至不是javascriptbtw)都没有直接关系,而是由于某些浏览器(包括Chrome)确实限制了带有下载的src锚元素(<a>)的属性的最大长度属性。

当达到此限制时,您唯一需要的就是控制台中无法捕获的“网络错误”;下载失败,但是作为开发人员的您却不知道。

正如在此 _(您拒绝标记为)_重复项中所建议的,解决方案是直接在可用时直接获取Blob(对于画布,您可以调用其toBlob()方法,或者首先将dataURI转换为Blob,然后然后从该Blob创建一个对象URL。

Fabricjs似乎toBlob尚未实现功能,因此在您的确切情况下,您将需要稍后执行。 您可以找到许多脚本将dataURI转换为Blob,MDN的polyfilltoCanvas.toBlob()方法中提供了一个脚本。

然后看起来像这样:

// edited from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill
function dataURIToBlob(dataURI, callback) {
  var binStr = atob(dataURI.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]));
}

var callback = function(blob) {
    var a = document.createElement('a');
    a.download = fileName;
    a.innerHTML = 'download';
    // the string representation of the object URL will be small enough to workaround the browser's limitations
    a.href = URL.createObjectURL(blob);
    // you must revoke the object URL, 
    //   but since we can't know when the download occured, we have to attach it on the click handler..
    a.onclick = function() {
      // ..and to wait a frame
      requestAnimationFrame(function() {
          URL.revokeObjectURL(a.href);
        });
        a.removeAttribute('href')
      };
    };

dataURIToBlob(yourDataURL, callback);
2020-05-10