uniapp canvas如何生成图片

在uniapp中如何使用canvas生成图片？我已经尝试了canvas的绘图功能，但不知道如何将绘制的内容保存为图片文件。希望能提供一个完整的示例代码，包括canvas的初始化、绘图操作以及最终生成图片的步骤。另外，生成的图片如何保存到本地或显示在页面上？请说明具体实现方法。

2 回复

使用uni.canvasToTempFilePath将canvas转为临时图片路径。示例代码：

uni.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success(res) {
    console.log(res.tempFilePath) // 图片临时路径
  }
})

注意：需在canvas绘制完成后调用。


在 UniApp 中，使用 Canvas 生成图片可以通过以下步骤实现：

  1. 创建 Canvas 上下文：使用 uni.createCanvasContext 创建 Canvas 绘图上下文。
  2. 绘制内容：通过上下文方法（如 drawImage、fillText）绘制图形或文本。
  3. 生成图片：使用 canvasToTempFilePath 将 Canvas 内容导出为临时图片文件路径。
  4. 保存或预览：可通过 uni.saveImageToPhotosAlbum 保存到相册，或直接使用图片路径显示。

示例代码：

// 在 template 中定义 Canvas
<canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas>
<button @tap="generateImage">生成图片</button>

// 在 script 中
export default {
  methods: {
    generateImage() {
      const ctx = uni.createCanvasContext('myCanvas', this); // 创建上下文
      
      // 绘制内容（示例：矩形和文本）
      ctx.setFillStyle('#4CD964');
      ctx.fillRect(0, 0, 300, 200);
      ctx.setFontSize(20);
      ctx.setFillStyle('#FFFFFF');
      ctx.fillText('Hello Canvas', 50, 50);
      
      // 绘制完成
      ctx.draw(false, () => {
        // 生成图片
        uni.canvasToTempFilePath({
          canvasId: 'myCanvas',
          success: (res) => {
            console.log('图片路径:', res.tempFilePath);
            // 可保存到相册或显示预览
            uni.previewImage({
              urls: [res.tempFilePath]
            });
          },
          fail: (err) => {
            console.error('生成失败:', err);
          }
        }, this);
      });
    }
  }
};

注意事项：

  • 平台差异：部分小程序平台（如微信）需在 draw 回调中调用 canvasToTempFilePath。
  • 权限：保存到相册需用户授权，可使用 uni.authorize 提前请求。
  • 路径使用：临时路径仅在本次应用运行期间有效，如需持久化需上传或保存。

通过以上步骤，即可在 UniApp 中实现 Canvas 生成图片功能。

回到顶部