17

I'm looking for a way to convert html tags to a image on the fly...

That means, that I want to be able to make a image_tag with a path to a method which returns the image created form html.

I was looking for a solution on that, but couldn't come up with a proper way to solve that...

Any Ideas?

Maechi

Markus
  • 3,948
  • 8
  • 48
  • 64
  • 2
    After reading this twice, I'm still confused what you're trying to accomplish. – tybro0103 Dec 30 '10 at 18:12
  • Please let everyone know: 1) Why and 2) what tag types are you talking about? – jschorr Dec 30 '10 at 18:26
  • Is the image an image _of_ some html code showing a set of tags, an image of a page as it would render in a particular browser, or are you trying to take a particular part of the page, say a paragraph tag and turn that into an image that displays that paragraph as an image - a text to image generator effectively. Or is it something else entirely? – stef Dec 31 '10 at 15:34
  • 3
    I'm interested in this too. I'd like to 1) render a page in html 2) convert the page into a jpeg 3) return the jpeg from the service call All in real time – John Hinnegan Mar 02 '11 at 03:20
  • Follow this link http://stackoverflow.com/questions/14208403/rails-imgkit-issues-in-exporting-images-with-html-and-css – Lalit Kumar Maurya Mar 20 '13 at 11:04

5 Answers5

33

IMGkit can do the job (details on github)

Create JPGs using plain old HTML+CSS

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

or in your controller

@kit = IMGKit.new(render_as_string)

format.jpg do
  send_data(@kit.to_jpg, :type => "image/jpeg", :disposition => 'inline')
end
denisjacquemin
  • 7,414
  • 10
  • 55
  • 72
  • what render_as_string without any parameters? I dont get it..could anybody point me somewhere? And should be render_to_string? In any cases, what does it do? – Jakub Kuchar Mar 28 '13 at 10:09
  • Could you edit one of those 'kit' into a File in order to send it via FTP? – Luis Ortega Araneda Apr 18 '13 at 16:40
  • @JakubKuchar http://api.rubyonrails.org/classes/AbstractController/Rendering.html#method-i-render_to_string The first arg can be a path to the view you want to render as string, for example 'orders/summary'. The docs say it best: _It is similar to render, except that it does not set the response_body and it should be guaranteed to always return a string_. – Rafał Cieślak Mar 31 '15 at 16:22
  • If you are looking to convert a HTML into a *tiff* file `IMGKit` won't be enough as *tiff* support has been removed from the underlying `wkhtmltoimage` application. Relevant commit: https://github.com/csquared/IMGKit/commit/378a8ae11d94afd012b0fee7839da9910a19ffb2 – RajaRaviVarma Mar 18 '20 at 12:09
  • 1
    it's `render_to_string` now (rails 7 at least) – Dorian Jan 11 '22 at 21:46
1

IMGKIT reqiured css with absolute url for any background image or other assets. So you can generate it dynamically following this link https://coderwall.com/p/exj0ig and some steps as

A) Put your all images in assets/images folder of rails app

B) Install gem 'sass-rails' if not install https://github.com/rails/sass-rails

C) create another css file name as css_file_name.css.sccs.erb

D) put your all other css file content in it.

E) In css file just put your image file name as below: background-image: image-url('image.png');

F) Use assets pipline (http://guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline) Run below command as your app mode: (1) Development Mode: RAILS_ENV=development bundle exec rake assets:precompile (2) Production Mode: RAILS_ENV=production bundle exec rake assets:precompile

G) In your config/environments/

(1) In development.rb config.action_controller.asset_host = "YOUR LOCAL HOST URL i.e YOUR_LOCALHOST_ADDRESS"

(2) In production.rb config.action_controller.asset_host = "http://assets.example.com" /YOUR ADDRESS/

H) And last relate your stylesheet with IMGKIT as below

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) Restart server and enjoy!!!!!

[NOTE: After every changes please run assets pipline command to get latest application.css which is made from .sccs.erb extension file.]

Lalit Kumar Maurya
  • 5,475
  • 2
  • 35
  • 29
1

I'm going to take a wild guess here and guess that you want to convert HTML to an image, so take a "snapshot" of a web page or something. I'm not sure exactly how to do this in one step, but one way to do it is to use PDFKit to convert to PDF and then use RMagick to convert to whatever image format you want.

sarahhodne
  • 9,796
  • 3
  • 39
  • 44
0
  1. write a regular action, such as render_html_action to render html page
  2. write another action, such as snapshot_action, using puppeteer-ruby to snapshot the render_html_action rendered html as jpg or pdf
new2cpp
  • 3,311
  • 5
  • 28
  • 39
0

I would recommend looking at Grover - Uses Puppeteer under the hood.

I would caution against using IMGKit given that wkhtmltoimage is essentially depreciated. Wkhtmltopdf is based on QtWebkit which is long deprecated. We found numerous issues with wkhtmltoimage, as an example some modern CSS (like flexbox) is not supported.

Jeremy Lynch
  • 6,780
  • 3
  • 52
  • 63