问题

首先说说遇到了什么问题。首先有这么一个需求。需要前端根据后端传过来数据，动态的生成图片。图片中的文案、背景图片、用户头像全部都是通过后端的接口获取。但是使用 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了。

欢迎光临个人博客

html2canvas关于图片不能正常截取 1相关推荐

html2canvas图片不能正常截取,html2canvas关于图片不能正常截取
问题首先说说遇到了什么问题.首先有这么一个需求.须要前端根据后端传过来数据,动态的生成图片.图片中的文案.背景图片.用户头像所有都是经过后端的接口获取.可是使用 html2canvas 生成的can ...
html2canvas关于图片不能正常截取
问题首先说说遇到了什么问题.首先有这么一个需求.需要前端根据后端传过来数据,动态的生成图片.图片中的文案.背景图片.用户头像全部都是通过后端的接口获取.但是使用 html2canvas 生成的can ...
html2canvas截取图片不完整,html2canvas关于图片不能一般截取
题目起首说说遇到了什么题目.起首有这么一个需求.须要前端依据后端传过来数据,动态的天生图片.图片中的案牍.背景图片.用户头像全部都是经由过程后端的接口猎取.然则运用 html2canvas 天生的c ...
html2canvas 截图图片为空白无法截图
html2canvas 截图图片类型为空白解决办法图片地址不是本地图片是网络图会出现截取后为空白的情况 1.此时可以让后台返给你base64的图片地址就可以截取了 2.做个静态转化先存在本地 ...
python测试脚本截图_Python+selenium实现截图图片并保存截取的图片
这篇文章介绍如何利用Selenium的方法进行截图,在测试过程中,是有必要截图,特别是遇到错误的时候进行截图.在selenium for Python中主要有三个截图方法,我们挑选其中最常用的一种. ...
vue-drag-resize + html2canvas合成图片并下载
vue-drag-resize + html2canvas 合成图片并下载可以实现图片拖动,缩放,最后合成一个图片并且下载的功能一.下载 vue-drag-resize 和 html2canvas ...
html2canvas导出图片缺失
html2canvas导出图片只能导出第一屏,被隐藏的部分不显示; 出现的原因: html2canvas是按照当前元素的高度去生成图片的, 如果内部的元素高度大于当前父元素的高度,那么就会出现这情况. ...
html2canvas 出现图片无法展示
html2canvas 出现图片无法展示我有一个大胆的想法,我要一直写到死,那一天我不写了,可能就死了.哈哈. 哈喽,大家好,我是你们的攻城狮,人贱人爱的 Ken,一个永远充满激情的人. 最近接收到 ...
html2canvas改成同步,html2canvas转为图片异步转同步问题（记录）
描述:最近使用html2canvas插件截取页面上指定dom为图片,然后将生成的图片替换页面上的dom后,将替换后的页面内容保存至数据库,结果保存的是保存前的页面,初步判定是html2canvas的异 ...
vue 制作带二维码的海报并下载。 (html2canvas转为图片不显示文字的方法)
效果图如上 1.安装依赖 npm install qrcode (生成二维码) html2canvas (截取html元素生成图片) (引入依赖) import qrcode from "q ...

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

问题

官方文档

解决方案

2018年8月1日更新

html2canvas关于图片不能正常截取 1相关推荐

最新文章

热门文章