html2canvas在vue下的巨坑

公司有個需求就是要在前端生成圖片首先想到的是用canvas生成圖片，本身畫這也太耗時間了吧！後面在npm上一查有個html2canvas的框架能夠用這裏附上地址
html2canvas
使用起來也特別簡單，官網是這麼描述的

html
<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

js
html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

html2canvas(document.querySelector("#capture")  {
    async: true
}).then(canvas => {
    document.body.appendChild(canvas)
});

若是你要配置一些參數能夠在傳入dom的後面進行 object 傳參 官網文檔可查
官網文檔
我本身的工程環境是vue-cli會進行webpack打包在ios下運行的時候會出現錯誤由於我要生成一張圖片是的canvas api 是 toDataURL
這錯誤在ios一直顯示是權限問題 在ios 和safari 上的問題是一致的 緣由是canva繪製dom上的圖片的時候是 base64的格式（webpack會對asstes目錄下的圖片進行壓縮）花費了幾個小時才解決這個問題，感受很不值因此分享給你們但願你們別踩進去了！解決方法是能夠 static目錄或者同域下的文件地址