摘要：需要前端根据后端传过来数据，动态的生成图片。图片中的文案背景图片用户头像全部都是通过后端的接口获取。但是有些图片无论如何都显示不出来。此时有些许绝望。如果页面中有其他的也使用了跨源的图片资源，都不会去读取。大家可以自行配置取消掉。
问题
首先说说遇到了什么问题。首先有这么一个需求。需要前端根据后端传过来数据，动态的生成图片。图片中的文案、背景图片、用户头像全部都是通过后端的接口获取。但是使用 html2canvas 生成的canvas有些图片成功的在canvas里生成了。但是有些图片无论如何都显示不出来。
官方文档在项目里面操作了半天未果，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.
讲的啥呢，这里为英文不好的同学翻译一下。英语好的可以直接看上文。大概的意思就是在html2canvas里面，是使用脚本去操作的，也就是说使用脚本把html转换成canvas，但是有一个限制，那就是不能使用跨源的图片。如果使用了，html2canvas将不会读取资源。
这也就是为什么转换出来的canvas有些图片一直是空白的原因。如果页面中有其他的canvas也使用了跨源的图片资源，html2canvas都不会去读取。
解决方案对静态资源做一次转发并且在html2canvas的 配置 里面允许加载跨源资源,就可以了。
2018年8月1日更新在调试的时候console信息，发现html2canvas自带的log太多，眼花缭乱的。大家可以自行配置取消掉。
html2canvas第一个参数就是你需要转换成canvas的dom节点。第二个参数接受一个对象，里面就是各种配置文件。配置项可以看 这里
{ logging: false }
配置成上面这样，就可以取消html2canvas默认开启的log了。
欢迎光临 个人博客
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96438.html
摘要：谷歌是通过来实现这个组件的，比较复杂谷歌的工具加载文件和截图文件有兴趣的同学可以看一下。高亮区域核心部分截图搞定了，接下来就是高亮区域了。 几乎所有的APP应用包括Web应用都需要一个意见反馈，这样才能了解用户对产品的意见和建议，以便于不断提升完善自己的产品。目前的反馈组件一般有两种，一种是打开一个反馈页面填写表单，另一种则是通过弹窗来完成，相比较而言第二种更加方便，而且更加容易组件化...
摘要：前端页面中可以使用将整个网页或一部分区域截取成图片并导出。目前比较好用的处理方式是先将转换成，再从中导出图片。调用，现在我们有了一个对象，下一步是保存到文件中。至此，对网页中的一部分进行截图并保存成文件就完成了。 前端页面中可以使用JS将整个网页或一部分区域截取成图片并导出。 今天刚做了一次这个功能，和大家分享一下经验。 使用html2canvas将dom转换成canvas 网页截图的...
摘要：接下来，亮出自己做的简历。登录进入后，就可以选择一个你喜欢的简历模板进行制作简历了。将页面左边的工具栏拿掉，然后将简历宽度放大到接近浏览器宽度即可达到像素最高的效果。此外，会自动保存你做的简历，方便下次编辑。 以下文章摘自我的博客，原文链接 下面的简历图片不上传了，想看的点击原文链接就能看到了。 简述下原理：首先找一个可以在线制作简历并提供简历模板的网站，然后在模板上填好自己的信息，并...
摘要：最近做了个实现网页缩略图的项目，其中不免需要用到网页截屏。选择好方案后还是踩了不少坑，第一个就是我得想办法让它和通信，不然我没法通过前端只传一个需要被截图的链接给就能实现截图。 最近做了个实现网页缩略图的项目，其中不免需要用到网页截屏。 一开始想的是看看能不能在前端直接实现截图，因为Web端的截图并生成图片并不算是一个高频的需求，网上资料自然也不算多，查来查去，发现JavaScript...
摘要：用于将及其状态转化为可序列化的数据结构并添加唯一标识则是将记录的数据结构重建为对应的。用于记录中的所有变更则是将记录的变更按照对应的时间一一重放。表示观察变动时，是否需要记录变动前的属性值。该方法返回变动记录的数组。 摘要： 网页应该如何录屏呢？ 作者：Winty 原文：用户行为录帧调研 Fundebug经授权转载，版权归原作者所有。 关键点 首先，每一次会话都有一个唯一的s...
阅读 1886·2021-11-15 11:46
阅读 1077·2021-10-26 09:49
阅读 1818·2021-10-14 09:42
阅读 3373·2021-09-26 09:55
阅读 826·2019-08-30 13:58
阅读 1023·2019-08-29 16:40
阅读 3462·2019-08-26 10:27
阅读 600·2019-08-23 18:18
