html2canvas 原理,html2Canvas 坑

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 生成效果。

但是这样你以为就安全了么。。然并卵。。。html2Canvas 实际在 PC 和Android 上都能完美呈现时， 在ios 上也会出幺蛾子。。。比如：

pc 效果 与 Android 效果

ios效果

星星不见了。。 星星实际实现是使用 字体图标， 实际测试 发现ios 对 :before, :after 不支持。。

解决办法： 去掉:before伪类，改为直接使用unicode 码形式；

4. 关于字体图标

使用浏览器打开页面时，浏览器会读取 HTML 文件进行解析渲染，对于html中的文字会转换成对应的 unicode码，再根据HTML 里设置的 font-family (如果没设置则使用浏览器默认设置)去查找电脑里(如果有自定义字体@font-face ，则加载对应字体文件)对应字体的字体文件，找到文件后根据 unicode 码去查找绘制外形，找到后绘制到页面上。

字体图标实现原理就是这样了， 各种图标使用自己的字体库来对unicode 码进行显示设计， 实际在实现时为了更好的可读性使用了 classname + :before 。