显示直接用chunkypng创建的图像(无保存)

Question

所以我用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 %>" />

调试@img变量,raise @img.to_yaml 输出正确的字符串,fe:

--- !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标记中可正确显示图像.

这里有什么想法吗？直接显示此图像而不保存的其他想法？

提前致谢!如果有什么不清楚,请发表评论.

Answer 1

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.

Answer 2

@wvanbergen 的方式给了我一些错误，但我做了一点改变，它起作用了。

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

    #view
    <%= image_tag @png %>