如何显示图像的唯一部分

Question

UPDATE Since the question was complicating and unclear, I'm rewriting my question to make it much simpler.

Given

• image (image uri for entire image; 600x600 image from the example)
• left(x-coordinate; 50 from the example)
• top(y-coordinate; 100 from the example)
• width(width of the image; 300 from the example)
• height (height of the image; 300 from the example)

what I want

• 300 x 300 image (which is cropped to the image)
• 70 x 70 image (I will ultimately resized image to 70 x 70 size)

Here is my example code

// 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 from zvona's working demo, what I want is this.

but nothing else.

Answer 1

Here is a working example: https://snack.expo.io/@zvona/cropped-image

The idea is to have "cropped" View where Image is positioned inside it with custom dimensions. I use constants in my example to clarify the case.

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

And on styles:

  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,
  },

Note that ImageBackground is only for example purposes and it's not needed in the actual implementation.

Answer 2

Let me understand here. You want to show only part of an image(x: 50, y:10, width: 300, height 300) and then resize this part to 70x70, right? So 70x70 is the size of the final container. First calculate the the x and y coords. with respect to the final size

var ar = 70 / 300
var x = 50 * ar
var y = 100 * ar

Then the width in percent:

var pc = (600 / 300) * 100

Assuming you show the cropped and resized image as a div background you do like this:

div.style.background = 'no-repeat ' + -x + 'px' + ' ' + -y + 'px/' + pc + '% url("' + imgAbsPath + '")'