转换图像数据以在浏览器中呈现图像 [英] Convert image data to render an image in the browser

问题描述

我正尝试通过AJAX的presigned_link从Amazon S3下载加密的图像文件，并且出现了一堆图像数据乱七八糟的情况.

I am trying to download an encrypted image file from Amazon S3 through a presigned_link with AJAX, and is getting a bunch of image data gibberish.

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

The ajax data results in a bunch of image data.

? gTRC ＜ bTRC ＜文字版权(c)1998 Hewlett-Packard CompanydescsRGB IEC61966-2.1sRGB IEC61966-2.1XYZ Q QXYZ XYZ o8 XYZb XYZ$?descIEC http://www.iec.ch desc.IEC 61966-2.1默认RGB颜色空间-sRGB.IEC 61966-2.1默认RGB颜色空间-sRGBdesc，IEC61966-2.1中的参考查看条件，IEC61966-2.1view中的参考查看条件?? \.XYZ L VPW.sig CRT曲线........

����JFIFHH��XICC_PROFILEHLinomntrRGB XYZ � 1acspMSFTIEC sRGB���-HP cprtP3desc�lwtpt�bkptrXYZgXYZ,bXYZ@dmndTpdmdd��vuedL�view�$lumi�meas$tech0rTRC<gTRC<bTRC<textCopyright (c) 1998 Hewlett-Packard CompanydescsRGB IEC61966-2.1sRGB IEC61966-2.1XYZ �Q�XYZ XYZ o�8��XYZ b����XYZ $����descIEC http://www.iec.chIEC http://www.iec.chdesc.IEC 61966-2.1 Default RGB colour space - sRGB.IEC 61966-2.1 Default RGB colour space - sRGBdesc,Reference Viewing Condition in IEC61966-2.1,Reference Viewing Condition in IEC61966-2.1view��_.���\�XYZ L VPW�meas�sig CRT curv........

获取数据后，我试图将图像数据字符串转换为将在页面上呈现的jpg图像格式.

After getting the data, I'm trying to convert the image data string to jpg image format that will render on the page.

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.......>'

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

The image is not showing up correctly. I've been trying various other methods to convert the image data, but it's not working. Any help would be appreciated.

推荐答案

这不是图像数据字符串.这是JPEG格式的二进制图像数据blob，(显然)标头中包含一些字符串.

That's not an image data string. It's a binary image data blob in the JPEG format, which (evidently) happens to have some strings in its header.

btoa( base64 )用于二进制数据，而不是URI.在jpeg blob上调用encodeURIComponent会使它显示乱码，我对此感到很惊讶.

btoa (base64) is for binary data, not URIs. Calling encodeURIComponent on a jpeg blob will garble it, and I'm kind of surprised it works at all.

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

Removing that call should fix your problem.

这篇关于转换图像数据以在浏览器中呈现图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！