html2canvas在vue下的巨坑

2019年8月22日 697次阅读 来源: 前端技术小哥

公司有个需求就是要在前端天生图片起首想到的是用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在vue下的巨坑》

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目次或许同域下的文件地点

    原文作者：前端技术小哥
    原文地址: https://segmentfault.com/a/1190000016235840
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞