html2canvas关于图片不能正常截取

问题

首先说说遇到了什么问题。首先有这么一个需求。须要前端根据后端传过来数据，动态的生成图片。图片中的文案、背景图片、用户头像所有都是经过后端的接口获取。可是使用 html2canvas 生成的canvas有些图片成功的在canvas里生成了。可是有些图片不管如何都显示不出来。

官方文档

在项目里面操做了半天未果，google了半天未果。此时有些许绝望。忽然想到了，为何不去它的 官网 看看呢。因而乎我在官网上看到了下面的内容。

Limitations<br/>
All the images that the script uses need to reside under the same origin for it to be able to read them without the assistance of a proxy. Similarly, if you have other canvas elements on the page, which have been tainted with cross-origin content, they will become dirty and no longer readable by html2canvas.<br/>
The script doesn't render plugin content such as Flash or Java applets.

讲的啥呢，这里为英文很差的同窗翻译一下。英语好的能够直接看上文。大概的意思就是在html2canvas里面，是使用脚本去操做的，也就是说使用脚本把html转换成canvas，可是有一个限制，那就是不能使用跨源的图片。若是使用了，html2canvas将不会读取资源。

这也就是为何转换出来的canvas有些图片一直是空白的缘由。若是页面中有其余的canvas也使用了跨源的图片资源，html2canvas都不会去读取。

解决方案

对静态资源作一次转发而且在html2canvas的 配置 里面容许加载跨源资源,就能够了。

2018年8月1日更新

在调试的时候console信息，发现html2canvas自带的log太多，眼花缭乱的。你们能够自行配置取消掉。

html2canvas第一个参数就是你须要转换成canvas的dom节点。第二个参数接受一个对象，里面就是各类配置文件。配置项能够看 这里

{ logging: false }

配置成上面这样，就能够取消html2canvas默认开启的log了。

欢迎光临 我的博客