uniapp微信小程序如何使用canvas生成图片？

在uniapp开发的微信小程序中，如何使用canvas生成图片并保存到本地？我尝试了canvas的draw方法，但生成的图片总是空白或者无法保存。具体需要哪些API和步骤？是否需要特殊权限配置？求完整示例代码和注意事项。

2 回复

使用uniapp的canvas生成图片步骤：

  1. 创建canvas组件并设置ref
  2. 使用uni.createCanvasContext创建绘图上下文
  3. 调用绘图API绘制内容
  4. 使用canvasToTempFilePath生成图片临时路径
  5. 通过uni.saveImageToPhotosAlbum保存到相册

注意：需在真机调试，部分API需用户授权。


在 UniApp 中使用 Canvas 生成图片，主要涉及创建 Canvas 上下文、绘制内容，然后导出为图片。以下是步骤和示例代码：

步骤说明

  1. 创建 Canvas 上下文：使用 uni.createCanvasContext 创建 Canvas 上下文对象。
  2. 绘制内容：使用 Canvas API（如 fillRect、drawImage 等）绘制图形、文本或图像。
  3. 导出图片：通过 canvasToTempFilePath 将 Canvas 内容导出为临时图片文件路径。
  4. 保存或使用图片：可将图片保存到相册或用于显示。

示例代码

在 Vue 文件中实现：

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas>
    <button @tap="generateImage">生成图片</button>
    <image :src="imagePath" v-if="imagePath" style="width: 300px; height: 200px;"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imagePath: ''
    };
  },
  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', 80, 100); // 绘制文本
      
      // 绘制完成
      ctx.draw(false, () => { // 延迟绘制确保内容渲染
        uni.canvasToTempFilePath({
          canvasId: 'myCanvas',
          success: (res) => {
            this.imagePath = res.tempFilePath; // 获取临时图片路径
            // 可选：保存到相册
            // uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath });
          },
          fail: (err) => {
            console.error('导出失败:', err);
          }
        }, this);
      });
    }
  }
};
</script>

注意事项

  • 平台差异：微信小程序中 Canvas 是原生组件，层级最高，可能覆盖其他元素。建议使用 cover-view 处理覆盖问题。
  • 性能优化：复杂绘制可能影响性能，避免频繁重绘。
  • 权限问题：保存到相册需用户授权，可调用 uni.authorize 提前请求 scope.writePhotosAlbum 权限。

通过以上步骤，即可在 UniApp 微信小程序中生成 Canvas 图片。如有复杂需求（如绘制网络图片），需先下载图片到本地再使用 drawImage。

回到顶部