微信小程序canvas生成并保存图片

微信小程序提供了一种非常方便的方式来绘制图片：使用canvas。本文将介绍如何在小程序中使用canvas来生成并保存图片。

准备工作

在编写代码之前，我们需要在小程序根目录下新建一个canvas文件夹，用于存放绘制图片所需的资源，包括图像，字体等等。

绘制图片

在小程序中使用canvas绘制图片需要经过以下步骤：

1. 创建canvas组件并指定宽高和canvas-id属性。

<canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>

1. 在小程序中定义一个绘图上下文，使用wx.createCanvasContext(canvasId)方法获取绘图上下文对象。

const ctx = wx.createCanvasContext('myCanvas')

1. 绘制图形或文字。在本例中，我们将绘制一张图片和一段文字。

// 绘制图片
ctx.drawImage('/canvas/logo.png', 0, 0, 300, 300)

// 绘制文本
ctx.setFontSize(16) // 设置字体大小
ctx.fillText('欢迎使用微信小程序canvas！', 20, 20)

1. 最后，执行绘图操作，使用ctx.draw()方法将图形绘制到canvas组件中。

ctx.draw()

在代码中执行以上步骤后，即可在小程序中绘制出一张包含图片和文字的图片。

保存图片

使用canvas生成的图片需要保存到本地才能使用。在小程序中，我们可以使用wx.canvasToTempFilePath()方法来生成临时文件路径，并且可以将该路径保存到相册。

wx.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success(res) {
    wx.saveImageToPhotosAlbum({
      filePath: res.tempFilePath,
      success() {
        wx.showToast({
          title: '保存成功！'
        })
      },
      fail() {
        wx.showToast({
          title: '保存失败！',
          icon: 'none'
        })
      }
    })
  },
  fail() {
    wx.showToast({
      title: '生成图片失败！',
      icon: 'none'
    })
  }
})

在上述代码中，我们使用wx.canvasToTempFilePath()方法生成临时文件路径，然后使用wx.saveImageToPhotosAlbum()方法将图片保存到相册中。其中，success和fail回调函数用于处理保存成功和失败的情况。

实战演练

在canvas文件夹中，新建一张名为logo.png的图片，用于绘制图片。在app.js文件中编写绘制图片和保存图片的代码如下：

Page({
  onSaveImage() {
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.drawImage('/canvas/logo.png', 0, 0, 300, 300)
    ctx.setFontSize(16)
    ctx.fillText('欢迎使用微信小程序canvas！', 20, 20)
    ctx.draw(false, () => {
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success(res) {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success() {
              wx.showToast({
                title: '保存成功！'
              })
            },
            fail() {
              wx.showToast({
                title: '保存失败！',
                icon: 'none'
              })
            }
          })
        },
        fail() {
          wx.showToast({
            title: '生成图片失败！',
            icon: 'none'
          })
        }
      })
    })
  }
})

在wxml文件中使用button标签调用onSaveImage方法：

<button bindtap="onSaveImage">生成并保存图片</button>
<canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>

运行该小程序，点击按钮，即可成功生成并保存图片。

总结

本文介绍了在微信小程序中使用canvas绘制图片并保存到本地相册的方法。通过本文的学习，你可以轻松地实现小程序中基于canvas的图像生成和保存功能。