在fabric.js中将画布下载为PNG，出现网络错误 [英] Download Canvas as PNG in fabric.js giving network Error

问题描述

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

I want to download Canvas as PNG using fabric.js. While downloading I want to scale the image. So I use multiplier property of toDataURL() function. But I get Failed-Network Error

PS:如果我不给 multiplier 属性，它正在下载但我确实想使用 multiplier属性，因为我必须缩放图像

PS: If I dont give multiplier property,it is downloading but I do want to use multiplier property since I have to scale the image

这就是我正在做的:

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

}

推荐答案

您面临的问题与fabricjs 没有直接关系(也不是canvas，甚至不是javascript btw)，而是来自某些浏览器(包括Chrome)的限制具有 onwload 属性的锚元素 () 的 src 属性的最大长度.

The problem you are facing is not directly related to fabricjs, (nor canvas and not even javascript btw), but comes from limitations some browsers (including Chrome) does have on the maximum length for the src attribute of an Anchor Element (<a>) with the donwload attribute.

当达到这个限制时，你唯一得到的就是控制台中这个无法捕捉的网络错误"；下载失败，但您作为开发人员无法知道.

When this limit is reached, then the only thing you've got is this uncatchable "Network Error" in the console ; the download as failed, but you as the developer can't know about it.

如本(you-refused-to-mark-as-)中所提议的重复，解决方案是直接获取可用的 Blob(对于画布，您可以调用它的 toBlob() 方法，或者先转换你的dataURI到 Blob，然后从这个 Blob.

As proposed in this (you-refused-to-mark-as-) duplicate, the solution is either to directly get a Blob when available (for canvas, you may call its toBlob() method, or to first convert your dataURI to a Blob, and then create an object URL from this Blob.

Fabricjs 似乎尚未实现 toBlob 函数，因此在您的具体情况下，您必须稍后执行.
您可以找到许多将 dataURI 转换为 Blob 的脚本，其中一种可在 MDN 的 polyfill 到 Canvas.toBlob() 方法.

Fabricjs doesn't seem to have a toBlob function implemented yet, so in your exact case, you'll have to do the later.
You can find many scripts to convert dataURI to Blob, one is available in MDN's polyfill to Canvas.toBlob() method.

然后它看起来像这样:

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

这篇关于在fabric.js中将画布下载为PNG，出现网络错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！