2011-06-18 24 views
14

クリップボードから画像をコピーしたり、スクリーンショットを作成したり、リッチテキストエディタに貼り付けたり、アップロードしたりできます。私たちはクロムを使用するので、クロムのためだけに働かなければなりません。今画像をリッチテキストに貼り付けます(Gmailのように)

http://gmailblog.blogspot.com/2011/06/pasting-images-into-messages-just-got.html

は、Google Chromeの最新バージョンを実行しているとき、あなたはあまりにも右クリップボードから画像を貼り付けることができます。したがって、Webや他の電子メールから画像をコピーする場合は、その画像をメッセージに貼り付けることができます。

この新しいGmailの機能が自分自身を実装することができる何かのjavascriptであるかどうかは知っていますか?これに対する他の洞察は?

+0

http://stackoverflow.com/questions/490908/paste-an-image-from-clipboard-using-java-script/4400761#4400761 Firefox(とおそらくChrome)は画像を「」タグとしてデータを貼り付けますhrefとしてのURI。 Gmailのやり方は分かりません。おそらく 'event.clipboardData'であるでしょう。 – Na7coldwater

答えて

20

私は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の検索&は、これを達成する方法を明らかにする必要があります。

これは単なる概念的証明であることに注意してください。エラー処理とブラウザ/機能検出コードは含まれていません。

希望すると便利です。

+0

こんにちは、その仕事のクロムとファイアフォックスの良いコードありがとう。しかし、私が実行しようとすると、つまり動作しません。これについて何か考えてもらえますか? – altandogan

関連する問題