React Native（Expo）中如何将图片切割为多个碎片？

1. Expo Image Manipulator #

这是Expo官方提供的图片处理工具，完美适配Expo开发流程，无需额外配置原生环境，是做拼图切割的首选方案。你可以通过它的manipulateAsync方法，针对图片的指定区域执行裁剪操作，循环生成所有拼图块的URI。

示例代码：

import { manipulateAsync, SaveFormat } from 'expo-image-manipulator';

// 以3x3拼图为例
const gridSize = 3;
const imageWidth = 600;
const imageHeight = 600;
const pieceWidth = imageWidth / gridSize;
const pieceHeight = imageHeight / gridSize;

async function splitImage(imageUri) {
  const pieces = [];
  for (let row = 0; row < gridSize; row++) {
    for (let col = 0; col < gridSize; col++) {
      const croppedImage = await manipulateAsync(
        imageUri,
        [
          {
            crop: {
              originX: col * pieceWidth,
              originY: row * pieceHeight,
              width: pieceWidth,
              height: pieceHeight,
            },
          },
        ],
        { format: SaveFormat.PNG }
      );
      pieces.push({ uri: croppedImage.uri, row, col });
    }
  }
  return pieces;
}

2. react-native-image-crop-picker #

这个库支持图片裁剪功能，兼容Expo环境（注意选择适配Expo的版本）。虽然它更偏向单张图片的裁剪操作，但通过循环调用也能实现拼图切割的需求。如果使用Expo Managed Workflow，建议先确认库的兼容性，避免需要eject的情况。

3. Canvas手动绘制（仅Expo Web） #

如果你的拼图游戏面向Web端，可以用HTML5 Canvas来手动切割图片。思路是将原图绘制到Canvas上，然后截取对应区域的像素数据，再导出为图片URI。

示例代码（Web环境）：

function splitImageWithCanvas(image, gridSize) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const pieceWidth = image.width / gridSize;
  const pieceHeight = image.height / gridSize;
  const pieces = [];

  for (let row = 0; row < gridSize; row++) {
    for (let col = 0; col < gridSize; col++) {
      canvas.width = pieceWidth;
      canvas.height = pieceHeight;
      ctx.drawImage(image, col * pieceWidth, row * pieceHeight, pieceWidth, pieceHeight, 0, 0, pieceWidth, pieceHeight);
      pieces.push({ uri: canvas.toDataURL('image/png'), row, col });
    }
  }
  return pieces;
}

内容的提问来源于stack exchange，提问作者akdeniz