Using a simpel javascript code found on gist.github.com I have made simpel demo showing how you can paste images on the computer clipboard into HTML elements and save their info as dataURL
A Pen by Sten Hougaard on CodePen.
Using a simpel javascript code found on gist.github.com I have made simpel demo showing how you can paste images on the computer clipboard into HTML elements and save their info as dataURL
A Pen by Sten Hougaard on CodePen.
<!-- http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/ --> | |
<div class="container fluid"> | |
<div class="row"> | |
<h1>HTML5 paste image to page</h1> | |
<blockquote>Did you know that <code>HTML5</code> lets the user paste an image into the DOM tree? See a demo here and find the code needed in this <a href="https://gist.github.com/STRd6/5286415">Gist</a>. I first came across this code here in a post <a href="http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/">HTML5 JavaScript Pasting Image Data in Chrome</a> by <a href="http://strd6.com/author/yahivin/">Daniel X Moore</a> (from 2011!).</blockquote> | |
<strong>Instructions</strong>: Copy an image to clipboard (For instance: <strong>Mac</strong>: <code>cmd+shift+ctrl+4</code> and <strong>Win</strong>: <code>Alt+PtrScr</code>), click on the <i>target div</i> to paste the image into, and paste <code>cmd+V</code> or <code>ctrl+v</code>. | |
</div> | |
<div class="row"><div class="span4 target"></div> | |
<div class="span4 target"></div> | |
<div class="span4 target"></div> | |
</div> | |
<div class="row"> | |
<div class="span12"> | |
<br /> | |
<div class="input-prepend"> | |
<span class="add-on">size</span> | |
<input class="span2 size" id="size" type="text" placeholder="size of pasted image"> | |
</div> | |
<div class="input-prepend"> | |
<span class="add-on">type</span> | |
<input class="span2 type" id="type" type="text" placeholder="Image type pasted"> | |
</div> | |
</div> | |
<div class="span12"> | |
<legend>The dataURL of the image <a href="" id="test" target="_blank">See image in new window</a></legend> | |
<textarea name="" cols="30" rows="10" class="data span12"></textarea></div> | |
</div> | |
</div> |
// Created by STRd6 | |
// MIT License | |
// jquery.paste_image_reader.js | |
(function($) { | |
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); | |
$("html").pasteImageReader(function(results) { | |
var dataURL, filename; | |
filename = results.filename, dataURL = results.dataURL; | |
$data.text(dataURL); | |
$size.val(results.file.size); | |
$type.val(results.file.type); | |
$test.attr('href', dataURL); | |
return $(".active").css({ | |
backgroundImage: "url(" + dataURL + ")" | |
}); | |
}); | |
var $data, $size, $type, $test; | |
$(function() { | |
$data = $('.data'); | |
$size = $('.size'); | |
$type = $('.type'); | |
$test = $('#test'); | |
$('.target').on('click', function() { | |
$('.active').removeClass('active'); | |
$(this).addClass('active'); | |
}) | |
}) |
.target { | |
border: solid 1px #aaa; | |
min-height: 200px; | |
width: 30%; | |
margin-top: 1em; | |
border-radius: 5px; | |
} | |
textarea { | |
background-color: white; | |
} | |
.active { | |
box-shadow: 0px 0px 10px 10px rgba(0,0,255,.4); | |
} |