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

我在使用AMD/RequireJS的.NET项目上使用Blueimp文件上传。我目前只上传图片，并希望在图片上传前在页面上显示预览。这是图书馆的本地功能，似乎工作正常。Blueimp文件上传 - 预览图像像素化

问题是，当我将“previewMaxWidth”和“previewMaxHeight”选项设置为超过80像素（默认值）时，预览图像总是模糊/像素化。因此，将这2个选项设置为例如220像素创建一个220像素的画布，但内部的图像是像素化的，就像它从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) { 
    // ... 
});

在此先感谢！

来源

2014-10-29 Andre Silva

事实证明，我测试的所有图像都有一个作为元数据嵌入的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) { 
    ... 
});

来源

2014-10-30 13:02:43

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

回答

相关问题