jQuery File Upload Plugin - 多种图像分辨率

Question

我正在使用 jQuery File Upload 插件在客户端浏览器中上传和调整图像大小。但是，当我尝试生成多个图像分辨率（生成多个图像版本并将每个版本上传到服务器）时，我得到的图像仅具有 processQueue 中最后两个 resizeImage 查询中指定的分辨率。我使用了插件的wiki 中建议的代码。我的代码如下：

//code for duplicating the image - from wiki of the upload plugin
$.blueimp.fileupload.prototype.processActions.duplicateImage = function (data, options) {
    if (data.canvas) {
        data.files.push(data.files[data.index]);
    }
    return data;
};

$('.fileupload').fileupload({
    dataType: 'json',
    maxChunkSize: 500000,
    maxFileSize: 33554432,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    loadImageMaxFileSize: 33554432,

    disableImagePreview: true,

    disableImageResize: false,
    disableImageMetaDataSave: true,

    //the processQueue code, as suggested in the wiki of the plugin
    processQueue: [
        {
            action: 'loadImage',
            fileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            maxFileSize: 33554432
        },
        {
            action: 'resizeImage',
            maxWidth: 3000,
            maxHeight: 3000
        },
        {action: 'saveImage'},
        {action: 'duplicateImage'},
        {
            action: 'resizeImage',
            maxWidth: 1280,
            maxHeight: 1280
        },
        {action: 'saveImage'},
        {action: 'duplicateImage'},
        {
            action: 'resizeImage',
            maxWidth: 1024,
            maxHeight: 1024
        },
        {action: 'saveImage'}
    ],

    done: function (e, data) {
        //handling of finished upload
    })
    .bind('fileuploadadded', function (e, data) {
            data.submit();
    })
})

当使用此代码缩小分辨率为 6000x4000 的图像时，预期结果将是 3 个图像

1. 分辨率为 3000x2000 的图像
2. 分辨率为 1280x853 的图像
3. 分辨率为 1024x683 的图像

但是，我得到 4 张图片

1. 分辨率为 1024x683 的图像
2. 分辨率为 1024x683 的图像
3. 图像分辨率1280x853
4. 分辨率为 1024x683 的图像

这对我来说似乎很奇怪。我猜问题出在 duplicateImage 函数中，但我不知道可能出了什么问题。

Answer 1

我也在做同样的事情。我的工作正常，它创建了3个不同的版本。我只是没有像你最后那样写任何绑定函数：

).bind('fileuploadadded', function (e, data) {
   data.submit();
})

但我将$.blueimp.fileupload::options.add.call this, e, data 添加到我的add: 函数中，以及

$.blueimp.fileupload::processActions.duplicateImage = (data, options) ->
  if data.canvas
    data.files.push data.files[data.index]
  data

在表单元素的fileupload 函数之前。