Skip to content

Instantly share code, notes, and snippets.

@DarrylD
Created November 7, 2013 16:09
Show Gist options
  • Save DarrylD/7357155 to your computer and use it in GitHub Desktop.
Save DarrylD/7357155 to your computer and use it in GitHub Desktop.
Demo of simple way to paste ( ctrl+v ) from clipboard.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Paste image from clipboard in Chrome</title>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
//plugin for pasting from https://gist.github.com/STRd6/5286415
(function($) {
// plugin by STRd6
// MIT License
// jquery.paste_image_reader.js
var defaults;
$.event.fix = (function(originalFix) {
return function(event) {
event = originalFix.apply(this, arguments);
if (event.type.indexOf('copy') === 0 || event.type.indexOf('paste') === 0) {
event.clipboardData = event.originalEvent.clipboardData;
}
return event;
};
})($.event.fix);
defaults = {
callback: $.noop,
matchType: /image.*/
};
return $.fn.pasteImageReader = function(options) {
if (typeof options === "function") {
options = {
callback: options
};
}
options = $.extend({}, defaults, options);
return this.each(function() {
var $this, element;
element = this;
$this = $(this);
return $this.bind('paste', function(event) {
var clipboardData, found;
found = false;
clipboardData = event.clipboardData;
return Array.prototype.forEach.call(clipboardData.types, function(type, i) {
var file, reader;
if (found) {
return;
}
if (type.match(options.matchType) || clipboardData.items[i].type.match(options.matchType)) {
file = clipboardData.items[i].getAsFile();
reader = new FileReader();
reader.onload = function(evt) {
return options.callback.call(element, {
dataURL: evt.target.result,
event: evt,
file: file,
name: file.name
});
};
reader.readAsDataURL(file);
return found = true;
}
});
});
});
};
})(jQuery);
//example code to paste
var loaded = function(){
$("html").pasteImageReader(function(results) {
var filename = results.filename;
, dataURL = results.dataURL, results;
$("body").css({
background: "url(" + dataURL + ") no-repeat"
});
$('.instructions').hide()
});
}
//fire on dom ready
$(document).ready(loaded)
</script>
</head>
<body>
<div class="instructions"> Ctrl-v to paste in this container </div>
</body>
</html>
@EdgarVarg
Copy link

no jala culero :v 👎

@mgbertiaux
Copy link

70 - var filename = results.filename;
71 - , dataURL = results.dataURL, results;

It's wrong because at end of filename exists an ";" it should be off or in line 71 "," should be replace by "var".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment