html2canvas踩坑

html2canvas踩坑(iso用rem单位无法转换canva

2019-01-07  本文已影响0人  捞兴

在做一个年度账单的项目,要求最后一页输出成一张图片,然后在微信中就可以长按下载。

最后一页效果图

按着网上的教程,html2canvas可以直接把dom元素转换成canvas
PC和安卓手机都可以转换,但是IOS部分dom元素和字体没有渲染出来,只有百度查原因了
在别人的blog找到一点思路,我的项目中左上logo并没有渲染出来,二中间的图片就渲染出来了。
对比两者样式
左上logo样式

{width:2.5rem;}

中间卡通图样式

{width:40%;}

(参考html2canvas - 项目中遇到的那些坑点汇总(更新中...))
似乎找到原因了,我页面单位都是用rem做单位的,部分试用百分比,于是我试着讲logo的单位改成33%(设计稿宽度750px,我的html字体大小为 cal(100vw/7.5)),马上能转成canvas了。
由于不想动本来的样式,就在dom转canvas之前将这一页rem单位的css全部转成px单位

    function remToPx(em,unit){
        var temparr = {}
        for(k in unit ){
            temparr[unit[k]] = em.css(unit[k])
        }
        em.css(temparr)
    }

js有点龊,以后再写个可以找到rem单位的脚本哈
总之,这次搞定了。。有时间再去研究下源码,tmd就ios的rem单位不能识别,也真实奇怪了。。

上一篇下一篇

猜你喜欢

热点阅读