Taro微信小程序绘制分享图片放弃wxmlToCanvas，手动打造个性化分享体验

2024-02-03 11:33:12

技术博客示例：在 Taro 微信小程序中手动绘制分享图片，放弃 wxmlToCanvas

引言

在当今竞争激烈的移动应用市场中，吸引用户参与和传播应用程序至关重要。微信小程序提供了一种强大的机制，通过自定义分享图片来实现这一目标。然而，对于希望灵活控制分享图片外观的开发人员来说，利用 wxmlToCanvas 将界面生成为 canvas 的传统方法可能存在局限性。本文将探索一种替代方案：手动绘制分享图片 。

放弃 wxmlToCanvas

wxmlToCanvas 是一个将 WXML 界面转换为 canvas 的有效工具。然而，这种方法存在一些固有的限制：

不可预测的结果： 生成的 canvas 的质量和准确性可能因界面复杂性而异。
有限的自定义： 难以完全控制生成的 canvas 的外观和内容。
性能开销： 在复杂界面上使用 wxmlToCanvas 可能需要大量计算资源，导致应用程序卡顿。

手动绘制分享图片

为了克服这些限制，我们可以采用手动绘制分享图片的方法。这种方法为开发人员提供了对生成图像的完全控制 ，同时还消除了性能开销 。

绘制流程

使用 Taro 绘制分享图片涉及以下步骤：

创建 canvas 对象： 创建 Taro.createCanvasContext 对象，代表要绘制的 canvas。
设置画布大小： 将 canvas 的尺寸设置为所需的分享图片大小。
绘制背景： 使用 fillRect() 方法填充 canvas 的背景。
绘制元素： 使用各种方法（如 fillRect()、strokeText() 和 drawImage()）逐个绘制分享图片中的元素。
导出图片： 使用 canvasToTempFilePath() 方法将 canvas 导出为临时文件。

示例代码

import Taro from '@tarojs/taro'

export function drawShareImage() {
  const ctx = Taro.createCanvasContext('shareCanvas')
  // 设置画布大小
  ctx.canvas.width = 300
  ctx.canvas.height = 200
  // 填充背景
  ctx.setFillStyle('#ffffff')
  ctx.fillRect(0, 0, 300, 200)
  // 绘制标题
  ctx.setFontSize(24)
  ctx.setFillStyle('#333333')
  ctx.fillText('分享标题', 20, 50)
  // 绘制
  ctx.setFontSize(16)
  ctx.setFillStyle('#999999')
  ctx.fillText('分享', 20, 80)
  // 绘制图片
  ctx.drawImage('/path/to/image.png', 20, 120, 100, 100)
  // 导出图片
  ctx.canvasToTempFilePath({
    success: res => {
      console.log(res.tempFilePath)
    }
  })
}