瓦尔登湖

功能需求用户自主生成专属海报

微信小程序使用canvas绘图

创建画布：

<canvas class="cavans-box" style="width:{{canvasWidth}}rpx; height:{{canvasHeight}}rpx;" canvas-id="myCanvas"/>
<view class="download-btn" bindtap="savePhoto">保存海报</view>

默认参数：

data: {
    canvasWidth:'',
    canvasHeight:'',
    img:app.config.share_poster, // 海报背景的路径
    codeImg:'',
},

在onload生命周期调用：

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
    // 渲染海报
    this.drawPhoto();
},

生成海报：

// 绘制图片
drawPhoto: function() {
    let that = this
    // 提示用户正在合成，否则用户可能有不当操作或者以为手机卡死
    wx.showLoading({
        title: '图片加载中',
    })

    // 从本地存储获取用户信息
    var userInfo = wx.getStorageSync('userInfo')
    // 获取二维码接口
    var url = app.url + app.apiRoute('getWxCode');
    var inviterCode = wx.getStorageSync('inviterCode')

    utils.tokenRequest(url, "POST", {
        // 二维码生成访问的路径
        path: '/pages/home/xxx/xxx?inviter_id=' + inviter_id,
        width: '280'
    },
    '',
    function(res) {
        if (res.data.code == 200) {
            // 获取后端返回的二维码图片
            // 需要下载图片，因为画布不能直接绘制网络图片
            var codeImg = res.data.data.img_url wx.downloadFile({
                url: that.data.img,
                // 绘制的第一张图片的下载路径
                success(res) {
                    // 创建画布对象
                    const ctx = wx.createCanvasContext("myCanvas", that)
                    // 获取图片信息，要按照原图来绘制，否则图片会变形
                    wx.getImageInfo({
                        src: that.data.img,
                        success: function(res) {
                            // 根据 图片的大小 绘制底图 的大小
                            let imgW = res.width let imgH = res.height let imgPath = res.path that.setData({
                                canvasHeight: imgH,
                                canvasWidth: imgW
                            })
                            // 绘制第二张图片 二维码
                            ctx.drawImage(imgPath, 0, 0, imgW / 2, imgH / 2) wx.getImageInfo({
                                src: codeImg,
                                // 二维码的路径
                                success: function(res) {
                                    // 绘制二维码，左上角距离x轴10，左上角距离y轴400，
                                    // 绘制二维码的尺寸
                                    ctx.drawImage(res.path, 10, 400, res.width / 3 + 20, res.height / 3 + 20)
                                    // 绘制海报内其他信息
                                    ctx.setFontSize(14) ctx.fillText(userInfo.nickName, 135, 455) ctx.draw() wx.hideLoading()
                                },
                            })
                        }
                    })
                }
            })
        } else {
            wx.hideLoading() wx.showLoading({
                title: '生成海报失败',
                success: (res) = >{
                    setTimeout(() = >{
                        wx.reLaunch({
                            url: '/pages/xxx/xxx',
                        })
                    },
                    2000)
                },
            })
        }
    })
},

点击保存海报：

// 保存图片
savePhoto() {
    // 这里用了延时截屏，防止图片没加载完成，截图出现白屏的现象
    setTimeout(() = >{
        wx.canvasToTempFilePath({
            // 生成图片参数
            width: '312',
            height: '550',
            fileType: 'jpg',
            canvasId: 'myCanvas',
            success: function(res) {
                var tempFilePath = res.tempFilePath
                // 保存到相册
                wx.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success(res) {
                        wx.showModal({
                            title: '温馨提示',
                            content: '图片保存成功，可在相册中查看',
                            showCancel: false
                        })
                    },
                    fail(res) {
                        wx.hideLoading() wx.showModal({
                            title: '温馨提示',
                            content: '图片保存失败，请重试',
                            showCancel: false
                        })
                    }
                }) console.log("生成的图片", tempFilePath)
            },
            fail: function(res) {
                console.log("生成的图片 失败 fail fail fail ", res)
            }
        })
    },
    1500)
}