美文网首页html2canvas踩坑
html2canvas踩坑(iso用rem单位无法转换canva

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

作者: 捞兴 | 来源:发表于2019-01-07 10:38 被阅读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单位不能识别,也真实奇怪了。。

    相关文章

      网友评论

        本文标题:html2canvas踩坑(iso用rem单位无法转换canva

        本文链接:https://www.haomeiwen.com/subject/lctukqtx.html