下载Canvas作为PNG在fabric.js给网络错误

本文介绍了下载Canvas作为PNG在fabric.js给网络错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我想使用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：如果我不提供乘数属性，因为我要缩放图片，所以正在下载，但我确实要使用乘数属性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直接相关（也不是画布甚至不是javascript btw），而是来自于一些浏览器（包括Chrome）对 src < a> ）的c> 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. 按照此（您拒绝标记为）的建议 重复，解决方案是直接获取一个Blob ，您可以调用其 toBlob（） 方法，或先将dataURI转换为Blob，然后创建对象URL 。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#Polyfillfunction dataURIToBlob(dataURI, callback) { var binStr = atob(this.toDataURL(type, quality).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], { type: type || 'image/png' }));}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); 这篇关于下载Canvas作为PNG在fabric.js给网络错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！