Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is it possible to preload an image into the preview? #781

Closed
xxxmicrobexxx opened this issue Dec 15, 2022 · 1 comment
Closed

Is it possible to preload an image into the preview? #781

xxxmicrobexxx opened this issue Dec 15, 2022 · 1 comment

Comments

@xxxmicrobexxx
Copy link

croppie is simply awesome! Thinking it would be too difficult, I was ready to hire someone to create an upload and crop script, Using croppie I managed to do it myself, congratulations on great work.

I am using it on a site where a person can upload and crop an image of themselves.

The behaviour I want is that if they have an existing image, when they load the page, the existing image is in the preview element, then if they upload a new one the image is replaced and croppie acts like usual.

I can see that there is a canvas element, how can I preload an image in there?

Thanks

@xxxmicrobexxx
Copy link
Author

It took a while to nut it out, but I achieved it by adding in the head section of the script

<style> .cr-boundary{ background-image:url("https://example.com/image.png?<?php echo time(); ?>") } </style>

The wonderful thing is that when a new image is chosen via the "browse" button, it replaces the existing image on the screen.

FWIW for anyone who sees this, on loading the page, the zoom slider and the preview divs are hidden. Using jQuery $('#getimage').on('change', function () { I make them appear once a new image has been chosen. I am really happy with this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant