Dropzone.js +客户端图像大小调整 [英] Dropzone.js + Client Side Image Resizing

问题描述

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

I want to integrate Dropzone.js with a Client Side Image Resizing. I know that there is a function to resize the thumbnail, but I would like to create a function to resize the main image before upload. Anyone could help me please?

推荐答案

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

The Dropzone documentation on the pre-upload resize feature is confusing. The way it reads, you can either limit the width, limit the height, or limit both and sacrifice Aspect Ratio, distorting the image. This is not the case. This:

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

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

Limits either width or height to a max of 1000px - whichever is larger. The other will get reduced in accord with the Aspect Ratio, without distorting the image. So for example, in my test I uploaded a 2688x1512 image. Dropzone cropped and resized the Thumbnail to its default 120x120, but the file sent to the server was resized separately by Dropzone, to 1000x562, then sent to the server.

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

There is an interesting caveat here. JPEGs are going to be recompressed, lossy, so even a resizeQuality of 1.0 is going to result in loss. I see this feature as a method of preventing insanely large files, but you should be careful of resizing twice if you can avoid it (once on server once on client).

如果这还不足以满足您的需要-并且您确实想重载transform方法-值得注意的是，在Dropzone中遵循代码路径会有些混乱，因为 createThumbnail 每次上传都会使用codepath两次，一次用于创建您期望的缩略图，另一次在将图片传递到服务器之前对其进行预调整大小。同样， resize 方法的名称也容易混淆。而 resizeWidth 等指的是准备要上传的图像，调整大小是指调整缩略图的大小，对发送到服务器的图像不做任何操作。

If this isn't enough for you - and you really wanted to overload the transform method - it's worth noting that following the code path inside Dropzone is a little confusing, because the createThumbnail codepath is used twice every upload, once to create a thumbnail like you'd expect, and again to pre-resize the image here before passing it to the server. Likewise, the resize method is confusingly named; while resizeWidth etc refer to prepping the image for upload, resize refers to resizing for the thumbnail, and does nothing to the image sent to the server.

这篇关于Dropzone.js +客户端图像大小调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！