Feature request: get crop and orientation data

[julianfox]

Do you plan to emit the crop and orientation data from the canvas preview? It seems not possible with the actual code.

I don't know if it's in the scope of vue-picture-input.

My use case would be to create and save on server side the image with the exact crop and orientation than the preview but in full size.

The best approach for me is to emit an object after every change with all the details (crop, orientation) in addition to the image file.

An other solution is to directly generate the image (cropped and oriented) with canvas, but I don't know if it's the right approach especially with the need to generate a full size image.

[alessiomaffeis]

Yeah, I can see both use cases, since I've used both approaches in my app. While I have a client-side crop in progress, I can see the point in doing it on the server-side, if you care about resampling quality and want to retain the original image at the same time.

How do you think the crop data object should look like?

[julianfox]

We can take inspiration from the Jquery lib Cropper:

crop: function(e) {
    // Output the result data for cropping image.
    console.log(e.x);
    console.log(e.y);
    console.log(e.width);
    console.log(e.height);
    console.log(e.rotate);
    console.log(e.scaleX);
    console.log(e.scaleY);
 }

This will be particularly useful if we integrate a crop/zoom tool ( I saw it in your TODO ;-) )

[julianfox]

In my case the best should be to return this data object, the preview image generated by the canvas and the full size image.

I need a preview image for a final review step in my user path and then I generate the full size image on the server side if the user confirm the last step. (in this way I don't have to block the experience with a loading time, especially on mobile).

[alessiomaffeis]

I don't mind emitting the crop data along with the change/toggleAspectRatio events, but I would implement crop as a separate function, for performance reasons. Ultimately, we will want to be able to get a cropped image with dimensions that are independent from those of the preview canvas and context (which can vary based on window size), so we will need do the crop in a separate off-screen canvas, and I don't want it to do that at every redraw.

[julianfox]

Make sense, but we can also just emit the crop data and only crop the preview canvas image. (in this way we can only do the crop on the original image on the server side).

I will explore the solution adopted by the existing crop/resize lib.

[alessiomaffeis]

I will consider this for the next major version! :)