uni-app 插件需求 把图片处理成规则图形

在处理图片并将其转换为规则图形（如圆形、方形等）的需求中，uni-app 提供了一系列 API 和 Canvas 组件，可以方便地实现这一功能。以下是一个使用 Canvas 组件将图片裁剪为圆形的示例代码。

首先，确保你的项目中已经安装了 uni-app 并配置好了开发环境。

1. 页面结构（index.vue）

<template>
  <view class="container">
    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
    <image :src="circleImageSrc" style="width: 300px; height: 300px; margin-top: 20px;"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      circleImageSrc: '', // 圆形图片的路径
    };
  },
  mounted() {
    this.drawImageToCanvas();
  },
  methods: {
    async drawImageToCanvas() {
      const ctx = uni.createCanvasContext('myCanvas');
      const imgPath = '/static/images/example.jpg'; // 替换为你的图片路径

      // 先绘制原始图片到 canvas 上（不可见，仅用于获取图片信息）
      uni.getImageInfo({
        src: imgPath,
        success: (res) => {
          const { width, height } = res;
          const radius = Math.min(width, height) / 2;

          // 清空画布
          ctx.clearRect(0, 0, 300, 300);

          // 开始绘制路径，设置圆形裁剪区域
          ctx.beginPath();
          ctx.arc(150, 150, radius, 0, 2 * Math.PI);
          ctx.clip();

          // 绘制图片到裁剪区域
          ctx.drawImage(imgPath, 150 - radius, 150 - radius, width, height);
          ctx.draw(false, () => {
            // 将 canvas 转换为图片路径
            uni.canvasToTempFilePath({
              canvasId: 'myCanvas',
              success: (result) => {
                this.circleImageSrc = result.tempFilePath;
              },
            });
          });
        },
      });
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

2. 说明

• Canvas 组件：用于绘制图形和处理图像。
• uni.createCanvasContext：获取 Canvas 上下文。
• uni.getImageInfo：获取图片信息，以便确定图片的尺寸。
• ctx.arc 和 ctx.clip：设置圆形裁剪区域。
• ctx.drawImage：在裁剪区域内绘制图片。
• uni.canvasToTempFilePath：将 Canvas 内容转换为图片路径。

这段代码展示了如何使用 Canvas 组件和相关的 API 将图片裁剪为圆形，并将裁剪后的图片显示在页面上。你可以根据需要调整图片路径和 Canvas 尺寸。