html5图片剪切板,实现网页粘贴粘贴板图片的 javascript 脚本

我们现在要做这个事情：

在 QQ 打开的情况下按 Ctrl+Alt+A 截图，选择截图之后就会将图片内容放入剪贴板。

然后在上面这个图片编辑器里面选择粘贴，你会发现图片已经粘进去了！

So! Haha，现在就大有文章可做啦！这是怎么实现的呢？

终于被我找到这篇好文，不用自己造轮子了，直接拿来主义！

// 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);

还在忍受写 WordPress 文章的时候截图发图不方便的苦恼吗？现在有办法了吧！快来一起写一个 WordPress 插件，将这门技术引入到你所有需要贴图的地方吧！

Er… 后来发现，其实轮子也不用自己做了，WP 里面有一个叫做 Image Elevator 的插件，直接就可以用上了，马上鸟枪换炮了！

【转载请附】愿以此功德，回向 >&gt