微信小程序绘制海报 并保存到本地

js
绘制海报 并生成图片

drawPosterOne: function() {
// this.getBackground()
var ths = this
let app = getApp()
var ctx = wx.createCanvasContext(‘mycanvas’)
//绘制背景图片
ctx.drawImage(this.data.background, 0, 0, 300, 500)
ctx.restore()
var avatarurl_width = 30 // 绘制的头像宽度
var avatarurl_heigth = 30 // 绘制的头像高度
var avatarurl_x = 25 // 绘制的头像在画布上的位置
var avatarurl_y = 8 // 绘制的头像在画布上的位置
ctx.save()
ctx.beginPath() // 开始绘制
ctx.setFillStyle(‘red’)
// 先画个圆 前两个参数确定了圆心 （x,y） 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false，即顺时针
ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false)
ctx.clip() // 画好了圆 剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
ctx.drawImage(this.data.avatar, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth) // 推进去图片，必须是https图片
ctx.restore()
ctx.setFontSize(14)
ctx.setFillStyle(’#fff’)
ctx.textAlign = ‘left’
ctx.fillText(‘和’ + “${this.data.name1}” 一起共享品质生活, 70, 30)
ctx.restore()
//绘制邀请码
ctx.setFontSize(14)
ctx.setFillStyle(’#fff’)
ctx.textAlign = ‘left’
ctx.fillText(邀请码 ${wx.getStorageSync('inviteCode')}, 90, 122)
ctx.setFillStyle(’#000’)
ctx.restore()
//绘制二维码
ctx.drawImage(this.data.QRcode, 107, 354, 85, 85)
ctx.restore()
ctx.draw(false, () => {
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: ‘mycanvas’,
success: function(res) {
wx.hideToast()
console.log(‘画布’,res)
ths.setData({
imagePath: res.tempFilePath,
});

                },
                fail: function(res) {
                    console.log(res);
                }
            });
        }, 0)
      })
      
},
图片保存到相册
 baocun: function() {
    var that = this
    wx.saveImageToPhotosAlbum({
        filePath: that.data.imagePath,
        success(res) {
            wx.showModal({
                content: '图片已保存到相册，赶紧晒一下吧~',
                showCancel: false,
                confirmText: '好的',
                confirmColor: '#333',
                success: function(res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                        /* 该隐藏的隐藏 */
                        that.setData({
                            posterShow: false
                        })
                    }
                },
                fail: function(res) {
                    console.log(11111)
                }
            })
        }
    })
},

html

<image src="{{imagePath}}" style="width: 300px; height: 500px; margin: 0 auto; display: block;"></image>

保存到本地 取消