javascript – 在fabric.js中将Canvas作为PNG下载,给出网络错误

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

PS：如果我不给乘数属性,它正在下载,但我确实想使用乘数属性,因为我必须缩放图像

这就是我在做的事情：

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)对Anchor Element的src属性的最大长度的限制(< a> ;)使用donwload属性.

当达到这个限制时,你唯一得到的就是控制台中无法捕获的“网络错误”;下载失败,但你作为开发人员无法了解它.

正如在此(你拒绝标记为)duplicate中提出的那样,解决方案是在可用时直接获取Blob(对于画布,您可以调用其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);

标签：html,javascript,canvas,fabricjs
来源： https://codeday.me/bug/20190916/1808643.html