裁剪器在使用 dropzone js 上传之前裁剪多个图像

Posted 2023-02-25

【中文标题】裁剪器在使用 dropzone js 上传之前裁剪多个图像

【英文标题】：Cropper crop multiple Images before upload with dropzne js

【发布时间】：2017-01-06 21:15:16

【问题描述】：

我正在使用带有 dropzone.js 的 Bootstrap，以使用户可以通过拖放上传图像。 因此，我创建了一个可以正常工作的放置区，包括上传，即使有多个图像。 但是现在，我想在上传之前裁剪图像。 我认为dropzone.js的init函数中的this.on("added file", function(file)事件是正确的地方，但我不知道如何转换文件，以便我可以在特殊模型中逐个裁剪并上传裁剪后的图像。

【问题讨论】：

你找到解决办法了吗？

【参考方案1】：

您可以在“addedFile”内的 dropzone 中访问上传的文件，但如果您想裁剪通过 dropzone 上传的图像，您必须使用外部库，例如 cropperjs。首先，如果您在 dropzone 中进行了多次上传，则为每个图像提供一个按钮或为每个图像添加一个单击事件，并将该文件作为参数传递给cropperjs。

【讨论】：

我已经在使用 jquery cropper 并且你提出了 addedFile 事件，我的问题是我不知道如何访问所有添加的文件。我不希望图像在模态中进行编辑。所以你放下多张图片，打开模式获取，你裁剪它并点击保存，然后下一张来等等，但是我如何访问所有这些图像以及如何将文件转换为我可以裁剪的图像？