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文件上傳 - 預覽圖像像素化

回答

相關問題