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

【问题标题】：Convert image data to render an image in the browser转换图像数据以在浏览器中渲染图像
【发布时间】：2015-06-06 18:34:39
【问题描述】：

我正在尝试通过带有 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_PROFILEHLinomntrRGB XYZ � 1acspMSFTIEC sRGB��-HP cprtP3desc�lwtpt�bkptrXYZgXYZ,bXYZ@dmndTpdmdd��vuedL�view�$lumi�meas$tech0rTRChttp://www.iec.chIEC http://www.iec.chdesc.IEC 61966-2.1 默认RGB 色彩空间 - sRGB.IEC 61966-2.1 默认 RGB 色彩空间 - sRGBdesc，IEC61966-2.1 中的参考查看条件，IEC61966-2.1 中的参考查看条件查看��_.��\�XYZ L VPW�meas�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.......>'

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

【问题讨论】：

标签： ajax image amazon-s3 coffeescript binary

【解决方案1】：

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

btoa (base64) 用于二进制数据，而不是 URI。在 jpeg blob 上调用 encodeURIComponent 会造成乱码，我有点惊讶它居然能正常工作。

删除该调用应该可以解决您的问题。

【讨论】：