我希望能够从剪贴板复制图像，特别是屏幕截图，并将它们直接粘贴到富文本编辑器中，和/或上传该文件。我们只使用 chrome，因此它只适用于 chrome。
http://gmailblog.blogspot.com/2011/06/pasting-images-into-messages-just-got.html http://gmailblog.blogspot.com/2011/06/pasting-images-into-messages-just-got.html
现在，当您运行最新版本的 Google Chrome 时，您也可以直接从剪贴板粘贴图像。因此，如果您从网络或其他电子邮件复制图像，您可以将其直接粘贴到您的消息中。
有谁知道这个新的 Gmail 功能是否是我可以自己实现的 javascript？或者对此有何其他见解？
我相信Na7coldwater是正确的。这event.clipboardData正在被利用。请参阅以下概念证明：
<html>
<body>
<div id="rte" contenteditable="true" style="height: 100%; width: 100%; outline: 0; overflow: auto"></div>
<script type="text/javascript">
document.getElementById("rte").focus();
document.body.addEventListener("paste", function(e) {
for (var i = 0; i < e.clipboardData.items.length; i++) {
if (e.clipboardData.items[i].kind == "file" && e.clipboardData.items[i].type == "image/png") {
// get the blob
var imageFile = e.clipboardData.items[i].getAsFile();
// read the blob as a data URL
var fileReader = new FileReader();
fileReader.onloadend = function(e) {
// create an image
var image = document.createElement("IMG");
image.src = this.result;
// insert the image
var range = window.getSelection().getRangeAt(0);
range.insertNode(image);
range.collapse(false);
// set the selection to after the image
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
};
// TODO: Error Handling!
// fileReader.onerror = ...
fileReader.readAsDataURL(imageFile);
// prevent the default paste action
e.preventDefault();
// only paste 1 image at a time
break;
}
}
});
</script>
</body>
Gmail 通过以下方式上传图片XMLHttpRequest而不是直接将其作为数据 URL 嵌入。在 Google 或 SO 上搜索拖放文件上传应该可以揭示如何实现这一点。
请记住，这只是一个概念证明。不包括错误处理和浏览器/功能检测代码。
希望这可以帮助！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
