jQuery 文件上传插件 - 多种图像分辨率

Question

我正在使用 jQuery 文件上传插件在客户端浏览器中上传图像并调整图像大小。但是，当我尝试生成多个图像分辨率(生成多个图像版本并将每个图像版本上传到服务器)时，我得到的图像仅具有 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)函数:

).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 函数之前。