首页技术博客 技术教程 正文

html2Canvas 坑

2021-02-14 1769 0条评论


库地址


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 。


文章版权及转载声明

本文作者:符文浩 网址:http://blog.fuwenhao.com/post/351.html 发布于 2021-02-14
文章转载或复制请以超链接形式并注明出处。

发表评论

快捷回复:

评论列表 (暂无评论,1769人围观)参与讨论

还没有评论,来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码