轉換圖像數據以在瀏覽器中呈現圖像

我試圖通過帶有AJAX的presigned_link從Amazon S3下載加密的圖像文件，並且正在獲取一堆圖像數據亂碼。轉換圖像數據以在瀏覽器中呈現圖像

$(document).on 'click', '.js-download', (event) -> 
event.preventDefault() 

$.ajax 
    type: "GET" 
    url: event.currentTarget.href 
    contentType: 'image/jpeg', 
    headers: { 
    'x-amz-server-side-encryption-customer-algorithm': 'AES256', 
    'x-amz-server-side-encryption-customer-key': customer_key, 
    'x-amz-server-side-encryption-customer-key-MD5': customer_key_md5, 
    } 
    success: (data) -> 
    convert_to_image(data)

ajax數據導致一堆圖像數據。

JFIFHHXICC_PROFILEHLinomntrRGB XYZ 1acspMSFTIEC的sRGB-HP cprtP3desclwtptbkptrXYZgXYZ，bXYZ @ dmndTpdmddvuedLview $ lumimeas $ tech0rTRC < GTRC < BTRC < textCopyright（C ）1998 Hewlett-Packard CompanydescsRGB IEC61966-2.1sRGB IEC61966-2.1XYZ Q XYZXYZ 8 XYZb XYZ$ descIEChttp://www.iec.ch IEC http://www.iec.ch desc.IEC 61966-2.1默認RGB顏色空間 - sRGB.IEC 61966-2.1默認RGB色彩空間 - sRGBdesc，IEC61966-2.1中的參考觀看條件，IEC61966-2.1view _. 中的參考觀看條件\ XYZLVPW meas sigCRT curv .. ......

拿到dat後a，我試圖將圖像數據字符串轉換爲將在頁面上呈現的jpg圖像格式。

convertToImage(imageData) -> 
    data = 'data:image/jpeg,' + btoa(encodeURIComponent(imageData)) 
    img = document.createElement('img') 
    img.src = data 
    a = document.createElement('a') 
    a.setAttribute("download", "image.jpeg") 
    a.setAttribute("href", data) 
    a.appendChild(img) 
    document.body.appendChild(a) 

The link returns: 
'<img src="data:image/jpeg,JUVGJUJGJUJEJUVGJUJGJUJEJUVGJUJGJUJEJUVGJUJ.......>'

圖像顯示不正確。我一直在嘗試各種其他方法來轉換圖像數據，但它不起作用。任何幫助，將不勝感激。

來源

2015-04-01 Andy Kwong

這不是圖像數據字符串。它是一種JPEG格式的二進制圖像數據blob，（顯然）其頭部中恰好有一些字符串。

btoa（base64）用於二進制數據，而不是URI。在jpeg blob上調用encodeURIComponent會讓它變得難以理解，而且我有點驚訝它可以工作。

刪除該呼叫應該可以解決您的問題。

來源

2015-04-03 06:12:47 Cheezmeister

轉換圖像數據以在瀏覽器中呈現圖像

回答

相關問題