在做一个年度账单的项目,要求最后一页输出成一张图片,然后在微信中就可以长按下载。
按着网上的教程,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单位不能识别,也真实奇怪了。。