Working with image files and clipboard items in Javascript

The following are some very simple Javascript code examples, detailing 4 basic image operations. These are useful specifically if we are making an app that does some kind of image manipulation in the client, either through the Canvas API, or through the direct manipulation of individual pixels.

• Load an image from a file: The user uploads an image file into the app, where it gets loaded into memory and analyzed.
• Paste image data from the clipboard: The same as the previous example, but here the image data is read from the system clipboard.
• Copy image data to the clipboard: Copy image to the clipboard: Draws an image using the Canvas API and then copies it to the system clipboard (This unfortunately does not work on Firefox yet)
• Save an image to a file: Draws an image using the Canvas API and then downloads it

Some sources and otherwise useful reading on this topic:

• Working with files in javascript (part 1)
• Working with files in javascript (part 2)
• Preview an image without uploading it to the server
• Everything you need to know about dataURLs
• How to get ImageData without using a canvas (sorry, not possible)
• Everything you need to know about canvas.toBlob
• Mozilla bug tracker - When this is resolved Firefox will support copying image to clipboard