截图插件

调研实践的截图插件主要有下面两个，其他思路与这两个大致相同：

html2canvas:https://github.com/niklasvh/html2canvas

dom-to-image:https://github.com/tsayen/dom-to-image(未在项目中采用，ios中svg转图片有问题)

 

使用中因为截图图片模糊，于是采用在截图前先放大canvas画布的做法，类似下面介绍的做法（主要sh放大canvas画布）

html2canvas截图插件图片放大清晰度解决方案：https://github.com/omwteam/html2canvas

由于项目中图片或者背景图片都是跨域图片，使用html2canvas时可以做两件事：

1.将图片转变为base64形式，避免跨域问题。（注意，base64图片上不要加crossorigin属性，不然ios上有问题）（可以在渲染图片的时候转换，也可完全在使用html2canvas时转换）

2.图片已经转为base64,不存在跨域问题，而crossorigin属性在ios系统中好像有问题（木有找到官方说明，但是有文章也提到此问题），所以将其去掉

//源码去掉添加crossoriginfunction 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('');                }            }        });    }