javascript - 如何显示图像的唯一部分

Question

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

给定

• 图像(整个图像的图像 uri；示例中的 600x600 图像)
• 左(x 坐标；示例中的 50)
• 顶部(y 坐标；示例中的 100)
• 宽度(图像的宽度；示例中的 300)
• 高度(图​​像的高度；示例中的 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 的工作演示，我想要的是这个。

但没有别的。

Answer 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 仅用于示例目的，在实际实现中不需要。