javascript 将图像粘贴到富文本中（如 gmail）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6393280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Paste image into rich text (like gmail)
提问by Devin Smith
I want to be able to copy an image from clipboard, specifically screenshots, and paste them right into a rich text editor, and/or have that file uploaded. We only use chrome so it only has to work for chrome.
我希望能够从剪贴板复制图像，特别是屏幕截图，并将它们直接粘贴到富文本编辑器中，和/或上传该文件。我们只使用 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
Now, when you're running the latest version of Google Chrome, you can paste images right from your clipboard too. So if you copy an image from the web or another email, you can paste it right into your message.
现在，当您运行最新版本的 Google Chrome 时，您也可以直接从剪贴板粘贴图像。因此，如果您从网络或其他电子邮件中复制图像，则可以将其直接粘贴到您的消息中。
Does anyone know if this new gmail feature is something javascript that Id be able to implement myself? Or any other insight into this?
有谁知道这个新的 gmail 功能是否是我可以自己实现的 javascript？或者对此有何其他见解？
回答by
I believe Na7coldwater is correct. The event.clipboardDatais being utilised. Please see the following proof of concept:
我相信 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 uploads the image via XMLHttpRequestinstead of embedding it directly as a data URL. A search on Google or SO for drag & drop file uploads should reveal how this can be achieved.
Gmail 通过上传图片XMLHttpRequest而不是直接将其嵌入为数据 URL。在 Google 或 SO 上搜索拖放文件上传应该会揭示如何实现这一点。
Please bare in mind that this is just a proof of concept. Error handling and browser/feature detection code is not included.
请记住，这只是一个概念证明。不包括错误处理和浏览器/功能检测代码。
Hope this helps!
希望这可以帮助！
