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

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>
           

保存到本地 取消