Rails将HTML转换为图像

Question

我正在寻找将html标签即时转换为图像的方法...

也就是说，我想能够创建一个带有指向从html创建的图像的方法路径的image_tag。

我一直在寻找解决方案，但是没有找到合适的方法来解决这个问题...

有任何想法吗？

Maechi

- Markus

---

读了两遍之后，我仍然不明白你想要实现什么。 - tybro0103

请让大家知道：1）你在谈论什么标签类型以及2）为什么要谈论它们？ - jschorr

这个图片是展示一组标签的HTML代码的图片，还是展示页面在特定浏览器中呈现的图片，或者你想将页面的某个特定部分（比如段落标签）转换成图片，以图像形式显示该段落 - 实际上是一个文本到图像生成器。还是完全不同的东西？ - stef

我也对此感兴趣。我想要： 1）将页面渲染为HTML。 2）将页面转换为JPEG格式。 3）从服务调用中返回JPEG图片。 全部都需要实时完成。 - John Hinnegan

请点击此链接 https://dev59.com/z4Ths4cB2Jgan1znFwIn。 - Lalit Kumar Maurya

Answer 1

IMGkit能够胜任这项任务 (查看Github详情)

使用纯旧HTML+CSS创建JPGs

kit = IMGKit.new('http://google.com')
kit.to_jpg
kit.to_jpeg 
kit.to_png
kit.to_tif
kit.to_tiff

或者在你的控制器中

@kit = IMGKit.new(render_as_string)

format.jpg do
  send_data(@kit.to_jpg, :type => "image/jpeg", :disposition => 'inline')
end

- denisjacquemin

---

render_as_string没有任何参数是什么意思？我不明白...有人能指点一下吗？难道应该是render_to_string吗？无论如何，它是用来做什么的？ - Jakub Kuchar

你能否将其中一个“kit”编辑为一个文件，以便通过FTP发送它？ - Luis Ortega Araneda

@JakubKuchar http://api.rubyonrails.org/classes/AbstractController/Rendering.html#method-i-render_to_string 第一个参数可以是要呈现为字符串的视图路径，例如“orders/summary”。文档说得最好：“它类似于render，但它不设置response_body，并且应该保证始终返回一个字符串。” - Rafał Cieślak

如果您想将HTML转换为tiff文件，IMGKit是不够的，因为底层的wkhtmltoimage应用程序已经删除了对tiff的支持。相关提交：https://github.com/csquared/IMGKit/commit/378a8ae11d94afd012b0fee7839da9910a19ffb2 - RajaRaviVarma

现在是render_to_string（至少在Rails 7中）。 - Dorian

Answer 2

IMGKIT需要使用绝对URL的CSS来引用背景图像或其他资产。因此，您可以根据以下链接https://coderwall.com/p/exj0ig动态生成它，并按照以下步骤进行操作：

A）将所有图像放入Rails应用程序的assets/images文件夹中

B）如果未安装，请安装gem 'sass-rails' https://github.com/rails/sass-rails

C）创建另一个名为css_file_name.css.sccs.erb的CSS文件

D）将您所有其他CSS文件的内容放入其中。

E）在CSS文件中只需将图像文件名放入如下位置： background-image: image-url('image.png');

F) 使用资产通道 (http://guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline) 根据您的应用程序模式运行以下命令： (1) 开发模式：RAILS_ENV=development bundle exec rake assets:precompile (2) 生产模式：RAILS_ENV=production bundle exec rake assets:precompile

G) 在 config/environments/ 中：

(1) 在 development.rb 文件中： config.action_controller.asset_host = "YOUR LOCAL HOST URL i.e YOUR_LOCALHOST_ADDRESS"

(2) 在 production.rb 文件中： config.action_controller.asset_host = "http://assets.example.com"/YOUR ADDRESS/

H) 最后，请将样式表与 IMGKIT 关联，如下所示:

html_content = "YOUR HTML CONTENT"
kit = IMGKit.new(html_content, height: 900, transparent:true, quality:10) /*YOUR SETTING*/
kit.stylesheets << "#{Rails.root}/public/assets/application.css"
file = kit.to_file(Rails.root + "public/pngs/" + "screenshot.png") /*YOUR IMAGE NAME*/
send_file("#{Rails.root}/public/pngs/screenshot.png", :filename => "screenshot.png", :type => "image/png",:disposition => 'attachment',:streaming=> 'true') /*YOUR ADDRESS WHERE U WANT TO STORE PNG FILE*/

I) 重新启动服务器并享受!!!!!

[注意: 在每次更改后，请运行资产管道命令以获取最新的应用程序.css，该文件是从.sccs.erb扩展文件制作的。]

- Lalit Kumar Maurya

Answer 3

我猜你想把HTML转换成图片，比如说截取网页的“快照”。虽然我不确定具体该怎么做，但有一种方法是使用PDFKit将其转换为PDF格式，然后再使用RMagick将其转换为任何你想要的图片格式。

- sarahhodne

---

为了将复杂的HTML页面布局转化为适合电子邮件的布局，有些人会选择这样做。 - David W. Keith

Answer 4

1. 编写一个常规操作，例如 render_html_action 来呈现 HTML 页面
2. 编写另一个操作，例如 snapshot_action，使用 puppeteer-ruby 将 render_html_action 呈现的 HTML 快照为 JPG 或 PDF

- new2cpp

Answer 5

我建议看一下Grover - 在幕后使用Puppeteer。

我建议不要使用IMGKit，因为wkhtmltoimage 基本上已经过时了。Wkhtmltopdf是基于已经被弃用的QtWebkit的。我们发现wkhtmltoimage存在许多问题，例如一些现代CSS（如flexbox）不受支持。

- Jeremy Lynch