使用canvas绘制小程序码

场景：使用小程序文档的API可以获取带参数的二维码和小程序码，但是小程序码中的图片默认都是小程序的头像（红框中的图片）。现在我们需要替换里面的图片，然后将小程序码保存成一张图片存入相册。

1.获取带参数的小程序码

小程序开发文档提供三种接口获取带参数的小程序码，根据自己的需求选择相应的接口。

https://developers.weixin.qq.com/miniprogram/dev/api/qrcode.html

2.将网络图片路径转换为本地图片路径。

使用wx.getImageInfo或者wx.downloadFile可以返回图片的本地路径。
用wx.setStorage将返回的本地路径存储在本地缓存中并指定key的值：path1，path2。
用wx.getStorageSync(KEY)从本地缓存中同步获取指定的key对应的内容。

备注：url1为第一步获取到的带参数的小程序码。url2为需要填入小程序码中间的图片。

const url1 = "https://images/ewm.jpg";
const url2 = "https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83epNAxDh5I0dQAQrNVs4pKWrYibfbA6Xw6lOJqqYic4qTFXt9tjbTJrgpusYy4KCEXnF3iaib8sdqP6CfQ/132";
wx.getImageInfo({
     src: url1,
     success:function(res){
         wx.setStorage({
             key: 'path1',
             data: res.path,
          })
     }
})
wx.getImageInfo({
     src: url2,
     success:function(res){
         wx.setStorage({
             key: 'path2',
             data: res.path,
          })
     }
})
const path1 = wx.getStorageSync('path1');
const path2 = wx.getStorageSync('path2');

3.根据设备宽度设置canvas的width和height。

在WXML中设置canvas组件，并在JS文件中设置data字段width，height，margin。
获取设备的宽度，并保存在全局变量windowWidth中。
在小程序码生成页面读取全局变量windowWidth，并根据设备的宽度设置canvas的width，height，margin。

<canvas style='width:{{width}}px;height:{{height}}px;margin:50px {{margin}}px;background-color:#ffffff;' canvas-id='ewmCanvas'></canvas>

 // 获取设备宽度
wx.getSystemInfo({
    success: function (res) {
       app.globalData.windowWidth = res.windowWidth;
    },
})

//在对应页面读取设备的宽度 
const width = app.globalData.windowWidth*4/5;
const height = app.globalData.windowWidth;
const margin = app.globalData.windowWidth / 10;
//在data中设置canvas的width和height以及左右的边距margin
this.setData({
      width:width,
      height: height,
      margin: margin
})

4.使用canvas绘制小程序码。

根据canvasId创建canvas绘图。
根据path1绘制原始的小程序码图片。
绘制底部文字说明。
通过ctx.save()保存当前的绘图上下文。
绘制一个圆形，使它能够完全覆盖掉原始小程序码中间的图片区域。
通过ctx.clip()方法将画布中的圆形裁剪出来。
在裁剪的圆形区域绘制一个相同大小的图片（path2），此时图片只能显示剪切后的圆形区域。
ctx.restore()恢复之前保存的绘图上下文。
绘制图片和文字。ctx.stroke()，ctx.draw()。

const ctx = wx.createCanvasContext('ewmCanvas')
ctx.drawImage(path1, 0, 0, this.data.width, this.data.width);
ctx.setTextAlign('center')    
ctx.setFillStyle('#8c8c8c')  
ctx.setFontSize(15)    
ctx.fillText('扫一扫小程序码', this.data.width / 2, this.data.width + 30)
ctx.save();
ctx.strokeStyle = "#ffffff";
ctx.arc(this.data.width / 2, this.data.width / 2, this.data.width * 9 / 40, 0, 2 * Math.PI);  //绘制圆形
ctx.clip();
ctx.drawImage(path2, this.data.width * 11 / 40, this.data.width * 11 / 40, this.data.width * 9 / 20, this.data.width * 9 / 20);
ctx.stroke();
ctx.restore();
ctx.draw();

5.将canvas保存至相册。

创建一个点击事件saveImg。
调用wx.canvasToTempFilePath将canvas存储在本地，big返回一个本地路径。
调用wx.saveImageToPhotoAlbum将返回的本地路径保存至相册。
调用wx.showToast创建保存成功与失败时的消息提示框。

备注：当用户关闭了相册权限时就会调用失败，此时可在小程序的设置中打开权限。

saveImg:function(e){
  wx.canvasToTempFilePath({
    canvasId: 'ewmCanvas',
    success: function (res) {
      const path = res.tempFilePath;
      wx.saveImageToPhotosAlbum({
        filePath: path,
        success: function (res) {
          wx.showToast({
            title: '保存成功',
            icon:'success'
          })
        },
        fail: function (res) {
          wx.showToast({
            title: '保存失败，请在小程序中打开相册权限',
            icon: 'none'
          })
        }
     })
    }
  }, this)
}

来源：https://www.cnblogs.com/kxx-21k/p/9244454.html

标签

canvas

小程序

data