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

Question

我正在使用 AMD/RequireJS 在 .NET 项目上使用 Blueimp 文件上传。我目前仅上传图像，并且希望在上传图像之前在页面上显示预览。这是该库的 native 功能，并且似乎工作正常。

问题是，当我将“previewMaxWidth”和“previewMaxHeight”选项设置为超过 80 像素(默认值)时，预览图像总是模糊/像素化。因此，将这两个选项设置为例如220 像素创建一个 220 像素的 Canvas ，但内部图像是像素化的，就好像它是从 80 像素放大的一样。

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

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

检查here进行视觉演示。下面是我的代码:

$(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 File Upload 默认使用该缩略图在浏览器上预览图像，而不是加载和缩小实际的主图像。

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

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

或

2) 禁止 Blueimp 使用 EXIF 缩略图；创建文件上传对象时，将“disableExifThumbnail”选项设置为 false:

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