h5保存海报图片

最近项目用到生成海报的功能，踩了大坑，现在整理出个笔记。

使用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
})