从 Dropzone.js 获取全尺寸图像（不是缩略图大小）的数据 URI答案

【问题标题】：Get the Data URI of the full sized image (not the thumbnail size) from Dropzone.js从 Dropzone.js 获取全尺寸图像（不是缩略图大小）的数据 URI
【发布时间】：2019-01-29 00:31:44
【问题描述】：

我正在使用 Dropzone.js 上传图片。当图像上传并我检查它时，它给了我这个-

<img data-dz-thumbnail="" alt="AJ-Styles-WWE-2K19-cover-e1533698368369 (1).jpg" src="the_Data_URI">

将鼠标悬停在 src 部分显示图像为 120 X 120 像素，而实际图像为 800 X 450 像素。

我需要对 Dropzone 进行哪些更改才能上传原始大小的图像而不是缩略图大小。

【问题讨论】：

看起来你可以在缩略图事件发生时进行回调；看这里：github.com/enyo/dropzone/wiki/…
这是真的，我试图限制/设置最大高度/宽度的条件，但 src 仍然显示缩略图的尺寸，而不是原始图像的尺寸。
我不确定我是否理解这个问题。澄清一下，Dropzone 以原始大小上传图像，但在预览中仅显示缩略图，默认为 120 x 120，您可以使用 thumbnailWidth 和 thumbnailHeight 选项更改缩略图尺寸，请参阅 dropzonejs.com/#config-thumbnailWidth。如果您希望预览为全尺寸，请参阅stackoverflow.com/questions/33811498/…
谢谢你给了我一个很好的方向。我已经解决了，并将解决方案作为答案发布。

标签： javascript image dropzone.js

【解决方案1】：

回调函数长这样-

Dropzone.options.myDropzone = {
    url: "UploadImages",
    thumbnailWidth: null,
    thumbnailHeight: null,
    init: function() {
        this.on("thumbnail", function(file, dataUrl) {
            $('.dz-image').last().find('img').attr({width: file.width, height: file.height});
        })
    }
};

html正文中的form标签-

<form action="UploadImages" class="dropzone" id="myDropzone" enctype="multipart/form-data"></form>

在这部分回调中，width属性设置为file.width，height设置为file.height（这实际上解决了问题）-

$('.dz-image').last().find('img').attr({width: file.width, height: file.height});

现在上传的图片是原始尺寸，而不是默认的 120 X 120 像素的缩略图。

【讨论】：