html2canvas图片不能正常截取,html2canvas关于图片不能正常截取

问题

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

官方文档

在项目里面操做了半天未果，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.git

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

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

解决方案

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

2018年8月1日更新

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

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

{ logging: false }

复制代码

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

欢迎光临 我的博客ide