Question

我正在尝试通过带有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数据会产生一堆图像数据。

JFIFHH XICC_PROFILEHLinomntrRGBXYZ 1acspMSFTIECsRGB -HPcprtP3desc lwtpt bkptrXYZgXYZ，bXYZ @dmndTpdmdd vuedL view $lumi meas$ tech0rTRC＆lt; gTRC＆lt; bTRC＆lt; textCopyright（c） 1998 Hewlett-Packard CompanydescsRGB IEC61966-2.1sRGBIEC61966-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 _. \ XYZ中的参考查看条件VPW meas sigCRTcurv ........

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

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

Answer 1

那不是图像数据字符串。它是JPEG格式的二进制图像数据blob，（显然）在其标题中恰好有一些字符串。

btoa（base64）用于二进制数据，而不是URI。在一个jpeg blob上调用encodeURIComponent会使它变得混乱，而且我有点惊讶它的工作原理。

删除该通话应该可以解决您的问题。

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

1 个答案: