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

【问题标题】：Blueimp File Upload - preview image pixelatedBlueimp 文件上传 - 预览图像像素化
【发布时间】：2014-12-25 05:21:55
【问题描述】：

我在一个带有 AMD/RequireJS 的 .NET 项目上使用 Blueimp 文件上传。我目前只上传图片，并希望在上传图片之前在页面上显示预览。这是库的原生功能，似乎运行良好。

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

我在这里找不到任何类似的问题，但注意到如果您将“previewMaxWidth”和“previewMaxHeight”更改为我使用的相同的 220 像素，实际 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) {
    // ...
});

提前致谢！

【问题讨论】：

标签： javascript jquery upload image-uploading blueimp

【解决方案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) {
    ...
});

【讨论】：