小程序Canvas自适应屏幕画海报并保存图片

2024-02-08 15:41:59

小程序的Canvas API是一个强大的工具，可以用来绘制各种图形，包括图像和文本。Canvas API还支持自适应布局，这意味着您的海报可以在不同设备上正确显示。

如何绘制自适应屏幕海报

首先，您需要创建一个新的小程序项目。
在项目的根目录下，创建一个名为index.js的文件。
在index.js文件中，添加以下代码：

const app = getApp()

Page({
  data: {
    screenWidth: 0,
    screenHeight: 0,
    posterUrl: ''
  },

  onLoad() {
    const that = this

    wx.getSystemInfo({
      success: (res) => {
        that.setData({
          screenWidth: res.windowWidth,
          screenHeight: res.windowHeight
        })
      }
    })
  },

  drawPoster() {
    const that = this

    const ctx = wx.createCanvasContext('myCanvas')

    ctx.drawImage('/path/to/image.png', 0, 0, that.data.screenWidth, that.data.screenHeight)

    ctx.setFontSize(20)
    ctx.setFillStyle('white')
    ctx.fillText('Hello World', 10, 100)

    ctx.draw(false, () => {
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
          that.setData({
            posterUrl: res.tempFilePath
          })
        }
      })
    })
  },

  savePoster() {
    const that = this

    wx.saveImageToPhotosAlbum({
      filePath: that.data.posterUrl,
      success: () => {
        wx.showToast({
          title: '保存成功'
        })
      }
    })
  }
})

在index.html文件中，添加以下代码：

<canvas id="myCanvas" width="{{screenWidth}}rpx" height="{{screenHeight}}rpx"></canvas>

<button type="button" bindtap="drawPoster">生成海报</button>
<button type="button" bindtap="savePoster">保存海报</button>