How to generate thumbnails for images stored on the server using dropzone?

Question

I'm trying to display images already stored on the server. I display in dropzone, using the following code:

myDropzone.emit("addedfile", mockFile);
myDropzone.emit("thumbnail", mockFile, "url/image");

But with a problem, the thumbnail generated only reduces the size to thumnail sizes as specified without crop.

The problem is this is not done the crop image when I call the function thumbnail image is distorted.

It would be possible to generate a temporary thumbnail using existing methods and sends it in the thumbnail function call?

Misdeem

Answer 1

I am recommending you create thumbnails on the server, because otherwise your users need to download all images in their original size, just to view small thumbnails.

That being said, if you still want to go ahead, and download the originals and resize in the browser, I just released Dropzone v4.0.1 to include the function createThumbnailFromUrl().

Use it like this:

myDropzone.emit("addedfile", mockFile);
myDropzone.createThumbnailFromUrl(mockFile, '/your-image.jpg');

(Side note: the image needs to be hosted on the same server, otherwise you'll get a Cross-Origin error)

Todhunter

@Todhunter Any chance of supporting cross-origin images using the technique at https://mcmap.net/q/134791/-how-to-fix-getimagedata-error-the-canvas-has-been-tainted-by-cross-origin-data ? – Ludovico

hey! i'm facing the same problem here #45127368 – Rainey