Add a 'copy PNG to clipboard' shortcut

[edomt]

Core problem

Currently, the option for users to re-use a 'pretty' version of a chart is to click Download > Image (PNG) > the PNG is downloaded > upload somewhere else (e.g. social media). This feels a bit cumbersome and results in users who often take screenshots of our charts; this can reduce image quality and/or remove some elements (e.g. footnotes).

Proposed solution

Add a "Copy chart" shortcut in the sharing menu, that would directly copy the PNG version of our chart to the clipboard.

Context

Slack thread

[marcelgerber]

Technical note:
Something like this could work, but haven't tried it

const clipboardItem = new ClipboardItem(
  { "image/png": this.pngBlob }
)
navigator.clipboard.write([ clipboardItem ])

It uses the relatively modern Clipboard API, which is supported in most recent browser versions.

[marcelgerber]

I've tried this now - this definitely works using the above piece of code.
So all we need for this is a working design for the download tab, and then afterwards I would estimate this to be 2-3 hours of work.

[danyx23]

Probably copy to clipboard is more explicit and should live under the share menu instead of in the download tab?

[github-actions]

This issue has had no activity within 10 months. It is considered stale and will be closed in 7 days unless it is worked on or tagged as pinned.

[danyx23]

Closing this issue because the feature has not been requested again and a workaround exists for internal use

[marcelgerber]

Lucas brought this up again today, in the context of screenshots being suboptimal because they may cut out the logo / source: https://owid.slack.com/archives/C04LNF8LBA8/p1733399018157819?thread_ts=1733395331.870399&cid=C04LNF8LBA8

[lucasrodes]

I'd find this valuable!

[the dream]: If the user shared the image in the context of a chat or social media post, it'd be super cool if we copied the image and descriptive text. I checked if this is possible at all; I'm unsure, but maybe this addresses the issue. I haven't seen it much around, so would be a nice tech feature imo.

[marcelgerber]

I'll reopen this and bring it into the triage flow again.

@lucasrodes At least on mobile devices we can do this, yes. On these, we would probably be using the Web Share API (i.e. the OS share sheet), which can handle this (and copying images on mobile devices is somewhere between unintuitive and impossible).

[lucasrodes]

Thanks, @marcelgerber !

FWIW, I'm less worried about the "cropping logo/source" problem on mobile since people usually screenshot the whole screen (with minor edits). I think it's more of a problem on desktops, where people will 99% not share a screenshot of their entire screen & instead will more likely crop things.

[marcelgerber]

We believe this is a useful feature, but it won't solve the screenshot problem (of cropped sources or logos).

However, we also think this feature is useful nonetheless. It would be nice to integrate this into the download modal, next to the png download button somewhere. But we need to come up with a design for that.