Generate PNG previews for HTML snippets (html/css/js). Any complexity.
MIT License
Let's start with sample of what this gem can do (below are the images of generated previews):
Demo: https://www.youtube.com/watch?v=Lso-B_fayhw
If you need to generate complex images, previews, charts or basically represent any HTML snippet - this gem could help.
It's using a Chrome(headless) to convert any HTML to PNG.
If you want to try, you just need a 5 min to see how it works. Gem is comming with an examples which you can modify and use in your real app.
gem "omg_image"
google-chrome --version
)rails g omg
in apprake db:migrate
app/omg/simple.html.erb
app/views/home/index.html.erb
and put: <%= image_tag OmgImage::Processor.new('entity', key: 'xxx', title: "OMG,<br/>this looks interesting!", tags: ['This', 'is', 'a', 'sample'], description: "Change me please", size: '600,300').cached_or_new %>
<br/>
<%= image_tag OmgImage::Processor.new('entity', title: "OMG,<br/>this looks interesting!", description: "Small version", size: '400,200').cached_or_new(regenerate: true) %>
<br/>
<%= image_tag OmgImage::Processor.new('square', title: "Real-time generation", size: '200,200').cached_or_new %>
Also, for example you can do it on generate images directly in the models:
class Post < ApplicationRecord
has_one_attached :preview
# just an example
def Post.create_new_preview
processor = ::OmgImage::Processor.new('entity', title: "OMG,<br/>this is created from model", description: "Small version", size: '400,200')
processor.with_screenshot do |screenshot|
post = Post.new
post.preview.attach(io: File.open(screenshot.path), filename: "image.png", content_type: "image/png")
post.save!
end
end
end
To create a new template - basically create a new file in app/omg/<name>.html.erb
. Put any HTML/CSS into it. And use as described above.
Add this line to your application's Gemfile:
gem 'omg_image'
And then execute:
$ bundle
key
and you can obtain them by OmgImage::Image.find_by(key: key)
key
key
.cached_or_new(regenerate: true)
pass this option with true value if you want to regenerate imagesudo apt install gdebi-core
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo gdebi google-chrome-stable_current_amd64.deb
google-chrome --version
parents_of_dead_kids=$(ps -ef | grep [d]efunct | awk '{print $3}' | sort | uniq | egrep -v '^1$'); echo "$parents_of_dead_kids" | xargs kill
You are welcome to contribute.
I've noticed that in a past that articles on dev.to site without images when you sending a link in skype or sharing in FB have have nice preview, so I've implemented similar solution :)
The gem is available as open source under the terms of the MIT License.