HTML5 JavaScript 在 Chrome 中粘贴图像数据
Posted
技术标签:
【中文标题】HTML5 JavaScript 在 Chrome 中粘贴图像数据【英文标题】：HTML5 JavaScript Pasting Image Data in Chrome 【发布时间】：2012-05-24 09:08:46 【问题描述】：如何使用此插件开发工作示例：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。它特定于插件本身吗？任何指导将不胜感激！
【问题讨论】：
最后的代码 插件调用 不是 JavaScript，所以也不是 jQuery。答案在插件代码中。 它的 CoffeeScript - 因为 CoffeeScript 编译为 Javascript，所以它是 jQuery。请参阅下面的答案。 【参考方案1】：最后的调用是在 CoffeeScript 中，一种编译成 JavaScript 的语言。 (http://coffeescript.org)
$("html").pasteImageReader (results) ->
filename, dataURL = results
$("body").css
backgroundImage: "url(#dataURL)"
我不是专家——事实上我从来没有使用过咖啡脚本——但它会编译成：
$("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+")");
);
试一试，看看你能不能让它为你工作！
【讨论】：
【参考方案2】：接受的答案是正确的，因为调用是在 CoffeeScript 中并且只需要转换，但请注意，这些调用只是演示的一部分，它们所做的只是将页面的背景更改为粘贴的任何内容从用户的剪贴板。如果你想粘贴到富文本编辑器中，你需要更多类似的东西：
$("#yourRichTextEditor").pasteImageReader(function(results)
document.execCommand("insertimage", 0, results.dataURL);
);
这假定您的文本编辑器正在使用启用了contentEditable 的元素，例如div，ID 为yourRichTextEditor；并且无论在哪个浏览器中运行都支持contentEditable commandinsertimage。我在一个项目中使用Bootstrap-Wysiwyg，在该项目中我使用上面的代码调用pasteImageReader 插件，但大概它应该适用于大多数基于HTML5 的富文本编辑器。
【讨论】：
以上是关于HTML5 JavaScript 在 Chrome 中粘贴图像数据的主要内容，如果未能解决你的问题，请参考以下文章
在 Chrome 中调用 HTML5 视频 .ended 事件，但不是 FF
[JavaScript] html5 video标签注意事项
在 Chrome 中清除焦点上的 HTML5 占位符属性文本