Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

EdgarVarg commented Mar 31, 2017

no jala culero :v 👎

@mgbertiaux

This comment has been minimized.

Copy link

mgbertiaux commented May 7, 2018

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
You can’t perform that action at this time.