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

Z时代
2024-01-10
分类：问答

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

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

这就是我在做什么：

HTML代码：

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

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

回答：

您面临的问题与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);