微信h5页面生成带头像和二维码的海报，分享图片

思路

先将海报图的样式写出来，
再通过html2canvas将html元素转化为图片，
最后将图片显示在元素的最高一层，隐藏起来，提示用户长按保存图片。
看到微信并没有提供下载图片的接口，就想到长按保存图片啦。

代码

npm install html2canvas // 安装

import html2canvas from 'html2canvas'``` // 引入html2canvas

// 应用
html2canvas(document.getElementById('poster')).then(function(canvas) {
    let imgUri = canvas.toDataURL("image/png")
    document.getElementById('o-img').src = imgUri
    document.getElementById('o-img').style.display = 'block'
    // window.location.href= imgUri
})

or

<script type="text/javascript" src="html2canvas.js"></script> 


html2canvas(document.getElementById('poster'),{
    onrendered: function(canvas) {//得到了canvas对象
        var imgUrl = canvas.toDataURL("image/png");//这里通过canvas的toDataURL方法把它转换成base64编码。
    }
}

想着这样应该可以实现了吧，可是没想到微信头像存在图片跨域问题。。。后来在网上看到一篇比较好的博客，上面说通过将图片转换成base64来解决图片跨域问题，结果真的成功啦。happy~~
代码如下：

getBase64Image(img) {
        let canvas = document.createElement("canvas")
        canvas.width = img.width
        canvas.height = img.height
        let ctx = canvas.getContext("2d")
        ctx.drawImage(img, 0, 0, img.width, img.height)
        document.getElementById('avatar-box').appendChild(canvas)
        return canvas
    }

main(src, cb) {
        let image = new Image()
        image.crossOrigin = "anonymous"  // 支持跨域图片，先设置图片跨域属性，再赋值
        image.src = `${src}?v=${Math.random()}`// 处理缓存
        image.onload = () => {
            let base64 = this.getBase64Image(image)
            cb && cb(base64)
        }
    }

getPoster() {
        const hiddenImg = document.getElementById('o-img')
        this.main(this.state.headimgurl, function(canvas){
            html2canvas(document.getElementById('poster')).then(function(canvas) {
                let imgUri = canvas.toDataURL("image/png")
                hiddenImg.src = imgUri
                hiddenImg.style.display = 'block'
            })
        })
    }