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 图像

分辨率为3000x2000的图片
分辨率为1280x853的图片
分辨率为1024x683的图片

但是，我得到 4 图片

分辨率为1024x683的图片
分辨率为1024x683的图片
分辨率 1280x853
分辨率为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函数之前。

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

1 个答案: