转换图像数据以在浏览器中呈现图像

问题描述：

我试图通过带有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.......>'

图像显示不正确。我一直在尝试各种其他方法来转换图像数据，但它不起作用。任何帮助，将不胜感激。

答

这不是图像数据字符串。它是一种JPEG格式的二进制图像数据blob，（显然）其头部中恰好有一些字符串。

btoa（base64）用于二进制数据，而不是URI。在jpeg blob上调用encodeURIComponent会让它变得难以理解，而且我有点惊讶它可以工作。

删除该呼叫应该可以解决您的问题。

转换图像数据以在浏览器中呈现图像

相关推荐