使用 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;
}

Answer 1

对Image使用getSize方法，将数据传递给ImageEditor的cropImage方法。

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

偏移 Y 轴是必要的，以便裁剪图像的中心，而不是顶部。将高度一分为二，然后从该数字 ((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);
    },
  );
});