paste image
HTML
Note: Paste Print screen or captured files here to attach
<br />
<div id="editor-box" class="target" contenteditable="true">
</div>
CSS
body {
width: 700px;
margin: 0 auto;
}
div#editor-box {
border: 2px dashed #7f7f7f;
text-align: center;
vertical-align: middle;
padding: 10px 10px 10px 10px;
line-height: 10px;
max-height: 500px;
max-width: 100%;
}
div#editor-box > img {
max-width: 500px;
max-height: 500px;
}
.contain {
background-size: 100%;
background-repeat: no-repeat;
}
JavaScript
// Created by STRd6
// MIT License
// jquery.paste_image_reader.js
(function ($) {
$(".target").focus();
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
});
};
...