zhanziyang / vue-croppa

A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.
https://zhanziyang.github.io/vue-croppa/
ISC License
967 stars 128 forks source link

add setter for outputWidth and outputHeight or ability to control this.myCroppa.width and this.myCroppa.height directly before calling this.generateDataUrl to control output size #244

Open corey-cosman opened 3 years ago

corey-cosman commented 3 years ago

I want to be able to affect the output width and height without affecting that of the container.

The use case is: I want to be able to upload one image and then store three differently sized images on s3. The stored images will be small, med, and large. The initial-image prop will take the dimensions specified in the container, but I want to hard code the pixel width and height values for the small and large images. I am attempting this by setting the quality prop manually in the method that handles image upload. I am setting this right before I call generateDataUrl. This does not affect the files that are actually stored to s3 (they still take the quality specified in the prop itself). When i try to set this.myCroppa.outputWidth (or height), this also doesn't work because there is no setter on these properties.

When I try to set this.myCroppa.width and this.myCroppa.height manually, the conatiner size changes on the ui, and then when calling this.generateDataUrl and storing image in s3, the initial container's width and height props are stored, not the new values set in the upload handler. Has anyone done something like this with this package? Any help is greatly appreciated. Thanks

related issues:

https://github.com/zhanziyang/vue-croppa/issues/100 https://github.com/zhanziyang/vue-croppa/issues/213 https://github.com/zhanziyang/vue-croppa/issues/122