starred/flyimg

Fork 0

mirror of https://github.com/flyimg/flyimg.git synced 2026-04-25 01:35:56 +03:00

[GH-ISSUE #49] Add overlays functionality, like text on top of the image, or any graphic. #628

New issue

Closed

opened 2026-03-15 14:53:31 +03:00 by kerem · 6 comments

kerem commented

2026-03-15 14:53:31 +03:00

Owner

Originally created by @baamenabar on GitHub (Feb 13, 2017).
Original GitHub issue: https://github.com/flyimg/flyimg/issues/49

Consider using phantomJS to load a URL, render it, and return a part or all of the rendered page.

The part that would be selected should be passed as a css selector in the first parameter.

Something like this:

http://flyimg.io/render/.header__title--big/https://some .webpage.com

Originally created by @baamenabar on GitHub (Feb 13, 2017). Original GitHub issue: https://github.com/flyimg/flyimg/issues/49 Consider using phantomJS to load a URL, render it, and return a part or all of the rendered page. The part that would be selected should be passed as a css selector in the first parameter. Something like this: `http://flyimg.io/render/.header__title--big/https://some .webpage.com`

kerem

2026-03-15 14:53:31 +03:00

closed this issue
added the
enhancement

version 2

stale
labels

kerem commented

2026-03-15 14:53:47 +03:00

Author

Owner

@baamenabar commented on GitHub (Sep 8, 2017):

I'm thinking this could be it's own service in it's own container that we can call. Specially since the environment for phantomJS is node. Actually we should be using headless chrome for this nowdays.

@baamenabar commented on GitHub (Sep 8, 2017): I'm thinking this could be it's own service in it's own container that we can call. Specially since the environment for phantomJS is node. Actually we should be using headless chrome for this nowdays.

kerem commented

2026-03-15 14:53:53 +03:00

Author

Owner

@sadok-f commented on GitHub (Sep 13, 2017):

I think there are 2 differents features here we're talking about:

Generating an image from given URL and css selector: this could be done in its own service.
Adding an Overlay (text) on a top of an image (with given position): this is a very nice feature that we need to work on it asap.

@sadok-f commented on GitHub (Sep 13, 2017): I think there are 2 differents features here we're talking about: - Generating an image from given URL and css selector: this could be done in its own service. - Adding an Overlay (text) on a top of an image (with given position): this is a very nice feature that we need to work on it asap.

kerem commented

2026-03-15 14:53:58 +03:00

Author

Owner

@baamenabar commented on GitHub (Sep 13, 2017):

The thing with the overlay text is the control, there is two ways to work with text.

Somehow put some text with some font over an image given some coordinates: EASY (even with imagemagick)
Put a specific text, with specific font-size, with specific glyph rendering with specific font (not always available with hinting), with specific line-height, color, transparency, alignment, text wrapping, with a specific letter-spacing and word spacing with glyph alternates: PRACTICALLY IMPOSSIBLE (it is already quite complicated with CSS).

Option 1 is good for an amateur photographer who wants to put their name in an image, or maybe a simple meme generator.

Option 2 is what a stakeholder (PM, designer, boss, ...) wants when they thing about overlaying text on an image.

Option 2 is doable using a browser and CSS and saving the rendered piece as a bitmap.

@baamenabar commented on GitHub (Sep 13, 2017): The thing with the overlay text is the control, there is two ways to work with text. 1. Somehow put some text with some font over an image given some coordinates: **EASY** (even with imagemagick) 2. Put a specific text, with specific font-size, with specific glyph rendering with specific font (not always available with hinting), with specific line-height, color, transparency, alignment, text wrapping, with a specific letter-spacing and word spacing with glyph alternates: **PRACTICALLY IMPOSSIBLE** (it is already quite complicated with CSS). Option 1 is good for an amateur photographer who wants to put their name in an image, or maybe a simple meme generator. Option 2 is what a stakeholder (PM, designer, boss, ...) wants when they thing about overlaying text on an image. Option 2 is doable using a browser and CSS and saving the rendered piece as a bitmap.

kerem commented

2026-03-15 14:54:03 +03:00

Author

Owner

@baamenabar commented on GitHub (Sep 13, 2017):

I leave this link here, because this and similar projects have addressed the issue in depth.

https://github.com/cheeaun/puppetron

Keep in mind that my hammer is CSS , so everything looks like something to solve with css. 😛

@baamenabar commented on GitHub (Sep 13, 2017): I leave this link here, because this and similar projects have addressed the issue in depth. https://github.com/cheeaun/puppetron Keep in mind that my hammer is CSS , so everything looks like something to solve with css. 😛

kerem commented

2026-03-15 14:54:08 +03:00

Author

Owner

@github-actions[bot] commented on GitHub (Aug 27, 2023):

This issue is stale because it has been open for 30 days with no activity.

@github-actions[bot] commented on GitHub (Aug 27, 2023): This issue is stale because it has been open for 30 days with no activity.

kerem commented

2026-03-15 14:54:13 +03:00

Author

Owner

@github-actions[bot] commented on GitHub (Sep 10, 2023):

This issue was closed because it has been inactive for 14 days since being marked as stale.

@github-actions[bot] commented on GitHub (Sep 10, 2023): This issue was closed because it has been inactive for 14 days since being marked as stale.