在使用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();
}
.
|
|
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();
}
.
|