canvas转为图片,有时候会出现网络错误,下载不来,原因是浏览器的下载大小限制导致
建议是最好用jpg,图片质量低,大小也小点,不用png,也可以
设置toDataURL('image/jpg', 0.1),第二参数是图片的像素质量低点,范围是0-1
google的最佳答案为,使用dataURIToBlob,不使用toDataURL
// edited from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill function 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);