如何在DropZone.js上为上传的图像创建缩略图? [英] How to create thumbnail for uploaded images on DropZone.js?

问题描述

使用下面的代码，我用DropZone获取了所有上传的图像，但是我现在有一个简单的问题，它已经将原始图像显示为缩略图，但是我需要显示与dropzone相同的缩略图，而base64是在需要时显示的上传新图片.

With below code i got all uploaded images with DropZone,but i now i have a simple problem, it already showing Original images as thumbnail but i need to show thumbnail with base64 same as dropzone made when want to upload new image.

dropzone.js

 init: function() {
         var thisDropzone = this;
        var pageid = $("#pageid").val();
        $.getJSON('plugin/dropzone/get_item_images.php?id='+pageid, function(data) { 

            $.each(data, function(key,value){ 

                var mockFile = { name: value.name, size: value.size }; 

                thisDropzone.options.addedfile.call(thisDropzone, mockFile);
                thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "/admin/uploads/"+value.name);
                thisDropzone.emit("complete", mockFile);

            });
        });

      },

所以这个代码的问题是我可以使用dropzone显示上传的图像，但是它显示的缩略图带有原始图像，而不是使用base64创建的真实缩略图.当您要上传新图像时，dropzone用base64制成缩略图，我想显示这样的缩略图.

So the problem is with this code i able to show uploaded images with dropzone but it show thumbnail with original images not real thumbnail that created with base64. dropzone made thumbnail with base64 when you want to upload new image, i want to show thumbnail like this.

推荐答案

您应该使用createThumbnailFromUrl，将其最初发布在此处

You should use createThumbnailFromUrl , orginally posted here

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

这篇关于如何在DropZone.js上为上传的图像创建缩略图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！