题目

起首说说遇到了什么题目。起首有这么一个需求。须要前端依据后端传过来数据，动态的天生图片。图片中的案牍、背景图片、用户头像全部都是经由过程后端的接口猎取。然则运用 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了。

欢迎光临 个人博客