作物图像与反应

Question

你好，

我试图在反应本地文档上裁剪图像

<Image source={{uri: this.props.image, crop: {left: 50, top: 50, width: 100, height: 100}}} style={{height: 100, width: 100}}/>

但它不起作用。

有什么想法？

Answer 1

来自文档：

在基础架构方面，原因是它允许我们将元数据附加到此对象上。例如，如果您使用的是需要（'./my-icon.png'），则我们添加有关其实际位置和大小的信息（不要依靠这个事实，它可能会在将来发生变化！）。这也是将来的证明，例如，我们可能希望在某个时候支持精灵，而不是输出{uri：...}，我们可以输出{uri：...，crop：{左：10，上，上：50，50，宽度：20，高度：40}}，并在所有现有的呼叫站点上透明地支持弹簧。

React Native Image当前不支持图像裁剪，至少不是您指向的方式，但是您还有其他选择可以从事相同的工作。

1. ImageDitor：反应本机组件，再次来自文档：

裁剪URI参数指定的图像。如果URI指向遥控器 图像，它将自动下载。如果图像不能 已加载/下载，将调用故障回调。

2. 裁剪不需要链接。
3. 图像裁剪裁剪者另一个提供裁剪的软件包，但以不同的方式：采摘。需要链接，但值得庆幸的是，它也支持RN版本> 0.40。

我没有使用过任何一个，但是如果我是您，我会首先尝试图像编辑器，因为您不需要任何其他安装。

Answer 2

您可以使用软件包裁剪图像。上传图像的第一个包装，第二个用于裁剪图像的包装。

1. 反应形象图像挑战器
2. React-nimimage-crop-picker

用于上传图像您可以使用第一个软件包函数，例如

  const pickImage = () => {
    launchImageLibrary({quality: 0.5}, response => {
      if (!response.didCancel) {
        setUri(response.assets[0]);
        setCropImg('');
      }
    });
  };

用于裁剪图像您可以使用第二个软件包函数，例如

  const Crop_img = () => {
ImagePicker.openCropper({
  path: uri.uri,
  width: dimensions.width - 30,
  height: dimensions.height / 3.5,
  maxFiles: 1,
  showCropFrame: false,
}).then(image => {
  console.log(image.path);
  setCropImg(image.path);
});
  };