How to get the position of zoomed portion of image.

[sanilcgs]

I have tried for getting the position of zoomed portion of an image using the onMove props. I got a position object after every pan. I couldn't understand how will the position object change during each pan move. Is it possible to get the exact position of the area using this object or any other suggestion to get the position?

[brycehanscomb]

Is it possible to get the exact position of the area...

Are you referring to the area of the image which is visible when cropped?

Or something else?

[dbecker215]

I've been running into this as well. I'm trying to use the pan/zoom functionality to crop an image, but I'm not quite sure how to calculate it without a better understanding of what scale and zoomCurrentDistance mean relative to the image vs window dimensions. Can you explain that these data points imply so that I can better understand how to crop accurately? Thank you.

[genogeno]

I would like to have this as well. Would like to know how to compute the area being zoomed with relation to the original image. Like left, top, width, height.

Are you referring to the area of the image which is visible when cropped? -> Would be great if we are able to compute this.

Thanks.

[brycehanscomb]

@genogeno can you suggest an API that you reckon would be nice?

What props, args, callbacks would make sense?

On Tue, 29 Jan 2019 at 5:40 pm, genogeno notifications@github.com wrote:

I would like to have this as well. Would like to know how to compute the area being zoomed with relation to the original image. Like left, top, width, height.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ascoders/react-native-image-zoom/issues/69#issuecomment-458425045, or mute the thread https://github.com/notifications/unsubscribe-auth/ACAqW08Rpvf5wfkgROgEFII9CdEMR4GXks5vH-ysgaJpZM4XYKl8 .

[genogeno]

I think it would be nice to be added as a new property to IOnMove object.

1. As added key-value pair for position object. onMove | ( position: IOnMove )=>void

2. If it also possible to add a new callback that will be called when the move has ended. onMoveEnd | ( position: IOnMove )=>void

[brycehanscomb]

@ascoders what do you think?

[ascoders]

It's nice to have, welcome pr! @brycehanscomb @genogeno 👍

[neilco]

While a separate onMoveEnd is a nice bit of sugar, you can already achieve that by filtering the position type in onMove to onPanResponderRelease.

---

@dbecker215 @genogeno I realise your comments are nearly a month old, but hopefully this may be useful for you. I’ve just had to work through calculating the dimensions and position of a cropped image and here’s my solution:

Note: this assuming you’re using an image view that has its resizeMode set to cover

1. Calculate the downscaling factor imposed by the cover resize mode:

const widthDownscalingFactor = originalImageWidth / cropWidth;
const heightDownscalingFactor = originalImageHeight / cropHeight;

2. Calculate the dimensions of the zoomed image:

// For portrait images
const scaledImageWidth = cropWidth * position.zoomScale;
const scaledImageHeight = cropHeight * (originalImageHeight / originalImageWidth) * position.zoomScale;

// For landscape images
const scaledImageWidth = cropWidth * (originalImageWidth / originalImageHeight) * position.zoomScale;
const scaledImageHeight = cropHeight * position.zoomScale;

// For square images
const scaledImageWidth = cropWidth * position.zoomScale;
const scaledImageHeight = cropHeight * position.zoomScale;

3. Calculate the dimensions of the scaled down crop view:

const scaledCropWidth = cropWidth / position.zoomScale;
const scaledCropHeight = cropWidth / position.zoomScale;

4. Calculate the origin of the crop view relative to the original image:

const originX = (scaledImageWidth - scaledCropWidth) / 2
const originY = (scaledImageHeight - scaledCropHeight) / 2

5. Calculate the origin of the image after panning & zooming:

const x = originX - position.positionX;
const y = originY - position.positionY;

6. Calculate the resulting cropped rect:

const cropRect = { 
  originX: x * widthDownscalingFactor,
  originY: y * heightDownscalingFactor,
  width: cropWidth * widthDownscalingFactor,
  height: cropHeight * heightDownscalingFactor,
}

[barrsan]

Hello! I created a small component for cropping based on this component - react-native-simple-image-cropper. @dbecker215 @genogeno you can see how the values ​​you need are calculated here.

[spyshower]

@neilco I am trying to get your code working but I am always getting different Y... Is it possible that you post a snack? Thanks!