html2canvas关于图片不能正常截取的解决方案_html2canvas截取不到图片资源-CSDN下载

版权申诉

1星 95 浏览量 2020-09-22 12:33:28 上传评论收藏 42KB PDF 举报

资源推荐

资源详情

资源评论

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的配置里面允许加载跨源资源,就可以了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

内容反馈

版权申诉

菜鸟老五

2021-02-24

什么东西一点用都没，图片展示不全跟跨域有毛线关系

weixin_38593738

粉丝: 0

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip