gpt4 book ai didi

javascript - 将图像粘贴到富文本中(如 gmail)

转载 作者:可可西里 更新时间:2023-11-01 01:31:18 25 4
gpt4 key购买 nike

我希望能够从剪贴板复制图像,特别是屏幕截图,并将它们直接粘贴到富文本编辑器中,和/或上传该文件。我们只使用 chrome,所以它只适用于 chrome。

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.

有谁知道这个新的 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 上搜索拖放文件上传应该会揭示如何实现这一点。

请记住,这只是概念验证。不包括错误处理和浏览器/功能检测代码。

希望这对您有所帮助!

关于javascript - 将图像粘贴到富文本中(如 gmail),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6393280/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com