[V2] Use selection's $toCanvas method on zoomed canvas and get selection at original scale?

[nathanhennig]

I think I've seen this question asked a couple times such as #1130, but the only reply I've seen is @fengyuanchen mentioning the width and height options, which doesn't actually produce results I desire.

cropperSelection.$toCanvas({
  width: 1920,
}); 

In my use case, I'm taking a 1920x1080 picture of my face with my web cam. If I manually crop that picture in Paint or similar software, I get an image about 450x620 pixels. Using cropperjs, it's about 194x235. If I set width: 1920, then the saved image is about 1920x2125.

What I'm really looking for is a way to tell cropperjs to honor the region I've selected but ignore the zoom and save that region at the original scale.

So far the "solution" I've found is to make the canvas big enough, then zoom in to 100% and select the region before cropping and saving, which gives me an image the same size as if I had done it manually.

As a workaround, since I know approximately the size I expect, I can hard code a value like width: 450 and get reasonable results, but it feels like a solution that will likely cause problems for me in the future.

Have I missed anything? Is there any way currently to get the selected region of a zoomed canvas without getting a re-scaled/zoomed image?

[fengyuanchen]

Just change the value of the width and height options:

cropperSelection.$toCanvas({
  width: 450,
  height: 620,
}); 

[nathanhennig]

That will get me an image that's approximately the right size, but if I do that (to my understanding) I'm forcing the scaling. Perhaps the actual size of the unscaled region is 620 by 620 and specifying 450x620 will result in the image being squished horizontally to make 620 become 450.

As far as I can tell specifying just one dimension, which I mentioned above is my current solution, allows automatic scaling in the other dimension, which is better for me. My concern is I can't guarantee in the future that all pictures will be taken at the same resolution with the target the same distance from the camera which might result in problems,

Just to make sure what I'm trying to do is clear, let me give another example.

Assume I have an original image of X by Y pixels where I don't know what X or Y are equal to. Assume the cropper canvas shows that image zoomed at 10%. If I crop half that zoomed image (half of width but full height) and output it, I will get an image with a size of (X/2)/10 by Y/10 pixels large. The result I want is to instead have the outputted image by X/2 by Y pixels large.

I can't specify

cropperSelection.$toCanvas({
  width: X/2,
  height: Y,
}); 

because I won't have any knowledge of what those values will actually be.

I don't believe the library currently supports any kind of option like

cropperSelection.$toCanvas({scaled: false})

but I wanted to try and make sure I hadn't missed something somewhere.

Thanks for responding and for building a great library.

[fengyuanchen]

You can only set the width, and the height of the output canvas will be computed automatically with the aspect ratio of the selection.

cropperSelection.$toCanvas({
  width: 450,
});