html2canvas 截屏功能脱坑

功能脱坑"/>

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)});

—坑解释

1. Html2Canvas 受限于浏览器的同源策略， 若是使用非同源的图片会taint（污染）画布， 画布污染后将不能读取，默认allowTaint 为false， 不允许污染画布，同时图片也不能画在画布上。
   其属性allowTaint: true , 可以设置成允许画布被污染， 则可以直接绘制出跨域图片；

2. 使用 allowTait： true 虽然可以将跨域的图片的html 转为canvas ，但是当想读取此Canvas具体信息时，如 getImageData， toDataUrl 方法却会报错，原因是被污染的画布 因为同源策略而存在安全问题。
   解决办法 ：
   1） 使用 crossOrigin 属性。具体分析 ：解决canvas图片getImageData,toDataURL跨域问题
   2）设置 useCORS： true ， 原理相同，但使用以上跨域方法， 若同时设置为 allowTaint： true ， 仍然会认为画布已被污染而不可用；

3. html2Canvas 虽然使用广泛，但是现在支持很少了。 实际在使用时，要注意其实际对于css 属性的支持， 像是超过长度则显示省略号这种效果，实际使用 text-overflow 等是不支持的，最好是一边写html，一边生成Canvas 生成效果。

foreignObjectRendering

true
浏览器支持ForeignObject（借助标签，我们可以直接在SVG内部嵌入XHTML元素）就可使用，有兼容性问题，高版本浏览器可用（SVG 元素可以让DOM变图片）
字体图标不支持Unicode，支持svg方式
有滚动条的div，截图时会回到了初始化top位置
false
有滚动条的div，滚动出去的内容也会显示在上方
地图会变大
tab使用会跑偏
box-shadow等样式不支持（）
各种跑偏