微信小程序生成分享图片，保存到本地

1.页面

"shareCanvas" style="width:600px;height:900px">

2.绘制图片

通过使用wx.downloadFile或wx.getImageInfo这个API来下载一个网络图片到本地（并可获取该图片的尺寸等其他信息），然后调用ctx.drawImage方法将图片绘制到画布上，填满画布

wx.downloadFile({
     url: 'https://nlwxapp.oss-cn-beijing.aliyuncs.com/static/butiful.png',
     success (res) {
         if (res.statusCode === 200) {
             that.bgImgPath = res.tempFilePath// 背景图
         }
     }
})

3.小程序码

通过后台接口获得小程序码，将小程序码下载到本地

4.绘制

circleImg(ctx, img, x, y, r){
                ctx.save();
                var d = 2 * r;
                var cx = x + r;
                var cy = y + r;
                ctx.beginPath();
                ctx.arc(cx, cy, r, 0, 2 * Math.PI);
                // ctx.setStrokeStyle('rgba(0,0,0,0)')
                canvas.stroke()
                ctx.clip();
                ctx.drawImage(img, x, y, d, d);
                ctx.restore()
              },
            showImg() {
                var that = this;
                const ctx = wx.createCanvasContext('myCanvas');
                
                // 设置背景
                ctx.setFillStyle('#E72454')
                ctx.fillRect(0,0,315,393)
                
                // 绘制图片
                ctx.drawImage(that.bgImgPath, 0, 0, 315, 250)
                // 绘制头像
                that.circleImg(ctx,that.headIcon,315/2-50, 20, 50)
                
                
                //创建文字
                ctx.setFontSize(18)
                ctx.setFillStyle('#fff')
                ctx.setTextAlign('center')
                ctx.fillText(that.userInfo.nickName + '邀请你一起分奖金', 315 / 2, 140)
                ctx.stroke()
                
                ctx.setFontSize(42)
                ctx.setFillStyle('#FFD288')
                ctx.textAlign = 'center'
                ctx.fillText(that.message.money, 157, 180)
                
                var a = ctx.measureText(that.message.money).width
                ctx.setFontSize(16)
                ctx.setFillStyle('#FFD288')
                ctx.fillText('元', 157 + 5 + a/2, 180)
                ctx.stroke()
                
                // 绘制小程序码
                ctx.drawImage(that.wxCode, 315/2-75, 200, 150, 150)
                
                context.setFontSize(12)
                context.setFillStyle("#fff")
                context.setTextAlign("center")
                context.fillText("长按识别小程序", 157, 310)
                ctx.stroke()
                //渲染
                ctx.draw()
            
                
            },

5.将canvas沪指的内容转成图片

//需要把canvas转成图片后才能保存
wx.canvasToTempFilePath({ // 生成图片并把绘制的图片路径保存到一个变量
       x: 0,
       y: 0,
       width: 315,
       height: 393,
       destWidth: 1260,  //2倍关系
       destHeight: 1572, //2倍关系
       canvasId: 'myCanvas',
       success: function (res) {
       //关键 赋值给变量
           that.shareImgSrc = res.tempFilePath
           that.saveImg2()
       },
       fail: function (res) {
            console.log(res)
       }
})

6.将图片保存到本地

var that = this
wx.saveImageToPhotosAlbum({ // 这张图片保存到本地相册
     //shareImgSrc为canvas赋值的图片路径
      filePath: that.shareImgSrc,
      success(res) {
            console.log('保存成功');
            wx.showModal({
                 title: '保存成功',
                 content: '图片成功保存到相册了，快去发朋友圈吧~',
                 showCancel: false,
                 confirmText: '确认',
                 confirmColor: '#21e6c1',
                 success: function (res) {
                       if (res.confirm) {
                           console.log('用户点击确定');
                       }
                 }
              })
       }
   })

完整代码

 

 

转载于:https://www.cnblogs.com/wanf/p/10572950.html