标签:attr span code 路径 back base64 col spl color
使用html2canvas 生成尺寸较大 base64 后进行 a标签 download 下载 ,浏览器报网络失败错误
通过谷歌搜索 发现原因是
因为截取尺寸较大 导致生成base64 长度太大 ,达到了a标签的href 上限,所以报错下载失败,解决方案是 将base64 dataURI转换为Blob 文件对象
然后a 链接下载 blob文件路径
// 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);
解决链接:https://stackoverflow.com/questions/37135417/download-canvas-as-png-in-fabric-js-giving-network-error
标签:attr span code 路径 back base64 col spl color
原文地址:https://www.cnblogs.com/richard1015/p/10349259.html