在使用html2canvas截取页面的时候发现图片死活保存不到本地,chrome一直报“网络错误”,
主要出现这个问题是canvas保存图片到本地时各个浏览器像素的限制不同,
所以将图片数据转换成Blob数据流下载下来就行了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
dataURLtoBlob(dataurl) { var arr = dataurl.split( ',' ), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--){ u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); }, downloadCanvas(){ var link = document.createElement( "a" ); var imgData =canvas.toDataURL({format: 'png' , multiplier: 4}); var strDataURI = imgData.substr(22, imgData.length); var blob = this .dataURLtoBlob(imgData); var objurl = URL.createObjectURL(blob); link.download = this .cName+ ".png" ; link.href = objurl; link.click(); } . |