search

alessiomaffeis / vue-picture-input

Mobile-friendly picture file input component for Vue.js 2-3 with image preview, drag and drop, EXIF orientation, and more
MIT License
887 stars 156 forks source link

Cropping Image #166

Open BernhardGoehmann opened 1 year ago

BernhardGoehmann commented 1 year ago

If the crop prop is set to true, the uploaded image is cropped to fit the canvas size for the preview. However, the original, uncropped file is emitted with the Change event. Is this intended behaviour? Is there any good way to crop the actual file to the size of the canvas?

alessiomaffeis commented 1 year ago

Hi! Yes, that's the intended behaviour: the cropping is only for presentational purposes. If you want to get the cropped image, you need to access the underlying canvas element and use the toBlob or toDataURL methods.

If you wanna add that feature as a contribution, a PR would be welcome! :) I'd just add a cropFile boolean prop and emit a file based on canvas.toBlob instead of the original file if the prop is set to true.