Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/igorkasyanchuk/omg_image

Generate PNG previews for HTML snippets (html/css/js). Any complexity.
https://github.com/igorkasyanchuk/omg_image

chrome-headless rails ruby screenshot

Last synced: 15 days ago
JSON representation

Generate PNG previews for HTML snippets (html/css/js). Any complexity.

Host: GitHub
URL: https://github.com/igorkasyanchuk/omg_image
Owner: igorkasyanchuk
License: mit
Created: 2018-09-27T20:17:10.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2023-02-28T13:20:04.000Z (almost 2 years ago)
Last Synced: 2025-01-04T09:29:20.024Z (21 days ago)
Topics: chrome-headless, rails, ruby, screenshot
Language: Ruby
Homepage: https://www.railsjazz.com/
Size: 270 KB
Stars: 28
Watchers: 3
Forks: 2
Open Issues: 15
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: MIT-LICENSE

Awesome Lists containing this project

README

# omg_image

[![RailsJazz](https://github.com/igorkasyanchuk/rails_time_travel/blob/main/docs/my_other.svg?raw=true)](https://www.railsjazz.com)
[![https://www.patreon.com/igorkasyanchuk](https://github.com/igorkasyanchuk/rails_time_travel/blob/main/docs/patron.svg?raw=true)](https://www.patreon.com/igorkasyanchuk)
[![Listed on OpenSource-Heroes.com](https://opensource-heroes.com/badge-v1.svg)](https://opensource-heroes.com/r/igorkasyanchuk/omg_image)

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](https://www.youtube.com/watch?v=Lso-B_fayhw)

[![Sample](https://github.com/igorkasyanchuk/omg_image/blob/master/docs/sample2.png?raw=true)](https://github.com/igorkasyanchuk/omg_image/blob/master/docs/sample2.png?raw=true)

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.

## Usage

- add this gem to Gemfile - `gem "omg_image"`
- make sure you have chrome installed (`google-chrome --version`)
- execute `rails g omg` in app
- execute `rake db:migrate`
- edit sample template `app/omg/simple.html.erb`
- open any view, for example you have `app/views/home/index.html.erb` and put:

```erb
<%= image_tag OmgImage::Processor.new('entity', key: 'xxx', title: "OMG,
this looks interesting!", tags: ['This', 'is', 'a', 'sample'], description: "Change me please", size: '600,300').cached_or_new %>

<%= image_tag OmgImage::Processor.new('entity', title: "OMG,
this looks interesting!", description: "Small version", size: '400,200').cached_or_new(regenerate: true) %>

<%= image_tag OmgImage::Processor.new('square', title: "Real-time generation", size: '200,200').cached_or_new %>
```
- refresh page and see images
- edit/create new previews and use them in any place of your app.

Also, for example you can do it on generate images directly in the models:

```ruby
class Post < ApplicationRecord
has_one_attached :preview
# just an example
def Post.create_new_preview
processor = ::OmgImage::Processor.new('entity', title: "OMG,
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/.html.erb`. Put any HTML/CSS into it. And use as described above.

## Requirements

- Rails App 5+ and Active Storage
- Google chrome (headless)

## Installation

Add this line to your application's Gemfile:

```ruby
gem 'omg_image'
```

And then execute:
```bash
$ bundle
```

## Features

- you can generate images with any complexity (you just need to know html/css)
- store cached versions of preview by `key` and you can obtain them by `OmgImage::Image.find_by(key: key)`
- generate images in background jobs or console applications
- caching for previews by `key`
- ability to refresh preview by `key`

# Options

- `.cached_or_new(regenerate: true)` pass this option with true value if you want to regenerate image

## Google Chrome Installation

- `sudo 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`
- verify chrome is installed `google-chrome --version`

## More about Chrome

- https://linuxize.com/post/how-to-install-google-chrome-web-browser-on-ubuntu-18-04/

## Issues

- if you process too many requests and because of timeouts dead processes may appear. To kill them `parents_of_dead_kids=$(ps -ef | grep [d]efunct | awk '{print $3}' | sort | uniq | egrep -v '^1$'); echo "$parents_of_dead_kids" | xargs kill`

## TODO

- ability to configure app (path to chrome for example)
- more samples (with layout)
- wiki pages with documentation and samples
- ability to preview templates directly by URL
- tests/specs
- options to delay rendering (could be useful if use JS libraries or external assets)
- support remote URL's to render (so it would possible to capture screenshots for example)

## Contributing

You are welcome to contribute.

## Inspirations

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 :)

## License

The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

[](https://www.railsjazz.com/?utm_source=github&utm_medium=bottom&utm_campaign=omg_image)