题目

起首说说遇到了什么题目。起首有这么一个需求。须要前端依据后端传过来数据，动态的天生图片。图片中的案牍、背景图片、用户头像全部都是经由过程后端的接口猎取。然则运用 html2canvas 天生的canvas有些图片胜利的在canvas里天生了。然则有些图片无论如何都显现不出来。

官方文档

在项目内里操纵了半天未果，google了半天未果。此时有些许无望。倏忽想到了，为何不去它的 官网 看看呢。于是乎我在官网上看到了下面的内容。

Limitations

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.

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了。

欢迎光临 个人博客