[小程序] Canvas实现海报分享

点击分享按钮，生成海报

按钮调用的方法（http网络图片要使用getImageInfo转为本地路径再画）：

BindShare: function (e) {

    wx.showLoading({
        title: '海报正在生成中......'
    })

    let that = this
    let id = e.currentTarget.id // 文章id

    that.setData({
        iscode: true
    })

    // CANVAS 绘图
    console.log("CANVAS 绘图：生成海报图片" + that.data.poster)

    const ctx = wx.createCanvasContext('share');

    wx.getImageInfo({
        src: that.data.poster, // 服务器返回的图片地址
        success: function (res) {

            console.log("绘制临时海报：" + res.path)
            let path = res.path; 
            ctx.drawImage(path, 0, 0, 450, 700, 0, 0, 360, 560);  //绘制海报图片

            wx.getImageInfo({
                src: that.data.qrcode,
                success(ret){

                    console.log("绘制临时二维码：" + ret.path)
                    let path = ret.path; 
                    ctx.drawImage(path, 270, 470, 80, 80); //绘制二维码

                    ctx.draw(true, function () {
                        // canvas画布转成图片
                        wx.canvasToTempFilePath({
                            x: 0,
                            y: 0,
                            width: 360,
                            height: 570, // 560
                            destWidth: 360,
                            destHeight: 570, // 560
                            canvasId: 'share',
                            success(res) {

                                wx.hideLoading()

                                console.log("画布转成图片：" + res.tempFilePath);
                                that.setData({
                                    sharePic: res.tempFilePath
                                })

                            },
                            fail(res) {
                                console.log(res)
                            }
                        })
                    })
                }, fail(ret){
                    console.log("绘制临时二维码失败：")
                    console.log(ret)
                }
            })
        },fail(res){
            console.log("绘制临时海报失败：")
            console.log(res)
        }
    })
},

点击保存图片

保存图片所调用的方法：

/**
 * 分享到朋友圈 并 保存图片
 */
BindSave: function (e) {
    let that = this

    wx.showLoading({
        title: '图片保存中......'
    })
    console.log("保存海报图片")
    wx.saveImageToPhotosAlbum({
        filePath: that.data.sharePic,
        success (res) {
            wx.hideLoading()
            wx.showToast({
                title: '已保存至相册',
            })
            setTimeout(function () {
                wx.hideLoading()
            }, 1000)
        },fail (res) {
            wx.hideLoading()
            wx.showLoading({
                title: '已取消保存',
            })
            setTimeout(function () {
                wx.hideLoading()
            }, 1000)
        }
    })
},