Ajax 转换图像数据以在浏览器中渲染图像

我正试图从AmazonS3下载一个加密的图像文件，通过一个带有AJAX的预先签名的链接，得到一堆乱七八糟的图像数据

$(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数据生成一组图像数据

���� JFIFHH��XICC U简介 HLino  mntrRGB XYZ� 1acspMSFTIEC sRGB���-HP cprtP3desc�lwtpt�bkptrXYZgXYZ，bXYZ@dmndTpdmdd��威德尔�看法�$卢米�meas $tech0  rTRC< gTRC< bTRC< text版权所有（c）1998惠普公司SCSRGB IEC61966-2.1sRGB IEC61966-2.1XYZ�Q�xyzxyzo�8.��XYZ b����XYZ$����descIEC IEC desc.IEC 61966-2.1默认RGB颜色空间-sRGB.IEC 61966-2.1默认RGB颜色空间-sRGBdesc，IEC61966-2.1中的参考查看条件，IEC61966-2.1中的参考查看条件视图��_.���\�XYZ L VPW�梅斯�sig CRT曲线

获取数据后，我将尝试将图像数据字符串转换为将在页面上呈现的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.......>'

convertToImage（图像数据）->
数据='数据：图像/jpeg'，+btoa（编码组件（图像数据））
img=document.createElement（'img'）
img.src=数据
a=document.createElement（'a'）
a、 setAttribute（“下载”，“image.jpeg”）
a、 setAttribute（“href”，数据）
a、 附加儿童（img）
document.body.appendChild（a）
链接返回：
''

---

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

这不是图像数据字符串。这是一个JPEG格式的二进制图像数据块，它（显然）的头中碰巧有一些字符串

btoa

（）用于二进制数据，而不是URI。在jpeg blob上调用

encodeURIComponent

会使它变得混乱，我有点惊讶它居然能工作

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