javascript 如何在 DropZone.js 上为上传的图像创建缩略图?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29740089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 10:59:24  来源:igfitidea点击:

How to create thumbnail for uploaded images on DropZone.js?

javascriptphpjqueryjsondropzone.js

提问by Pedram

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 base64same as dropzonemade when want to upload new image.

使用下面的代码,我得到了所有上传的图像DropZone,但我现在有一个简单的问题,它已经将原始图像显示为缩略图,但我需要在想要上传新图像时显示与制作的缩略图base64相同的缩略图dropzone

dropzone.js

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);

            });
        });

      },

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

所以问题在于这段代码我能够显示上传的图像,dropzone但它显示带有原始图像的缩略图,而不是用base64. 当您想上传新图像时dropzone制作缩略图base64,我想显示这样的缩略图。

回答by ITSolution

You should use createThumbnailFromUrl , orginally posted here

您应该使用 createThumbnailFromUrl ,最初发布在这里

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