截图插件

朱雀 2020-09-12 01:55 960阅读 0赞

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

html2canvas:[https://github.com/niklasvh/html2canvas][https_github.com_niklasvh_html2canvas]

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

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

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

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

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('');
                    }
                }
            });
        }

[https_github.com_niklasvh_html2canvas]: https://github.com/niklasvh/html2canvas
[https_github.com_tsayen_dom-to-image]: https://github.com/tsayen/dom-to-image
[https_github.com_omwteam_html2canvas]: https://github.com/omwteam/html2canvas