uni-app 九宫格切图

在处理 uni-app 中的九宫格切图时，你可以利用 Canvas API 来实现图片的九宫格切割效果。以下是一个基本的示例代码，展示了如何在 uni-app 中实现九宫格切图功能。

首先，确保你的项目中已经引入了必要的依赖，并且已经创建了一个页面（例如 index 页面）来展示九宫格效果。

1. 在 index.vue 文件中

<template>
  <view class="container">
    <canvas canvas-id="canvas" style="width: 300px; height: 300px;"></canvas>
    <view class="grid-container">
      <block v-for="(item, index) in gridImages" :key="index">
        <image :src="item" class="grid-item"></image>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      gridImages: []
    };
  },
  mounted() {
    this.drawImageAndCutToGrid();
  },
  methods: {
    drawImageAndCutToGrid() {
      const ctx = uni.createCanvasContext('canvas');
      uni.getImageInfo({
        src: 'path/to/your/image.jpg', // 替换为你的图片路径
        success: (res) => {
          const imgWidth = res.width;
          const imgHeight = res.height;
          const canvasWidth = 300;
          const canvasHeight = 300;
          const gridSize = canvasWidth / 3;

          ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight);
          ctx.draw(false, () => {
            for (let i = 0; i < 3; i++) {
              for (let j = 0; j < 3; j++) {
                const tempCanvas = uni.createCanvas();
                const tempCtx = tempCanvas.getContext('2d');
                tempCtx.drawImage(res.path, j * gridSize, i * gridSize, gridSize, gridSize, 0, 0, gridSize, gridSize);
                tempCanvas.toTempFilePath({
                  success: (tempRes) => {
                    this.gridImages.push(tempRes.tempFilePath);
                    if (this.gridImages.length === 9) {
                      // 所有切片完成
                    }
                  },
                  fail: (err) => {
                    console.error(err);
                  }
                });
              }
            }
          });
        },
        fail: (err) => {
          console.error(err);
        }
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.grid-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.grid-item {
  width: 100px;
  height: 100px;
  margin: 5px;
}
</style>

说明

1. Canvas 绘制：使用 uni.createCanvasContext 创建一个 Canvas 上下文，并绘制原始图片。
2. 图片信息获取：通过 uni.getImageInfo 获取图片信息，以便知道图片的原始尺寸。
3. 九宫格切割：在 Canvas 上绘制图片后，通过循环将图片切割成九宫格，并将每个小图保存到临时文件路径。
4. 展示九宫格：将切割后的九宫格图片展示在页面上。

注意：在实际应用中，你可能需要处理图片尺寸与 Canvas 尺寸不匹配的情况，以及优化性能，特别是在处理大图时。