使用插件项目：海报保存
调研实践的截图插件主要有下面两个，其他思路与这两个大致相同：
html2canvas:https://github.com/niklasvh/html2canvas
dom-to-image:https://github.com/tsayen/dom-to-image(未在项目中采用，ios中svg转图片有问题)
使用中因为截图图片模糊，于是采用在截图前先放大canvas画布的做法，类似下面介绍的做法
html2canvas截图插件图片放大清晰度解决方案：https://github.com/omwteam/html2canvas
由于项目中图片或者背景图片都是跨域图片，使用html2canvas时可以做两件事：
扫描二维码关注公众号，回复：
158941 查看本文章
1.将图片转变为base64形式，避免跨域问题。（注意，base64图片上不要加crossorigin属性，不然ios上有问题）（可以在渲染图片的时候转换，也可完全在使用html2canvas时转换）
2.图片已经转为base64,不存在跨域问题，而crossorigin属性在ios系统中好像有问题（木有找到官方说明，但是有文章也提到此问题），所以将其去掉
//
源码去掉添加crossorigin
function
ImageContainer(src, cors) {
this.src = src;
this.image = new Image();
//
this.image.crossOrigin =
"Anonymous"
;
var self = this;
this.tainted = null;
this.promise = new Promise(
function
(resolve, reject) {
self.image.onload = resolve;
self.image.onerror = reject;
//
if
(cors) {
//
self.image.crossOrigin =
"Anonymous"
;
//
}
self.image.src = src;
if
(self.image.complete ===
true
) {
resolve(self.image);
}
});
}
//
修改后的代码：去掉添加crossorigin，并将图片资源转成base64,然后继续下一步
function
ImageContainer(src, cors) {
this.src = src;
this.image = new Image();
var self = this;
this.tainted = null;
this.promise = new Promise(
function
(resolve, reject) {
if
(/^data:/.
test
(src)) {
//
如果是base64，则直接执行
self.image.onload = resolve;
self.image.onerror = reject;
self.image.src = src;
if
(self.image.complete ===
true
) {
resolve(self.image);
}
}
else
{
//
如果是url，则读文件流转base64
var request = new XMLHttpRequest();
request.onreadystatechange =
done
;
request.responseType =
'blob'
;
request.
open
(
'GET'
, src,
true
);
request.send();
function
done
() {
if
(request.readyState !== 4)
return
;
if
(request.status !== 200) {
fail(
'cannot fetch resource: '
+ url +
', status: '
+ request.status);
return
;
}
var encoder = new FileReader();
encoder.onloadend =
function
() {
self.image.src = encoder.result;
resolve(self.image);
};
encoder.readAsDataURL(request.response);
}
function
timeout() {
fail(
'timeout of '
+ TIMEOUT +
'ms occured while fetching resource: '
+ url);
}
function
fail(message) {
resolve(
''
);
}
}
});
}
|