微信小程序 canvas教程 - 2

将图片绘制到canvas上

一、CanvasContext.drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

绘制图像到画布

• imageResource: 所要绘制的图片资源
• sx: 源图像的矩形选择框的左上角 x 坐标
• sy: 源图像的矩形选择框的左上角 y 坐标
• sWidth: 源图像的矩形选择框的宽度
• sHeight: 源图像的矩形选择框的高度
• dx: 图像的左上角在目标 canvas 上 x 轴的位置
• dy: 图像的左上角在目标 canvas 上 y 轴的位置
• dWidth: 在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放
• dHeight: 在目标画布上绘制图像的高度，允许对绘制的图像进行缩放

有三种写法

• drawImage(imageResource, dx, dy)
• drawImage(imageResource, dx, dy, dWidth, dHeight)
• drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)从 1.9.0 起支持

1、绘制一张网络图片

    let ctx = wx.createCanvasContext('canvas-demo')
    // 绘制一张网络图片
    wx.showLoading({
      title: '图片资源加载中',
    })
    wx.getImageInfo({
      src: 'http://dik.img.kttpdq.com/pic/43/30016/b730794eb0343dcc.jpg',
      success(res){
        ctx.drawImage(res.path, 0, 0, 340, 190)
        ctx.draw()
        wx.hideLoading()
      },
      fail(err){
        console.log(err)
      }
    })

2、绘制一张本地图片

    let ctx = wx.createCanvasContext('canvas-demo')
    // 绘制一张本地图片
    ctx.drawImage('/static/img/logo.jpg', 0, 0,)
    ctx.draw()

微信小程序CanvasContext.drawImage

二、将canvas保存到本地相册

    let _that = this
    // canvas保存为临时文件，类型为jpg
    wx.canvasToTempFilePath({
      canvasId: 'canvas-demo',
      fileType: 'jpg',
      success(img) {
        // 将canvas的临时文件保存到相册
        wx.saveImageToPhotosAlbum({
          filePath: img.tempFilePath,
          fileType: 'jpg',
          success() {
            wx.showToast({
              title: '图片保存成功',
              icon: 'success'
            })
          },
          fail(err) {
            if (err.errMsg == 'saveImageToPhotosAlbum:fail cancel') {
              console.log('取消')
              wx.showToast({
                title: '取消保存',
                icon: 'none'
              })
            } else if (err.errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
              console.log('未授权')
              wx.showToast({
                title: '未授权',
                icon: 'none'
              })
            }
          }
        })
      }
    })

三、打开授权

如果用户拒绝了授权，则无法保存图片到本地。需要给用户打开授权