Introduce full size overlay for image previews

pqina / filepond-plugin-image-preview

🖼 Show a preview for images dropped on FilePond

https://pqina.nl/filepond

MIT License

46 stars 26 forks source link

Introduce full size overlay for image previews #21

Closed nielsboogaard closed 5 years ago

nielsboogaard commented 5 years ago

This PR brings (optionally, by default turned off) the possibility to open the image which is visible in the image preview in a full screen overlay so you can see the uploaded image in more detail.

rikschennink commented 5 years ago

Hi Niels, I appreciate the effort, but do you have a demo of this functionality?

nielsboogaard commented 5 years ago

I've put up a demo here: https://nielsboogaard.github.io/filepond-plugin-image-preview/

rikschennink commented 5 years ago

I like the enthousiasme but I don't think there's a lot of need for this to be in the core image preview plugin.

I'd love to see this as an additional plugin, if you find you need additional API hooks for that I'm all ears. Some things to consider:

There is no animation from zoomed out to zoomed in state.
There is no icon or other indication that the image can be zoomed.
I wonder if it correctly previews an image when it's cropped / rotated / color filtered.
You could use URL.createObjectURL(file) to create a URL to a file object and use that instead of the base64 encoded string. Encoding and decoding is very CPU intensive task.

nielsboogaard commented 5 years ago

I get your point and thanks for the pointers. I've moved it to a separate plugin now: https://github.com/nielsboogaard/filepond-plugin-image-overlay. It includes a simple animation upon opening, it contains an icon to indicate and trigger the overlay functionality and I'm using createObjectURL now for the file object.

The only thing that I didn't get to work it listening to the 'FilePond:pluginloaded' event. Don't think it's a race condition as I also tried registering the listener very early. Worked around it now using a timeout as the functionality is still usable without the addition of making the image preview layer clickable to open the overlay as well.