search

Foliotek / Croppie

A Javascript Image Cropper
http://foliotek.github.io/Croppie
MIT License
2.55k stars 886 forks source link

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

Closed xxxmicrobexxx closed 1 year ago

xxxmicrobexxx commented 1 year ago

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 commented 1 year ago

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!