cropperjs icon indicating copy to clipboard operation
cropperjs copied to clipboard

Need help with setCanvasData / zoomTo

Open 24HOURSMEDIA opened this issue 1 year ago • 1 comments

Is your feature request related to a problem? Please describe.

I cannot figure out how to use setCanvasData in the following way; given an image, I have some coordinates for the original image. Say, {left: 100, top: 150, width: 50; height: 250} and the plane is defined by (0,0,imageNaturalWidth,imageNaturalHeight)

Now I want the cropper to zoom in so cropperjs shows the specified area with best fit in the cropper window. With best fit I mean, that either the width of the area or the height of the area should match the visible width/height.

Describe the solution you'd like I'd appreciate it a lot if you'd have a simple solution/calculation for how I should call setCanvasData or zoomTo to show a specified area in the image as large as possible.

Describe alternatives you've considered I have been playing around a lot with setCanvasData and zoomTo but just cannot manage to get te calculations right and accomplish the goal.

Additional context

I'd want the gray block in the image (I have the coords in my code) to cover the view as fully as possible after I click a button.

image

24HOURSMEDIA avatar Mar 15 '23 09:03 24HOURSMEDIA

Just try it with the open API, for example, use the moveTo method to correct the offset.

fengyuanchen avatar Mar 23 '23 03:03 fengyuanchen