如何显示图像的唯一部分

Posted 2023-02-22

【中文标题】如何显示图像的唯一部分

【英文标题】：How to show the only part of the image

【发布时间】：2018-05-01 21:55:40

【问题描述】：

更新由于问题复杂且不清楚，我正在重写我的问题以使其更简单。

给定

图像（整个图像的图像 uri；示例中的 600x600 图像） left(x-coordinate; 50 from the example) top（y 坐标；示例中的 100） width(图片的宽度；示例中为300) height（图像的高度；示例中为 300）

我想要什么

300 x 300 图片（已裁剪为图片） 70 x 70 图片（我最终会将图片调整为 70 x 70 大小）

这是我的示例代码

// render the part of the image
console.log(left); // 50
console.log(thumbSize); // 300
return (
        <Image
          source=uri: image
          style=selectedStyle(left, top, thumbSize)/>
      );
... 
function selectedStyle(left, top, thumbSize) 
  return 
    left,
    top,
    width: thumbSize,
    height: thumbSize
  ;

UPDATE来自 zvona 的工作演示，我想要的是这个。

但仅此而已。

【问题讨论】：

我想这是一个非常难的问题

如果你有标签并且你不能让你的捏合正常工作，你需要按比例调整图像宽度和高度以标记区域宽度、高度、顶部和左侧。我不完全确定您的问题是什么，抱歉。

@Andrei 正在调整大小。我想我对简单的问题解释得太多了。我正在编辑我的问题。我会尽快通知你

亲爱的@Andrei，我刚刚为您编辑了整个问题。如果有什么不清楚的地方请告诉我:) 谢谢

因为您的出色插图而点赞 :)

【参考方案1】：

这是一个工作示例：https://snack.expo.io/@zvona/cropped-image

我们的想法是“裁剪”View，其中Image 以自定义尺寸定位在其中。我在示例中使用常量来说明情况。

<View style=styles.cropped>
  <Image
    style=styles.image
    source=uri: 'https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png' />
</View>

关于样式：

  image: 
    marginLeft: -OFFSET_LEFT,
    marginTop: -OFFSET_TOP,
    width: IMAGE_WIDTH,
    height: IMAGE_HEIGHT,
  ,

  cropped: 
    width: 150,
    height: 150,
    overflow: 'hidden',
    position: 'absolute',
    left: OFFSET_LEFT,
    top: OFFSET_TOP,
  ,

请注意，ImageBackground 仅用于示例目的，实际实现中不需要。

【讨论】：

感谢您的意见。但是，我并不是要问如何显示裁剪的图像。我不想从图像中绘制正方形（使用 ImageBackground。它已经在工作了！！），我只想获取我在示例图像中描述的图像的一部分。

正如我所指定的，“我想要的”不是整个图像，而是已经裁剪的 300 x 300 图像（这就是我提供坐标、宽度/高度的原因）。

您实现了左图中的示例。但“我想要什么”是正确的。对不起。

图片的其余部分只是证明它被正确裁剪的证明。您可以忽略该部分，只关注代码的 View 和 Image 部分。

239 / 391 只是特定荷马图像的尺寸。您只需根据您的图像更改尺寸。所以在这种情况下是 600 / 600。裁剪区域大小的 150 / 150 也是如此。