没有合适的资源?快使用搜索试试~ 我知道了~
html2canvas关于图片不能正常截取的解决方案
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
![star](https://csdnimg.cn/release/downloadcmsfe/public/img/star.98a08eaa.png)
温馨提示
图片中的文案、背景图片、用户头像全部都是通过后端的接口获取。但是使用 html2canvas 生成的canvas有些图片成功的在canvas里生成了。但是有些图片无论如何都显示不出来,这篇文章主要介绍了html2canvas关于图片不能正常截取的解决方案,感兴趣的小伙伴们可以参考一下
资源推荐
资源详情
资源评论
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/release/download_crawler_static/12879699/bg1.jpg)
html2canvas关于图片不能正常截取的解决方案关于图片不能正常截取的解决方案
图片中的文案、背景图片、用户头像全部都是通过后端的接口获取。但是使用 html2canvas 生成的canvas有些
图片成功的在canvas里生成了。但是有些图片无论如何都显示不出来,这篇文章主要介绍了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的 配置 里面允许加载跨源资源,就可以了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
资源评论
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
- 菜鸟老五2021-02-24什么东西一点用都没,图片展示不全跟跨域有毛线关系
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
weixin_38593738
- 粉丝: 0
- 资源: 924
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)