resize - Dropzone.js +客户端图像调整大小

Question

我想将Dropzone.js与客户端图像调整大小集成。我知道有一个调整缩略图大小的功能，但是我想创建一个在上传之前调整主图像大小的功能。有人可以帮我吗？

Answer 1

上载前调整大小功能上的Dropzone文档令人困惑。它的读取方式可以限制宽度，限制高度，或同时限制两者并牺牲宽高比，从而使图像失真。不是这种情况。这个：

resizeWidth: 1000, resizeHeight: 1000,
resizeMethod: 'contain', resizeQuality: 1.0,

将宽度或高度限制为最大1000像素-以较大者为准。另一个将根据宽高比减小，而不会失真图像。例如，在我的测试中，我上传了2688x1512的图片。 Dropzone裁剪并将Thumbnail调整为其默认的120x120，但是Dropzone分别将发送到服务器的文件的大小调整为1000x562，然后发送到服务器。

这里有一个有趣的警告。 JPEG将被重新压缩，有损，因此即使resizeQuality为1.0也将导致丢失。我认为此功能是防止文件过大的一种方法，但是如果可以避免使用此功能，则应谨慎调整两次大小（一次在客户端上一次在服务器上）。

如果这还不够-并且您确实想重载transform方法-值得注意的是，在Dropzone中遵循代码路径会有些混乱，因为 createThumbnail代码路径每次上传都要使用两次，一次创建一个缩略图（如您所愿），然后再次在此处预先调整图像的大小，然后再将其传递到服务器。同样， resize方法的名称也容易混淆。而 resizeWidth等指的是准备要上传的图像， resize指的是调整缩略图的大小，对发送到服务器的图像不做任何操作。