在做一個(gè)年度賬單的項(xiàng)目，要求最后一頁輸出成一張圖片，然后在微信中就可以長按下載。

最后一頁效果圖

按著網(wǎng)上的教程，html2canvas可以直接把dom元素轉(zhuǎn)換成canvas
PC和安卓手機(jī)都可以轉(zhuǎn)換，但是IOS部分dom元素和字體沒有渲染出來，只有百度查原因了
在別人的blog找到一點(diǎn)思路，我的項(xiàng)目中左上logo并沒有渲染出來，二中間的圖片就渲染出來了。
對(duì)比兩者樣式
左上logo樣式

{width:2.5rem;}

中間卡通圖樣式

{width:40%;}

(參考html2canvas - 項(xiàng)目中遇到的那些坑點(diǎn)匯總(更新中...))
似乎找到原因了，我頁面單位都是用rem做單位的，部分試用百分比，于是我試著講logo的單位改成33%（設(shè)計(jì)稿寬度750px，我的html字體大小為 cal(100vw/7.5)），馬上能轉(zhuǎn)成canvas了。
由于不想動(dòng)本來的樣式，就在dom轉(zhuǎn)canvas之前將這一頁rem單位的css全部轉(zhuǎn)成px單位

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

js有點(diǎn)齪，以后再寫個(gè)可以找到rem單位的腳本哈
總之，這次搞定了。。有時(shí)間再去研究下源碼，tmd就ios的rem單位不能識(shí)別，也真實(shí)奇怪了。。