小程序canvas使用，及一些坑，以及自己的一些小总结

Posted 2021-01-07 naturl

自己做了一个小程序，主要用于给头像加图标的那种，和qq似的，主要用canvas做的， 第一回用，掉了很多坑，所以今天系统的总结一下自己所做的，如果大家有不理解的地方，欢迎提问

canvas可以用来画一些东西，前台生成一些海报什么的，可以保存base64图片(待定，因为图片转base64，有点模糊)，

canvas中介绍的各种方法有很多参数，不理解的话请自行到小程序开发文档查看

我合成的方法是，第一步：获取系统信息，第二步：画背景，第三步：在这个背景上画另外一张图片，进行合成，然后转base64图片，传给后台

##你在画布，想把一张图片画上去，只要是网络图片，就一定要download file下来，使用临时路径，因为我就踩了这个大坑，直接使用网络图片，会有真机不显示的问题

第一步：获取系统信息：

1：//获取系统信息。手机型号，设备像素比，屏幕宽高，可使用窗口宽高，微信app的信息
getSystemInfo: function () {
    var t = this;
    wx.getSystemInfo({
      success: function (a) {
        //screenWidth,screenHeight屏幕宽高
        var i = a.screenWidth / 375;
        t.setData({
          screenWidth: i,
          canvasWidth: a.screenWidth / 375 * 250,
          canvasHeight: a.screenWidth / 375 * 250
        }), e.globalData.platform = a.platform;
      }
    })
  },

第二步：绘制背景

//需要获取canvas，和h5一样
 const ctx = wx.createCanvasContext(‘myCanvas‘)
 draw: function (path) {
    console.log(path)
    var that = this
    //背景图片路径
    var path = path
    //画布宽度    //画布高度
    var canvasWidth = that.data.canvasWidth
    var canvasHeight = that.data.canvasHeight
    //getImageInfo()获取图片信息,倘若为网络图片，需先配置download域名才能生效。
    wx.getImageInfo({
      src: path,
      success: function (res) {
      	//drawImage()绘制图像到画布。
      	//res.path所要绘制的图片资源
      	//0,0,是你要在画布的哪个位置开始画
      	//canvasWidth, canvasHeight你需要在画布上绘制多大的背景图，允许缩放
        ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)
        //画完第一层背景之后，调用合成图标的方法
        that.headicon()
      },
      fail: function (res) {
        console.log(res);
      }
    })
  },

第三步：画好背景，合成图标，图片做好后，我利用canvasGetImageData()方法，把画布内容保存成base64的图片，如果有想用此方法的需要三个文件，我把它放在网盘，大家可以下载

链接：https://pan.baidu.com/s/1bHXpAGDdPkmQpgLt49wUGQ 密码：6riy

const base64 = require(‘../../utils/base64.js‘)

const upng = require(‘../../utils/UPNG.js‘)

headicon: function () {
    var that = this
    //图标路径
    var qrcodeUrl = this.data.qrcodeUrl;
    //画布宽度    //画布高度
    var canvasWidth = this.data.canvasWidth
    var canvasHeight = this.data.canvasHeight
    // 你需要把图标绘制到哪个位置（起点位置）
    var x = canvasWidth - 80
    var y = canvasHeight - 80
    wx.getImageInfo({
      src: qrcodeUrl,
      success: function (res) {
        ctx.drawImage(qrcodeUrl, x, y, 80, 80)
        //保存当前画的状态
        ctx.save();
        //恢复当前画的状态
        ctx.restore();
        ctx.draw(false, () => {
          // 2. 获取图像数据。canvasGetImageData()在ctx.draw()里使用在有效
          wx.canvasGetImageData({
          	// 你需要获取那张画布的数据，获取多大范围的数据
            canvasId: "myCanvas",
            x: 0,
            y: 0,
            width: canvasWidth,
            height: canvasHeight,
            success:res=> {
              // 3. png编码
              let pngData = upng.encode([res.data.buffer], res.width, res.height)
              // 4. base64编码，转成base64图片，就可以发送给后台保存了
              let base64 = wx.arrayBufferToBase64(pngData)
              that.setData({
                generatePictures: base64
              })
            }
          })
        })
      },
      fail: function (res) {
        console.log(res);
      }
    })
  },