Glad You're Ready. Let's Get Started!

Let us know how we can contact you.

Thank you!

We'll respond shortly.

You can't (yet) programmatically copy an image to the clipboard from a Javascript web app

Earlier this week we had an investigation chore about whether it was possible to programmatically copy an image to the clipboard in a Javascript web app.

Our conclusion was no, it’s not currently possible (at least not standardized across browsers).

While there is a draft for the HTML5 clipboard API that does look like it will support copying images to the clipboard, it isn’t yet standardized.

After the jump, I’ll explain the steps we took to reach our conclusion.

When we started investigating, we were searching for something like “javascript copy image to clipboard” and we were not finding any relevant search results.

We decided to look up how to copy text, then. A cursory web search for copying text to the clipboard in Javascript will show you a lot of people recommending Flash-based solutions like Zeroclipboard. Zeroclipboard works by using a flash movie that copies text to the clipboard when clicked.

A search through Zeroclipboard’s documentation didn’t turn up anything about images. Thankfully, Zeroclipboard is open source! Let’s find how they are doing the copy.

We went to the Actionscript (Flash’s ECMAScript-based programming language) source code for Zeroclipboard, and found this code:

// user click copies text to clipboard
// as of flash player 10, this MUST happen from an in-movie flash click event
System.setClipboard( clipText );

System.setClipboard it is. Maybe there’s a richer API than just copying text? Off to the docs!

The Actionscript docs had this to say about System.setClipboard:

This method is provided for SWF content running in Flash Player 9. It allows only adding String content to the Clipboard.

Flash Player 10 content and content in the application security sandbox in an AIR application can call the Clipboard.setData() method.

So Flash Player 10 can do something besides strings? Let’s look at the docs for Clipboard.setData.

The standard formats are:

  • BITMAP_FORMAT: a BitmapData object (AIR only)
  • FILE_LIST_FORMAT: an array of File objects (AIR only)
  • HTML_FORMAT: HTML-formatted string data
  • TEXT_FORMAT: string data
  • RICH_TEXT_FORMAT: a ByteArray containing Rich Text Format data
  • URL_FORMAT: a URL string (AIR only)

There you have it. If we were writing an AIR app, we could use Flash to copy an image to the clipboard; but a Flash movie embedded in a web page does not have those permissions available.

So until that draft is standardized and adopted, there seems to be no cross-browser way to programmatically copy an image to the clipboard in a web app.

  1. Brennan says:

    I thought perhaps Silverlight could help, but it seems to have the same restriction.

    “In Silverlight 5, access to clipboard information is limited to Unicode text access. This differs from the WPF implementation of Clipboard, which enables access to other specific types (for example, streams or images) or to data objects.”

  2. Chris Adams says:

    Aren’t there non-flash ways to copy text to the clipboard? My impression was it can be done in JS by generating some text way off-screen, highlighting it programmatically then simulating a press of Cttl-C or Cmd-C.

    Assuming it works for copying text that seems like it might work for copying images too.

    Did you guys try any JS-based techniques?

Post a Comment

Your Information (Name required. Email address will not be displayed with comment.)

* Copy This Password *

* Type Or Paste Password Here *