クリップボードから画像をコピーしたり、スクリーンショットを作成したり、リッチテキストエディタに貼り付けたり、アップロードしたりできます。私たちはクロムを使用するので、クロムのためだけに働かなければなりません。今画像をリッチテキストに貼り付けます（Gmailのように）
http://gmailblog.blogspot.com/2011/06/pasting-images-into-messages-just-got.html
は、Google Chromeの最新バージョンを実行しているとき、あなたはあまりにも右クリップボードから画像を貼り付けることができます。したがって、Webや他の電子メールから画像をコピーする場合は、その画像をメッセージに貼り付けることができます。
この新しいGmailの機能が自分自身を実装することができる何かのjavascriptであるかどうかは知っていますか？これに対する他の洞察は？
私はNa7coldの水が正しいと信じています。 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はデータURLとして直接埋め込むのではなく、XMLHttpRequestを介して画像をアップロードします。ドラッグのアップロードのためのGoogleまたはSOの検索&は、これを達成する方法を明らかにする必要があります。
これは単なる概念的証明であることに注意してください。エラー処理とブラウザ/機能検出コードは含まれていません。
希望すると便利です。
こんにちは、その仕事のクロムとファイアフォックスの良いコードありがとう。しかし、私が実行しようとすると、つまり動作しません。これについて何か考えてもらえますか？ – altandogan
http://stackoverflow.com/questions/490908/paste-an-image-from-clipboard-using-java-script/4400761#4400761 Firefox（とおそらくChrome）は画像を「」タグとしてデータを貼り付けますhrefとしてのURI。 Gmailのやり方は分かりません。おそらく 'event.clipboardData'であるでしょう。 –
Na7coldwater