使用ChunkyPNG创建的图像如何直接显示(无需保存)?

12

我使用 chunky_png 创建了一个PNG图像。因为这个图像只有在这个请求中有用,所以我不想保存它,而是试图将其保存为实例变量并在我的视图中显示。

问题是,这会导致我的视图出现invalid byte sequence in UTF-8错误。

我的做法:

# controller
@img = source_img.resize(200, 200).to_string

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

使用raise @img.to_yaml来调试@img变量,会输出正确的字符串,例如:

--- !binary |-
    iVBORw0KGgoAAAANSUhEUgAAAMgAAADIAQAAAACFI5MzAAACP0lEQVR4nO1Y
    QY6jQAy0AxJ9a34AH8l29lmRhgDJSDxrwsxHmh80N5Ag3urkjFZabTw5TJ+g
    HclWUa6ys5Ots6Ot8xP5/xFhnJIGxo/GdDD9HC+al6iNMpGFVie3kXOiyZET
    8bq49cAipRn5bVXOB+CVPiXPXyMRhQb1PDvPRmQZAMWOam/cN1TgpKFEyIVT
    pENLDF6oVoCuSCkdSIokEJnICy41K+AojX4psutY5+8011m80O1T4YpXxsOJ
    3mjqo2A8Jc+/RD7txVNhWFrJPDnTF41uBfPvoXKJHw/jjt7QLMThqKuj2Ufe
    +bUEFDeigtykr1UsVQkT2TP0cjA0H6wuR4VPkKilmMCDACjISmhLXc/64Ap+
    mp3RJZ3IFTVpe9aXXHxawKzOY/Ss8WCVHX2u7hjYNa/yxNsWSrEULzJT0Cd1
    XgToXEDWx/WgWRtPHKkZGSJ86ccDHjqvy9E1ryHfKORkmwJ+5u7NoqoUoXXQ
    axqTYS6Ng2jWukoBD6/7qI+2sc2AmUIKLnUxkHzFMDURVXdHx3hT97pd8hU6
    v9B8Ghs0qOnhIO9PybMZQRuumKTM42Ii3o2zew2lYLnBvRKP9ryErjeEd10/
    fexmaznti8ZWbopoJV5XKeIGJp6TUEEyDGVXZbV8bGCMqRPbTyQnlpDjNzAk
    gZXbNhxLINKH5+XZjsxsJD8DAwjGPtf+CnEDI8xVIX4HQ4aDtlLEDSzx5hdk
    M77FuUp5/9mKPHazu5LX97+wMH42qhX8RP4AQpEyh+7r4x0AAAAASUVORK5C
    YII=

将这个字符串手动复制到img标签中可以正确显示图片。

有什么想法出了问题吗?还有其他直接显示此图像而无需保存的方法吗?

提前感谢!如果有不清楚的地方,请留言。


你尝试过将 to_yaml 添加到你的 src 属性中吗? - Yule
@Yule .to_yaml 不会导致我的应用程序崩溃,但是由于yaml格式化的原因,图片当然不会被显示。 - choise
有点取巧,但是 .to_yaml.to_s 怎么样? - Yule
不,不行。可行的方法是.to_string.to_yaml.gsub('--- !binary |-',''),但我认为那是最糟糕的做法。 - choise
2个回答

24

ChunkyPNG实际上已经内置了一个函数来完成这个任务:to_data_url

# controller
@img = source_img.resize(200, 200)

# view
<img src="<%= @img.to_data_url %>" />

实现方式如下:

['data:image/png;base64,', @img.to_blob].pack('A*m').gsub(/\n/, '')

确保你正在使用最新版本的ChunkyPNG。


Rails提供用于显示带数据字符串的图像的辅助方法吗? - choise

5

使用 @wvanbergen 的方法出现了一些错误,但我进行了一些修改后就可以工作了。

    #controller
    @png = qr.to_img.resize(250,250).to_data_url 

    #view
    <%= image_tag @png %>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接