stantoxt / pasteimage

jQuery plugin for pasting images from clipboard

pasteimage.js

jQuery plugin adds ability to paste images from clipboard to Firefox and Chrome (and possibly Safari). It's not perfect, but I'm hoping by putting it all together into a plugin we can improve it.

The plugin takes a callback function as a parameter. When a paste event is detected, the callback is triggered and the datauri of the image is passed as a parameter to the callback.

You can then upload the image to server or display it on the page.

Credits

Joel Besda http://joelb.me/blog/2011/code-snippet-accessing-clipboard-images-with-javascript/

Rafael http://stackoverflow.com/questions/11850970/javascript-blob-object-to-base64

Nick et al http://stackoverflow.com/questions/6333814/how-does-the-paste-image-from-clipboard-functionality-work-in-gmail-and-google-c

Requirements

jQuery

Usage

Add within HEAD tag of page:

function callback(src) {
	//do something e.g., assign src to image
}

$(function() {
	$.pasteimage(callback);
});

Capture screenshot and use CTRL+V to paste on the page.

Option 1: Show the image on the page

Insert an img element into the DOM: <img src="">

Define your callback function like this:

function showImage(src) {
  $("img").attr("src", src);
}

Then assign the callback to the plugin:

$.pasteimage(showImage);

Option 2: Upload with PHP

Add an input element to the HTML:

Define your callback function like this:

function insertImageURI(value) {
	// parse the uri to strip out "base64"
	var sourceSplit = value.split("base64,");
	var sourceString = sourceSplit[1];
	// Write base64-encoded string into input field
  	$("input").val(sourceString);
}

Then submit this field with a form (or use ajax).

On the backend, use PHP to upload the string post data to a jpeg image:

$sourceString = $_POST["sourceString"];
$image = imagecreatefromstring(base64_decode($sourceString));
imagejpeg($image, $destination, 100);

Issues

Doesn't work in FF if the focus is inside another text area (hypothesis: paste event happens before the plugin can refocus on the pastecatcher DIV). Need a way to delay paste event.

Doesn't always work depending on method used to "copy" the image (e.g., Right Click > Copy)

Safari support to be tested.

IE not supported.