关于html2canvas的bug总结

1、使用html2canvas无法渲染图片的情况

问题原因：同一张图片请求了2次（初始渲染一次，html2canvas渲染也请求了一次）在插件中，图片请求的时候跨域了

解决办法：1、在mounted里面获取你要生成html2canvas的所有图片

                  2、声明 Image 对象，给每个图片设置允许跨域

                  3、把图片请求回来后直接渲染到canvas上

                  4、把渲染图片的canvas转成base64的编码格式。替换 页面上原来的图片链接

注意1：如果图片的分辨率过大（高度大于5000），则图片转成base64时会失败。

解决办法：在转化为base64时判断图片分辨率，大于5000的压缩 

注意2：需要生成html2canvas的dom最好不要使用背景图片，不然会模糊，而且仅 相对路径下的图片可以显示，网络图片和线上图片都会因为跨域而丢失

2、生成html2canvas，顶部大量空白，页面显示不全

问题原因：容器高度设置的问题，没有加上滚动条高度

解决办法：1.、获取滚动条高度，设置htmlscanvas的scrollY，scrollX属性

                    var scrollY = $(document).scrollTop();                    

                    var scrollX = $(document).scrollLeft();                    

                    scrollY: -scrollY,                    

                     scrollX: -scrollX,           

问题：一开始使用上面这种方法，但是后来发现在移动端还是会出现白屏问题         

               2、var dom=$('#canvans')            

                     x: dom.offset().left,                      

                     y: dom.offset().top,                    

                     获取所需生成元素的x，y轴位置，从x，y轴的位置开始生成

3、html2canvas暂不支持的css样式： background-blend-mode、background-clip: text、box-decoration-break、repeating-linear-gradient()、font-variant-ligatures、mix-blend-mode、writing-mode、writing-mode、border-image、box-shadow、filter、zoom、 transform（有限支持）、object-fit