Rails3:在视图中渲染内存中的图像

时间:2011-08-25 21:18:15

标签: ruby-on-rails-3 image sparklines retained-in-memory

我有一个rails应用程序,它在控制器的内存中有一个由spark_pr生成的png文件。

@pngfile << Spark.plot( [47, 43, 24, 47, 16, 28, 38, 57, 50, 76, 42, 20, 98, 34, 53, 1, 55, 74, 63, 38, 31, 98, 89], :has_min => true, :has_max => true, 'has_last' => 'true', 'height' => '40', :step => 10, :normalize => 'logarithmic' )
@user=User.all.first

我想在我的视图中渲染这个png文件,即app / views / users / show.html.erb,它有Rails脚手架生成器生成的标准内容,它显示@user的各种属性。

如何在视图中呈现此内存文件(@pngfile)?我不想保存文件,也不想为该文件提供临时URL。我已经在HTML页面上看到了这一点,其中内嵌图标是从二进制blob渲染的,所以我知道这是可能的。但我无法弄清楚使用Rails视图助手的神奇咒语使这成为可能。

-----------编辑:更多信息-------------------------

This site提供了有关如何嵌入网址的更多信息。文件夹图标的代码如下所示:

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 
width="16" height="14" alt="embedded folder icon">

我在我的视图中嵌入了这个确切的代码,它适用于Chrome,Firefox和IE9。

所以我尝试用我的火花情节做这个。

在我的Rails控制器中,我这样做了:

    @pngfile = Base64.encode64 Spark.plot( [47, 43, 24, 47, 16, 28, 38, 57, 50, 76, 42, 20, 98, 34, 53, 1, 55, 74, 63, 38, 31, 98, 89], :has_min => true, :has_max => true, 'has_last' => 'true', 'height' => '40', :step => 10, :normalize => 'logarithmic' )

在我看来,我尝试了一些不同的技巧

<%=image_tag "data:image/png;base64,"+@pngfile %>

<%=image_tag "data://image/png;base64,"+@pngfile %>

<img src=<%="data:image/png;base64,"+@pngfile %>  ></img>

<img src=<%=raw("data:image/png;base64,"+@pngfile) %>  ></img>

他们都失败了,除了第二个,它在Chrome和Firefox中有效,但不在IE9中。 第一个应该有效,但是image_tag助手的代码默认情况下会将“/ images /”添加到我的URL,即使它是一个直接的数据URL。我知道这是因为我试图在不同的标签中查看图像,但它失败了。但当我剥离“/ images /”部分时,它工作正常。 我不知道为什么第二个有效。我只是随心所欲地试了一下。 第三个失败了,因为看起来字符串的一部分由于特殊字符而被打破。我尝试在第四个中使用原始字符串,但它也不起作用。

此时,我很难过。我是否尝试使用Monkey-patch image_tag,以便它不会为数据添加内容:嵌入图像的URL,或者我是否使用字符串做一些时髦的事情,以便它像视图示例3或4一样正确呈现?

1 个答案:

答案 0 :(得分:5)

我刚遇到类似的问题。就我而言,我在base64_image中定义了application_helper

def base64_image image_data
  "<img src='data:image/png;base64,#{image_data}' />".html_safe
end

因此,在您的情况下,您只需使用此代替image_tag

base64_image(@png_file)