如何使用此插件开发工作示例:HTML5 JavaScript Pasting Image Data in Chrome
作者整理了一个很好的例子，看起来很适合我们的目的。但是，我不熟悉创建 jQuery 插件。
目标是使用此插件将剪贴板图像粘贴到富文本编辑器(如 TinyMCE)中。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PASTE IMAGE</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
// 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.*/
};
$.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);
$this.bind('paste', function(event) {
var clipboardData, found;
found = false;
clipboardData = event.clipboardData;
Array.prototype.forEach.call(clipboardData.types, function(type, i) {
var file, reader;
if (found) {
return;
}
if (!type.match(options.matchType)) {
return;
}
file = clipboardData.items[i].getAsFile();
reader = new FileReader();
reader.onload = function(evt) {
options.callback.call(element, {
filename: file.name,
dataURL: evt.target.result
});
};
reader.readAsDataURL(file);
found = true;
});
});
});
};
})(jQuery);
$("html").pasteImageReader (results) ->
{filename, dataURL} = results
$("body").css
backgroundImage: "url(#{dataURL})"
</script>
</head>
<body>
</body>
</html>
我对插件调用感到困惑:
$("html").pasteImageReader (results) ->
{filename, dataURL} = results
$("body").css
backgroundImage: "url(#{dataURL})"
这看起来不像我见过的 jQuery。它特定于插件本身吗？任何指导将不胜感激!
最佳答案
最后的调用是在 CoffeeScript 中进行的，CoffeeScript 是一种编译成 JavaScript 的语言。 (http://coffeescript.org)
$("html").pasteImageReader (results) ->
{filename, dataURL} = results
$("body").css
backgroundImage: "url(#{dataURL})"
我不是专家 - 事实上我从来没有使用过 coffeescript - 但它会编译为:
$("html").pasteImageReader(function(results) {
var dataURL, filename;
return filename = results.filename, dataURL = results.dataURL, results;
});
$("body").css({
backgroundImage: "url(" + dataURL + ")"
});
这可能行得通，但我不喜欢它的格式。这是一些更简洁的代码。
$("html").pasteImageReader(function(result){
$("body").css({backgroundImage: "url("+result.dataURL+")"});
});
试一试，看看能否让它为您所用!
关于jquery - HTML5 JavaScript 在 Chrome 中粘贴图像数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10624729/