使用React Native相机拍摄正方形照片

Question

默认情况下，react-native-camera 以手机标准宽高比拍摄照片，并使用Base64 png输出，如果设置了 Camera.constants.CaptureTarget.memory 目标。

我正在寻找一种创建正方形照片的方法——可以直接使用相机，也可以通过转换捕获的 imagedata 实现。不确定 React Native 是否支持此类操作，或者应该完全使用本地代码。

aspect 属性仅更改相机图像在取景器中的显示方式。

以下是我的代码：

<Camera
  ref={(cam) => {
    this.cam = cam;
  }}
  captureAudio={false}
  captureTarget={Camera.constants.CaptureTarget.memory}
  aspect={Camera.constants.Aspect.fill}>
</Camera>;

async takePicture() {
  var imagedata;
  try {
    var imagedata = await this.cam.capture();// Base64 png, not square
  } catch (err) {
    throw err;
  }
  return imagedata;
}

- Peter G.

---

请查看这个内置工具 - ImageEditor.cropImage，虽然我没有使用过它，但看起来你可以用它来将图像裁剪成正方形。 - Michael Radionov

看起来ImageEditor仅适用于ImageStore中的图像。对于传入URI参数的Base64图像，它会抛出“找不到适合的图像URL加载程序（null）”错误。 - Peter G.

@PeterGerhat：看过https://github.com/ivpusic/react-native-image-crop-picker了吗？ - Bhavesh Jariwala

Answer 1

使用Image的getSize方法并将数据传递到ImageEditor的cropImage方法中。

查看cropData对象，可以看到我将图像的宽度作为宽度和高度的值传递，从而创建一个完美的正方形图像。

偏移Y轴是必要的，以便裁剪图像的中心，而不是顶部。将高度除以2，然后从该数字减去图像大小的一半((h/2) - (w/2))，应确保您始终从图像的中心进行裁剪，无论使用什么设备。

Image.getSize(originalImage, (w, h) => {
  const cropData = {
    offset: {
      x: 0,
      y: h / 2 - w / 2,
    },
    size: {
      width: w,
      height: w,
    },
  };
  ImageEditor.cropImage(
    originalImage,
    cropData,
    successURI => {
      // successURI contains your newly cropped image
    },
    error => {
      console.log(error);
    },
  );
});

- Jeremy

---

为什么这个计算总是得到图像的中心？我似乎无法理解它 :( - Johhan Santana