javascript - 在 Fabric.js 中将 Canvas 下载为 PNG，出现网络错误

Question

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

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

}

Answer 1

您面临的问题与fabricjs(也不是canvas，甚至不是javascript)直接相关，而是来自某些浏览器(包括Chrome)对 src 最大长度的限制。具有 download 属性的 anchor 元素 ( <a> ) 的属性。

当达到这个限制时，你唯一能得到的就是控制台中这个无法捕获的“网络错误”；下载失败，但你作为开发者无法知道这一点。

正如本文中所提议的(您拒绝标记为-) duplicate ，解决方案是要么直接获取可用的 Blob(对于 Canvas ，您可以调用其 toBlob() 方法，或者首先将 dataURI 转换为 Blob，然后从该 Blob 创建 object URL。

Fabricjs 似乎没有 toBlob功能尚未实现，因此根据您的具体情况，您必须稍后执行。
您可以找到许多将 dataURI 转换为 Blob 的脚本，其中一个可在 MDN's polyfill 中找到。至Canvas.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);