在使用html2canvas的时候。如果元素中还包含网络图片。那么有很大的几率渲染不出来。即时把html2canvas的允许跨域打开也无济于事。这次就从根源解决这个问题。
而且即时渲染出来了。其实同一张图片已经请求了2次（初始渲染一次，html2canvas渲染也请求了一次）。

问题的根本：在插件中，图片请求的时候跨域了（甚至同域的图片都难请求）

 
图片多也会导致图片请求失败

把图片放在OSS（云存储）上，oss允许跨域，图片依然是无法生成

解决：在请求对应oss图片的后面，加一个参数，为时间戳，目的就是不使用oss的缓存，就可以解决跨域问题了，如：

https://test.oss.com/image?t=129094392478

1、在JS中使用 Image 对象。该对象可以设置跨域请求。

2、把图片请求回来后直接渲染到canvas上，注意这里是直接渲染到canvas。并不是通过html2canvas

3、把渲染图片的canvas转成base64的编码格式。

4、把转换好的图片格式重新放到html的元素中

5、使用html2canvas转换对应的html元素
 

服务器的图片，必须是已经设置了允许跨域的

如果服务器端的图片不允许跨域访问，那么只是前端是很难进行跨域图片处理，以下说的使用 img 标签特性也将无效

getCanvasImg(obj){

            var doc = window.document;

            var width = obj.content.offsetWidth;

            var height = obj.content.offsetHeight;

            var canvas = document.createElement("canvas");

            var context = canvas.getContext("2d");

            var scale = 2; 

            canvas.width = width * scale;

            canvas.height = height * scale;

            canvas.getContext("2d").scale(scale, scale); 

            var opts = {

                scale: scale,

                canvas: canvas,

                logging: true,

                width: width,

                height: height

            };

            html2canvas(obj.content, opts).then(function (canvas) {

                var dataUrl = canvas.toDataURL();

                var newImg = doc.createElement("img");

                newImg.src =  dataUrl;

                newImg.id =  "qcImg";

                //newImg.style.width = "100%";

                newImg.style.width = canvas.width/2 + 'px';

                newImg.style.height = canvas.height/2 + 'px';

                newImg.style.borderRadius = '10px';

                newImg.style.webkitBorderRadius = '10px';

                obj.box.removeChild(obj.content);

                obj.box.appendChild(newImg);

                obj.cb&&obj.cb();

            });

        }