How to mirror and resize the part of image with fixed width and height

user_7820956 0
Viewed 1685

enter image description here

I'm building "Tagging from photo" functionality.

  1. When the user move or pinch the square on the image,
  2. PanResponder changes the state of x-coordinate(left), y-coordinate(top), the length of square(thumbSize)
  3. With the data, I want to show the part of square real-time

So this image below should be placed into the left of A, All All from the image above.

enter image description here

Here is the part of render showing the "cropped" image.

console.log(left) // 80
console.log(top) // 200
console.log(thumbSize) // 150
<Image
      source={{uri: image}}
      style={{height:70, width: 70, bottom: (-top), right: (-left)
      }} <- style is not complete. I'm putting some example code
/>

This is continuous problem from: How to show the only part of the image.

It works but the solution doesn't meet my expectation.

  • It's not changing width and height ( I want to fix resize the image from 'the width of square' to '70' for each width and height)
  • It breaks the whole style (A, All, All things disappear)

I've been trying to solve this idea for days but couldn't find the exact way.

Update: I almost solved it but resizing matters

I changed Image to CroppedImage (new component)

<CroppedImage
      source={{uri: image}}
      cropTop={top}
      cropLeft={left}
      cropWidth={thumbSize}
      cropHeight={thumbSize}
      width={width(100)}
      height={width(100)}
      resizeMode="contain" />

Here is CroppedImage

return (
  <View style={[{
    overflow: 'hidden',
    height: this.props.cropHeight,
    width: this.props.cropWidth,
    backgroundColor: 'transparent'
    }, this.props.style]}>
    <Image style={{
      position: 'absolute',
      top: this.props.cropTop * -1,
      left: this.props.cropLeft * -1,
      width: this.props.width,
      height: this.props.height
    }}
      source={this.props.source}
      resizeMode={this.props.resizeMode}>
      {this.props.children}
    </Image>
  </View>
);

It seems working but it can't resize (from square width x height to 70x70).

enter image description here

react-native reactjs css image
2 Answers

I made a fiddle to show what calculations you have to do to correctly position and resize your tag image:

$('#image').click(function(event) {
  var size_ratio = .6;

  var img_src = $(this).attr('src');
  
  var tag = $('#tag-rectangle');
  
  var top_position = tag.height()/2 - event.offsetX*size_ratio;
  var left_position = tag.width()/2 - event.offsetY*size_ratio;
  $('#tag-rectangle').css({
   'background-image': 'url('+img_src+')',
    'background-position': top_position +'px '+ left_position + 'px',
    'background-size': $(this).width()*size_ratio + 'px ' + $(this).height()*size_ratio + 'px'
    });
});
#tag-rectangle {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="image" src="http://fakeimg.pl/250x100/" alt="">

<div id="tag-rectangle"></div>

user_86396320
Related