如何在浏览器中将png数据显示为图像？

Question

以下是数据的摘录：

  

\ x89PNG \ r \ n \ X1A \ n \ X00 \ X00 \ X00 \ rIHDR \ X00 \ X00 \ x01J \ X00 \ X00 \ X00 \ XA0 \ B \ X02 \ X00 \ X00 \ X00 \ xE5 \ XE3 \ XB2 \ X02 \ X00 \ X00 \ X00 \ x86zTXtRaw   档案类型   EXIF \ X00 \ x00x \ xDAU \ x8E [\ n \ xC40 \是\ XFF] \ XC5，\ xC1W4'\ X94 \ X06 \ XBA \ X83 \ 0x7F部分\ x94d \ xE8 \ XF4。| \ xE8 \ xE5 \” \一个\ XE1 \ XBC \ XAF \吨\ x9F \ X82 \ x90A \ x9Bw \ v3L44xd \ xE8 \ XB8 \ x10Db \ XA4 \ xDA9 \ X17 {\已经\ XE2 \ XA7 \ X06 \ XE1 \ X15，\ XBA \ XA3＆GT ; \的x87 \ XBA \ XFB \ x1FM \ XAC \ xDBtu \ xB7f \的x87 \ X1D \ x9Cv＆GT;？\ X85 \ XA4 \ xE5，QY \ XB1 \ XDE \ X88 \ xC9 \ xD8I \ XDE \ xFDx \ XBB \ X11 \ xBEK \ X01，TP;吨\ XCD \ X00 \ X00 \吨\ xECiTXtXML：com.adobe.xmp \ X00 \ X00 \ X00 \ X00 \ X00 \ n \ n   http://www.w3.org/1999/02/22-rdf-syntax-ns#\">\n      的xmlns：EXIF = \ “http://ns.adobe.com/exif/1.0/\” \ n
  的xmlns：TIFF = \ “http://ns.adobe.com/tiff/1.0/\” \ n
  exif：PixelXDimension = \“330 \”\ n exif：PixelYDimension = \“160 \”\ n
  tiff：ImageWidth = \“1 \”\ n tiff：ImageHeight = \“160 \”/＆gt; \ n   \ n \ n
   \ n \ XFA \ XA4 \

我不知道我需要做什么才能在浏览器中显示它。它的格式错误，但我对图像格式化一无所知。我确定我只需将其转换为某种东西。

这样做：

<img src="<%= **the above data** %>" />

不起作用：

那么我需要对这些数据做些什么才能让它显示出来？我在轨道上使用红宝石，所以我可以使用它的所有方法。

此数据是通过read方法捕获的。

Answer 1

HTML页面中的预期格式为

<img src="data:image/png;base64,???" />

其中???是转换为base 64的图像文件内容。

您应该使用帮助程序在base 64中进行编码

require "base64"
...
def encode_image_b64(raw_image)
  Base64.strict_encode64(raw_image)
end 

在erb文件中：

<img src="data:image/png;base64,<%= encode_image_b64(**image data**) %>" />

您可以在Wikipedia上找到更多信息，数据URI的优缺点以及Ruby示例。

Answer 2

执行此操作的一种方法是执行以下操作： 在视图中

<img src="/get_img/tlotr">

这将向服务器发出请求，因此在routes.rb中添加

get '/get_img/:filename' => 'test#img'

在我的情况下，我有一个带有动作调用img的TestController，如：

def img
  send_file( "/your_path/#{params[:filename]}.png",
    :disposition => 'inline',
    :type => 'image/png',
    :x_sendfile => true )
end

使用此解决方案，您可以再次访问服务器，但您不必使用read方法发送数据。

Answer 3

你可以这样做：

<img src="data:image/png;base64,your image data here"/>