Blueimp文件上传 - 预览图像像素化

Question

我正在使用AMD/RequireJS的.NET项目上使用Blueimp文件上传.我目前只上传图片,并希望在图片上传之前在页面上显示预览.这是图书馆的原生特色,似乎工作正常.

问题是当我将"previewMaxWidth"和"previewMaxHeight"选项设置为超过80像素(默认值)时,预览图像始终模糊/像素化.因此,将这两个选项设置为例如220像素会创建一个220像素的画布,但内部的图像会像素化一样,就像它从80像素放大一样.

我在这里找不到任何类似的问题,但是注意到如果你将"previewMaxWidth"和"previewMaxHeight"更改为我正在使用的相同220px,在实际的Blueimp演示页面中会出现相同的行为.

编辑:问题仅适用于JPG图像.PNG不会模糊/像素化.

点击这里观看视觉演示.以下是我的代码:

$(config.browseButton).fileupload({
    url: "/myEndpointUrl.aspx",
    acceptFileTypes: /(\.|\/)(jpe?g)$/i,
    maxFileSize: 5000000,
    previewMaxWidth: 220,
    previewMaxHeight: 220,
    previewCrop: true,
    dataType: 'json',
    autoUpload: false,
    disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent)
}).on('fileuploadadd', function(e, data) {

    if (data.files && data.files[0]) {
        // Successfully injects the Canvas preview in the DOM
        config.elements.pictureHolder.html(data.files[0].preview);
    } else {
        console.log("No files have been selected");
    }

}).on('fileuploadprocessalways', function(e, data) {
    // ...
}).on('fileuploadprogressall', function(e, data) {
    // ...
}).on('fileuploaddone', function(e, data) {
    // ...
}).on('fileuploadfail', function(e, data) {
    // ...
});

提前致谢!

Answer 1

事实证明,我测试的所有图像都有一个EXIF缩略图作为元数据嵌入,Blueimp文件上传默认使用它来预览浏览器上的图像,而不是加载和缩小实际的主图像.

有两种方法可以避免此问题:

1)使用以下方法之一从文件元数据中删除EXIF缩略图; 您通常可以通过简单地将其重新保存在Photoshop或类似文件上来创建图像文件的无元数据副本.

要么

2)禁止Blueimp使用EXIF缩略图; 在创建fileupload对象时将"disableExifThumbnail"选项设置为false:

$(config.browseButton).fileupload({
    ...
    previewMaxWidth: 220,
    previewMaxHeight: 220,
    ...
    disableExifThumbnail: true,
    ...
}).on('fileuploadadd', function(e, data) {
    ...
});