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.
About the Author
