功能脱坑"/>
html2canvas 截屏功能脱坑
- html2canvas 1.0.0-alpha.11
- Copyright © 2018 Niklas von Hertzen
- Released under MIT License
html2canvas
将页面dom 元素画到 canvas 上,视觉上 达成截图的 效果。
该脚本允许您直接在用户浏览器上拍摄网页或其部分的“屏幕截图”。屏幕截图是基于DOM的,因此不可能100%准确到真实的表示,因为它没有生成实际的屏幕快照,而是基于页面上可用的信息构建屏幕快照。
html2canvas(document.body, {//参数写这里,参数数组。}).then((canvas) =>{//相关操作,同上canvas.id = 'demo=canvas'document.body.appendChild(canvas)});
相关参数:
遇到的坑
—图片跨域
html2canvas设置useCORS:true
allowTaint:false
—图片模糊
将canvas的属性width和height属性放大为2倍(或者设置为devicePixelRatio倍),最后将canvas的CSS样式width和height设置为原先1倍的大小。
<canvas width="400" height="200" style="width: 200px; height: 100px"></canvas>
—html2canvas 截取地图
关键参数:foreignObjectRendering
html2canvas(document.body, {useCORS : true,foreignObjectRendering : true,allowTaint :false}).then((canvas) =>{//相关操作,同上canvas.id = 'demo=canvas'document.body.appendChild(canvas)});
—坑解释
-
Html2Canvas 受限于浏览器的同源策略, 若是使用非同源的图片会taint(污染)画布, 画布污染后将不能读取,默认allowTaint 为false, 不允许污染画布,同时图片也不能画在画布上。
其属性allowTaint: true , 可以设置成允许画布被污染, 则可以直接绘制出跨域图片; -
使用 allowTait: true 虽然可以将跨域的图片的html 转为canvas ,但是当想读取此Canvas具体信息时,如 getImageData, toDataUrl 方法却会报错,原因是被污染的画布 因为同源策略而存在安全问题。
解决办法 :
1) 使用 crossOrigin 属性。具体分析 :解决canvas图片getImageData,toDataURL跨域问题
2)设置 useCORS: true , 原理相同,但使用以上跨域方法, 若同时设置为 allowTaint: true , 仍然会认为画布已被污染而不可用; -
html2Canvas 虽然使用广泛,但是现在支持很少了。 实际在使用时,要注意其实际对于css 属性的支持, 像是超过长度则显示省略号这种效果,实际使用 text-overflow 等是不支持的,最好是一边写html,一边生成Canvas 生成效果。
foreignObjectRendering
true
浏览器支持ForeignObject(借助标签,我们可以直接在SVG内部嵌入XHTML元素)就可使用,有兼容性问题,高版本浏览器可用(SVG 元素可以让DOM变图片)
字体图标不支持Unicode,支持svg方式
有滚动条的div,截图时会回到了初始化top位置
false
有滚动条的div,滚动出去的内容也会显示在上方
地图会变大
tab使用会跑偏
box-shadow等样式不支持()
各种跑偏
更多推荐
html2canvas 截屏功能脱坑
发布评论