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

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.

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. Any advice will be highly appreciated.

UPDATE I almost solved it but resizing matters

I changed Image -> 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)

1 Answers

Answers 1

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>

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati