问题

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

html2canvas关于图片不能正常截取的更多相关文章

  1. html2canvas.js 图片不显示

    html2canvas.js 图片不显示 在服务器端打开 就可以, 但是在本地就不显示图片. 查找百度,是因为图片不能跨域. 在给非编程人员使用的时候,建议把所有的图片,转化为base64,就可以直接 ...

  2. 微信小程序 拖动图片一边进行截取

    简单实现一个画布截取图片的功能 原始图片超出指定尺寸,会进行隐藏,利用短边的宽度截取长边的宽度,拖动生成指定内容的图片 横图 竖图 var box_width = 600; //截取框尺寸 var b ...

  3. Python+selenium之截图图片并保存截取的图片

    本文转载:http://blog.csdn.net/u011541946/article/details/70141488 http://www.cnblogs.com/timsheng/archiv ...

  4. 关于使用html2canvas 绘制图片的坑

    html2canvas绘制跨域图片之后,会导致画布被污染,从而无法使用canvas的toDateUrl()等方法获取图片数据的方法,这是canvas的限制而并非html2canvas的原因.好了锅甩好 ...

  5. vue的html2canvas将dom转化为图片时踩得坑

    一.html2canvas中图片涉及跨域图片 应用场景:做个投票活动,将参赛者的信息转化成图片截图分享.用户上传图片上传到腾讯云cos桶中,html2canvas只能转换本地资源的图片,涉及跨域的图片 ...

  6. html2canvas实现截取指定区域或iframe的区域

    官网文档: http://html2canvas.hertzen.com/ 使用的是 jquery 3.2.1   html2canvas 1.0.0-rc.7 截取根据id的指定区域: var ca ...

  7. 网站中集成jquery.imgareaselect实现图片的本地预览和选择截取

    imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能.其文档和Demo也是很详尽的.大家可以到http://odynie ...

  8. 微信小程序 画布drawImage实现图片截取

    大多数图片都大小不一,选择框的尺寸也是宽高相等的,就会有图片被压缩 解决方法: 1.可以使用画布对图片先进行截取,保存截取图片(用户自己选取,或者指定图片中心区域截取),但是对于多张图片手动截取,会影 ...

  9. 使用JQuery插件Jcrop进行图片截取

    Jcrop插件本身并不含有图片截取功能,它仅仅是在前端层面构建一套截取动画效果并产生4个坐标点,插件使用者将这4个坐标点传回至服务器接口上进行截取操作.其优点是具有较高的通用性.浏览器兼容性(IE6+ ...

随机推荐

  1. mysql5.7高版本加载低版本sql文件,时间不能为0000-00-00格式错误

    错误代码:ERROR 1067 (42000): Invalid default value for 解决方式 1. show session variables like '%sql_mode%'; ...

  2. canvas绘制圆图输出图片格式

    function drawCircleImage(url, callback) { const canvas = document.createElement('canvas'); const img ...

  3. MySQL PROFILE 跟踪语句各阶段性能开销

    PROFILE  可以跟踪查询语句各个阶段 Time,IO,CPU,MEMORY 等资源使用情况,比较详细.所以系统一般不会记录太多.启用是全局的,所以每个连接都保持语句的资源使用情况. 查看 PRO ...

  4. 2019.03.28 bzoj3326: [Scoi2013]数数(数位dp)

    传送门 题意: 一个人数数,规则如下: 确定数数的进制B 确定一个数数的区间[L, R] 对于[L, R] 间的每一个数,把该数视为一个字符串,列出该字符串的所有连续子串对应的B进制数的值. 对所有列 ...

  5. SpringMVC对静态资源的访问(js、css、img)

    在网上找了很多的内容,都没法解决,最后通过https://blog.csdn.net/wild46cat/article/details/52456715中内容解决的,在此记录一下. 项目结构: po ...

  6. 前端(主要html/css)学习笔记

    一个浪漫的网站: http://www.romancortes.com/blog/1k-rose/

  7. Python3学习(1)——初步了解

    Python是解析性语言,Python解释器将源程序解释并执行. 基本语法 print()   --打印字符串 -直接打印 print("hello world") 结果: hel ...

  8. 深入C#

     深入C# String类 C#中的String类他是专门处理字符串的(String),他在System的命名空间下,在C#中我们使用的是string 小写的string只是大写的String的一个别 ...

  9. OC协议、代理的简单使用

    在不同类之间传递数据,我所学到的有三种,1.代理,2.block,3.通知.在这里,我们先来讲一下代理的使用,后面我会继续讲到block和通知.代理通常和协议是一起使用的,协议通常写在代理类里面,被代 ...

  10. Python序列结构--字典

    字典:反映对应关系的映射类型 字典(dict)是包含若干“键:值”元素的无序可变序列 字典中元素的“键”可以是python中任意不可变数据,例如整数.实数.复数.字符串.元组等类型可哈希数据,“键”不 ...