最近项目用到生成海报的功能，踩了大坑，现在整理出个笔记。
使用html2canvas生成图片，注意1.0.0-rc.5版本在微信里打开无效，可适当降级，我用的是1.0.0-rc.1。
安装html2canvas
npm i html2canvas@1.0.0-rc.1 --save
由于H5不支持点击下载保存到相册，我想了另一个办法，在页面外面写一个img标签，点击生成图片之后，img可见，此时就可以使用微信的长按图片保存了。
html部分
<div class="bgc-white por" id="shareImg">
<img id="exportedImage" :src="exportImgUrl" width="100%" crossOrigin="anonymous">
<img src="@/assets/share.png" alt="" crossOrigin="anonymous" class="db" width="100%">
<div class="flex py-10 px-10">
<div class="flex-1">
<div>长按识别图中小程序</div>
</div>
<div class="w-8em tac">
<img :src="qrcodeUrl" alt="" crossOrigin="anonymous" width="100" class="db mx-auto">
</div>
</div>
</div>
JS部分
let shareDom = document.querySelector('#shareImg')
html2canvas(shareDom, {
scale: window.devicePixelRatio, //提高清晰度 }).then( canvas =>{
var url = canvas.toDataURL();
this.exportImgUrl = url;
}).catch(()=>{
this.$toast('生成图片失败')
}).finally(()=>{
this.showLoading = false
})
