How do I use uploaded image in newly generated cropit previews?

scottcheng / cropit

A "customizable crop and zoom" jQuery plugin.

http://scottcheng.github.io/cropit/

MIT License

874 stars 307 forks source link

How do I use uploaded image in newly generated cropit previews? #299

Closed YikXian closed 5 years ago

YikXian commented 5 years ago

I have created a tool that generates new cropit previews based on user input for dimension. Example, if a user keys in 600 x 600 in the input give, a new preview will be generated with the width of 600 and height of 600. What I want to know is how do I use an already uploaded image in a newly generated dimension? Because right now it doesn't show a preview image when a new dimension gets keyed in.

YikXian commented 5 years ago

Okay, nevermind, figured it out by using image state and getting the base 64 of the original preview, you can set multiple previews to already have a preset image based on the uploaded image.

var pre_load = $('div.image-editor .cropit-preview .cropit-preview-image-container').find('img').attr('src'); $('.image-editor').cropit({ imageBackgroundBorderWidth: 20, imageState: { src: pre_load, }, });