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 btw)，而是来自某些浏览器(包括 Chrome)对 src 的最大长度的限制。具有 donwload 属性的 anchor 元素 ( <a> ) 的属性。

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

如本(you-refused-to-mark-as-)中所提议的那样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);