{"id":15585450,"url":"https://github.com/igorkasyanchuk/omg_image","last_synced_at":"2026-03-07T11:01:27.672Z","repository":{"id":33276361,"uuid":"150642828","full_name":"igorkasyanchuk/omg_image","owner":"igorkasyanchuk","description":"Generate PNG previews for HTML snippets (html/css/js). Any complexity.","archived":false,"fork":false,"pushed_at":"2025-05-12T21:04:46.000Z","size":279,"stargazers_count":36,"open_issues_count":15,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-04T14:48:33.851Z","etag":null,"topics":["chrome-headless","rails","ruby","screenshot"],"latest_commit_sha":null,"homepage":"https://www.railsjazz.com/","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/igorkasyanchuk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"patreon":"igorkasyanchuk"}},"created_at":"2018-09-27T20:17:10.000Z","updated_at":"2025-08-06T23:40:05.000Z","dependencies_parsed_at":"2024-04-12T12:38:08.905Z","dependency_job_id":"388a9be7-1308-4e2a-b8c8-61155d6afe87","html_url":"https://github.com/igorkasyanchuk/omg_image","commit_stats":{"total_commits":36,"total_committers":1,"mean_commits":36.0,"dds":0.0,"last_synced_commit":"cde4cf21f56da06a5331800e7dea106f51e2a5e5"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/igorkasyanchuk/omg_image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igorkasyanchuk%2Fomg_image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igorkasyanchuk%2Fomg_image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igorkasyanchuk%2Fomg_image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igorkasyanchuk%2Fomg_image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/igorkasyanchuk","download_url":"https://codeload.github.com/igorkasyanchuk/omg_image/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igorkasyanchuk%2Fomg_image/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30212103,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T09:02:10.694Z","status":"ssl_error","status_checked_at":"2026-03-07T09:02:08.429Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-headless","rails","ruby","screenshot"],"created_at":"2024-10-02T21:01:13.920Z","updated_at":"2026-03-07T11:01:27.643Z","avatar_url":"https://github.com/igorkasyanchuk.png","language":"Ruby","funding_links":["https://patreon.com/igorkasyanchuk","https://www.patreon.com/igorkasyanchuk","https://buymeacoffee.com/igorkasyanchuk"],"categories":[],"sub_categories":[],"readme":"# omg_image\n\n[![RailsJazz](https://github.com/igorkasyanchuk/rails_time_travel/blob/main/docs/my_other.svg?raw=true)](https://www.railsjazz.com)\n[![https://www.patreon.com/igorkasyanchuk](https://github.com/igorkasyanchuk/rails_time_travel/blob/main/docs/patron.svg?raw=true)](https://www.patreon.com/igorkasyanchuk)\n\n[![\"Buy Me A Coffee\"](https://github.com/igorkasyanchuk/get-smart/blob/main/docs/snapshot-bmc-button-small.png?raw=true)](https://buymeacoffee.com/igorkasyanchuk)\n\nLet's start with sample of what this gem can do (below are the images of generated previews):\n\nDemo: [https://www.youtube.com/watch?v=Lso-B_fayhw](https://www.youtube.com/watch?v=Lso-B_fayhw)\n\n[![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)\n\nIf you need to generate complex images, previews, charts or basically represent any HTML snippet - this gem could help.\n\nIt's using a Chrome(headless) to convert any HTML to PNG. \n\nIf 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.\n\n## Usage\n\n- add this gem to Gemfile - `gem \"omg_image\"`\n- make sure you have chrome installed (`google-chrome --version`)\n- execute `rails g omg` in app\n- execute `rake db:migrate`\n- edit sample template `app/omg/simple.html.erb`\n- open any view, for example you have `app/views/home/index.html.erb` and put:\n\n```erb\n  \u003c%= image_tag OmgImage::Processor.new('entity', key: 'xxx', title: \"OMG,\u003cbr/\u003ethis looks interesting!\", tags: ['This', 'is', 'a', 'sample'], description: \"Change me please\", size: '600,300').cached_or_new %\u003e\n  \u003cbr/\u003e\n  \u003c%= image_tag OmgImage::Processor.new('entity', title: \"OMG,\u003cbr/\u003ethis looks interesting!\", description: \"Small version\", size: '400,200').cached_or_new(regenerate: true) %\u003e\n  \u003cbr/\u003e\n  \u003c%= image_tag OmgImage::Processor.new('square', title: \"Real-time generation\", size: '200,200').cached_or_new %\u003e\n```\n- refresh page and see images\n- edit/create new previews and use them in any place of your app.\n\nAlso, for example you can do it on generate images directly in the models:\n\n```ruby\nclass Post \u003c ApplicationRecord\n  has_one_attached :preview\n  # just an example\n  def Post.create_new_preview\n    processor = ::OmgImage::Processor.new('entity', title: \"OMG,\u003cbr/\u003ethis is created from model\", description: \"Small version\", size: '400,200')\n    processor.with_screenshot do |screenshot|\n      post = Post.new\n      post.preview.attach(io: File.open(screenshot.path), filename: \"image.png\", content_type: \"image/png\")\n      post.save!\n    end\n  end\nend\n```\n\nTo create a new template - basically create a new file in `app/omg/\u003cname\u003e.html.erb`. Put any HTML/CSS into it. And use as described above.\n\n## Requirements\n\n- Rails App 5+ and Active Storage\n- Google chrome (headless)\n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n```ruby\ngem 'omg_image'\n```\n\nAnd then execute:\n```bash\n$ bundle\n```\n\n## Features\n\n- you can generate images with any complexity (you just need to know html/css)\n- store cached versions of preview by `key` and you can obtain them by `OmgImage::Image.find_by(key: key)`\n- generate images in background jobs or console applications\n- caching for previews by `key`\n- ability to refresh preview by `key`\n\n# Options\n\n- `.cached_or_new(regenerate: true)` pass this option with true value if you want to regenerate image\n\n## Google Chrome Installation\n\n- `sudo apt install gdebi-core`\n- `wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb`\n- `sudo gdebi google-chrome-stable_current_amd64.deb`\n- verify chrome is installed `google-chrome --version`\n\n## More about Chrome\n\n- https://linuxize.com/post/how-to-install-google-chrome-web-browser-on-ubuntu-18-04/\n\n## Issues\n\n- 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`\n\n## TODO\n\n- ability to configure app (path to chrome for example)\n- more samples (with layout)\n- wiki pages with documentation and samples\n- ability to preview templates directly by URL\n- tests/specs\n- options to delay rendering (could be useful if use JS libraries or external assets)\n- support remote URL's to render (so it would possible to capture screenshots for example)\n\n## Contributing\n\nYou are welcome to contribute.\n\n## Inspirations\n\nI'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 :)\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n\n\n[\u003cimg src=\"https://github.com/igorkasyanchuk/rails_time_travel/blob/main/docs/more_gems.png?raw=true\"\n/\u003e](https://www.railsjazz.com/?utm_source=github\u0026utm_medium=bottom\u0026utm_campaign=omg_image)\n\n[![\"Buy Me A Coffee\"](https://github.com/igorkasyanchuk/get-smart/blob/main/docs/snapshot-bmc-button.png?raw=true)](https://buymeacoffee.com/igorkasyanchuk)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figorkasyanchuk%2Fomg_image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Figorkasyanchuk%2Fomg_image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figorkasyanchuk%2Fomg_image/lists"}