search

observablehq / feedback

Customer submitted bugs and feature requests
42 stars 3 forks source link

Export cell in PNG format #344

Open oluckyman opened 2 years ago

oluckyman commented 2 years ago

There is “Download PNG” option in the cell menu. image

I want to embed cells from Observable into platforms with limited iframe support (e. g. Telegra.ph) Would be great to be able to export a cell in PNG format in the Embed menu. image

Describe alternatives you've considered In my case I need to generate about 100 PNGs for a set of input params, so I can workaround it by generating 100 charts in a notebook and download PNGs manually and then serve them from my server. But general solution will require a proxy server with headless browser which runs Observable runtime and generates PNGs from cell. As I understand, Observable already have such mechanism for generating previews. May be an easy win. And it unlocks the ability to share cells from Observable on platforms with limited iframe support

asg017 commented 2 years ago

Take a look at observable-prerender, which isn't an official project, but does do the puppeteer -> observable notebook -> screenshot a cell workflow quite well. Also this post and this post might be helpful. It's been a while since observable-prerender's last update, so file a big in that repo if something doesnt work well!

(But also I agree, some form of "embed as png" would be cool)

oluckyman commented 2 years ago

It is awesome! thank you, Alex! will check it out

CobusT commented 2 years ago

I understand the auto-PNG generation scenario you described in the 'alternatives' section, to which I agree that observable-prerender is a great solution.

Can you perhaps clarify how adding the export to PNG in the Embed modal would be different from the cell menu item that already exists?

oluckyman commented 2 years ago

Can you perhaps clarify how adding the export to PNG in the Embed modal would be different from the cell menu item that already exists?

In the cell menu item I can download PNG to my laptop. In the Embed modal I would like to see a link like https://observablehq.com/embed/@oluckyman/my-notebook?cells=chart&type=png so I can use it as a link to an image in <img src="..." /> or in media platforms that do not support iframe embeds

CobusT commented 2 years ago

Thanks for clarifying!

hellonearthis commented 2 years ago

I like that idea. My main worry that this could become a free image hosting service and used for that feature alone. There would need to ba a way to detect that kind of misuse. Bandwidth limits with a watermark (a bottom of image?) be added like the iframe has if level 1 of the Bandwidth is exceeded?