Copy a Flash SWF Image to the Clipboard Using Javascript

Welcome to part three of this tutorial on getting an image from Flash into the user's clipboard. In the first two parts we took a screenshot of the Flash movie, passed it to the browser, and used Javascript (and a PHP call, for Internet Explorer) to embed the image in the webpage. Now we'll go ahead with the final step of adding that image to the clipboard. Here's a demo:

* sorry, only works in Internet Explorer. What about Firefox?

Copying an image to the clipboard in Internet Explorer

For IE, putting an image on the clipboard isn't much harder than copying text. You simple createa control range that includes the <img> tag and execute the "Copy" command. I tried to use the same method on an Image object that hadn't been added to the DOM tree but that didn't work.

// imageElem is the <img> object (Image)
var ctrlRange = document.body.createControlRange();
ctrlRange.add(imageElem);
ctrlRange.execCommand('Copy');

Now, since the image is being copied to the clipboard, you probably don't want to show it, so we'll set the width and height to zero. I tried using display:none but then nothing got copied to the clipboard. So:

<img id="imageContainer" style="width:0;height:0" />

We also have to wait until the image has loaded before we can copy it to the clipboard so we'll wait for the image's onload method to be called before executing the copy.

function copyImageContainerToClipboard()
{
	var imageElem = getElem('imageContainer');
	var ctrlRange = document.body.createControlRange();
	ctrlRange.add(imageElem);
	ctrlRange.execCommand('Copy');
}
 
var screenshotBase64 = flashMovie.getScreenshot();
 
var imageContainer = getElem('imageContainer');
 
imageContainer.onload = copyImageContainerToClipboard;
 
// the getImageSrc method was explained in the previous post.
imageContainer.src = getImageSrc(
	"data:image/png;base64," + screenshotBase64);

There you go. To sum up the process...

1. Javascript calls the Flash method, getScreenshot, through the ExternalInterface
2. getScreenshot fetches the bitmap data, encodes it as a JPEG, encodes that in Base64, and returns it to the Javascript caller.
3. Depending on the browser, Javascript displays the image using either the data: URI scheme or a call to a server-side script. Either way, the image is displayed in an <img> tag.
4. In IE, an onload handler adds the image to the clipboard using a control range.

What about Firefox?

Having free access to the user's clipboard is actually a bit of a security risk. Reading from the clipboard, you might be able to acquire sensitive information and the user would be none the wiser. Writing to the clipboard isn't so dangerous, but could be annoying if a webpage wrote over whatever data you had stored there.

As of IE7, there's a security notification and a prompt to allow access to the clipboard. Firefox does the same sort of thing, asking the user whether to allow the rather vague action, "Run or install software on your machine." However, copying text to the clipboard in either browser is certainly possible, if the user will allow it.

The problem with copying image data to Firefox is that it's so complicated! I'm sure it can be done but I don't know enough about the fine details of mozilla's API. Fortunately for me, Internet Explorer is the target machine for the project I'm working on and getting the clipboard functionality in Firefox isn't a priority. That said, I did some research on the subject because I wanted a general solution and I'm a Firefox user myself. If you feel like taking up the problem on your own, there are some links below to get you started. Be sure to let me know if you make some headway.

Using the Clipboard

A Mozilla Developer Center article on the topic. Covers copying text to the clipboard and mentions images

On Clipboard Formats

Information regarding Gecko and clipboard formats. Some information on bitmaps at the very bottom.

Re: copy image to clipboard

Some one else was trying to copy an image to the clipboard in October last year. I've emailed them in the hopes that they found the solution.

Copying objects to an application's clipboard

A blog post from some one copying and pasting DOM nodes.

If I get more info on the topic I'll post it here for all of your automatically​-copying​-an​-image​-to​-the​-clipboard needs. (-;