微信小程序实现从手机相册选择图片，绘制到canvas上并保存到手机上

第一步：wxml用canvas标签，并设置唯一id

<canvas canvas-id="myCanvas" style="width:600rpx;height:800rpx;"></canvas>

注意：

1.标签canvas，配合使用的是 canvas-id；
2.要设置绘制区域的大小，可根据需求或者设计图设置宽和高。

第二步：canvas画图，drawCanvas是一个基础绘画，在没从相册选择图片时候进行的展示样式；别忘了在onload（）里面调用一下这个方法。

// canvas画图
  drawCanvas: function() {
    // 先定义一下，获取创建 myCanvas是canvas-id名
    const ctx = wx.createCanvasContext('myCanvas');
    ctx.setStrokeStyle('red')
    ctx.strokeRect(0, 0, 299, 399)
    ctx.setFillStyle('pink')
    ctx.fillRect(1, 1, 297, 397)
    ctx.draw()
  }

未选择图之前的展示

第三步：wx.chooseImage是可以从相册选择图片的方法,"count"是选择图片的个数，这些参数官方文档都有，我就不赘述了，上链接https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

再看，我的wx.chooseImage的success方法里又有一个wx.getImageInfo方法，这个是为了获取图片信息，看注释掉的代码，之前选择的是wx.downloadFile时候，在编辑器上可以，但是真机上就不显示图片，所以后来换了wx.getImageInfo就可以了。

官方文档上是明确说了，如果需要绘制图片，是需要将网络图片下载下来的,所以下述两个方法都可以试试。链接https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html

  myButton: function() {
    let that = this;
    wx.chooseImage({
      count: 1,
      success: function(res) {
        const tempFilePaths = res.tempFilePaths[0]
        that.setData({
          getImg: res.tempFilePaths[0].trim()
        })
        console.log(44444, res)
        wx.getImageInfo({        
          src: that.data.getImg,
          success: function(res) {
            console.log(88888,res)
            that.drawImg(res.path.trim())            
          } 
        })
        // wx.downloadFile({
        //   url: that.data.getImg,
        //   success: function(res) {
        //     if (res.statusCode === 200) {
        //       console.log('图片成功', res)
        //       that.drawImg(res.tempFilePath.trim())
        //     } else {
        //       reject(e);
        //     }
        //   },
        //   fail: function(err) {
        //     console.log(333, err)
        //   }
        // })
        console.log('图片地址', res.tempFilePaths[0])
      },
    })
  }

第四步：将下载后的图片绘制到canvas画布上，如果背景等没有更改，即可以像我写的那样再绘制一次，如果更改，正好可以重新绘制。我画的比较简单，就是一张图片加一个介绍词什么的，你可以用用户的名字。

    const ctx = wx.createCanvasContext('myCanvas');
    ctx.setStrokeStyle('red')
    ctx.strokeRect(0, 0, 299, 399)
    ctx.setFillStyle('pink')
    ctx.fillRect(1, 1, 297, 397)
    ctx.drawImage(url, 2, 2, 296, 296)
    ctx.setFontSize(28)
    ctx.setFillStyle('#FFFFFF')
    // 文字居中 在画布中间居中
    ctx.fillText("您好：" + this.data.name, (300 - ctx.measureText("您好：" + this.data.name).width) / 2, 330);
    // draw参数为false, 本次绘制不接着上一次绘制,默认false
    // draw参数为true, 本次绘制接着上一次绘制
    ctx.draw()
  }

第五步：就是点击然后保存照片到手机上了，wx.canvasToTempFilePath是把当前画布指定区域的内容导出生成指定大小的图片， wx.saveImageToPhotosAlbum是把图片保存到手机相册。看代码

  getImg: function() {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 300,
      height: 400,
      destWidth: 300,
      destHeight: 400,
      canvasId: 'myCanvas',
      success(res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.showToast({
              title: '保存成功啦！',
              icon: 'success'
            })
          }
        })
        console.log(res.tempFilePath)
      }
    })
  }

最后效果图

以上就是所有的步骤，如果需要的话下载链接，下面的drawCanvas文件夹是相关内容。

https://github.com/Yanxinyue0922/miniprogram.git

微信小程序实现从手机选择图片绘制到canvas，并保存到手机