search

lionix-team / vue-image-markup

vue-image-markup will provide you to edit uploaded image easily and save it.
https://image-markup.lionix-team.com
96 stars 44 forks source link

How to scale an image without losing quality or cropping image. #16

Closed SethnBardsley closed 3 years ago

SethnBardsley commented 4 years ago

Currently when setting the editor dimensions as larger than the image dimensions blank space is added and when setting the editor dimensions as smaller than the image dimensions the image is cropped. How would i scale the image so that is fits tight with the canvas for any size. This would be so that high resolution photos could be edited on low resolution screens without losing final image resolution.

I've tried using css scaling however the mouse input is not scaled and so is out of place.

Thanks

bilalasif commented 3 years ago

@SethnBardsley did you find any solution to above?

SethnBardsley commented 3 years ago

@bilalasif Yes use the css scale function. First determine how much you want to scale it up or down to get the desired width/height Then in for the Editors style write this: :style="'transform: scale(' + scale ');'" If you want the scale x and y differently use the other css scale functions.