[解決済み] GmailとGoogle Chrome 12+で、クリップボードから画像を貼り付ける機能はどのように動作しますか？

質問

があることに気づきました。 Googleのブログ記事 最新バージョンの Chrome を使用している場合、クリップボードから Gmail メッセージに直接画像を貼り付けることができることに言及しています。 私の使っている Chrome (12.0.742.91 beta-m) で試してみたところ、コントロールキーやコンテキストメニューを使って、とてもうまくいきました。

この動作から、Chrome で使用されている webkit の最新バージョンでは、Javascript の貼り付けイベントで画像を処理することができると推測する必要がありますが、そのような強化に関する文献を見つけることができません。 私が思うに ゼロクリップボード また、ZeroClipboardはクロスブラウザーであり、この投稿ではChromeでのみ動作すると書かれています）。

では、どのような仕組みで、この機能を実現するためにWebkit（またはChrome）のどこが強化されたのでしょうか？

解決方法は？

時間をかけて実験してみました。 それは、ある種、新しい クリップボードAPI仕様 . paste"イベントハンドラを定義し、event.clipboardData.itemsを見て、それらに対してgetAsFile()を呼び出し、Blobを取得することができます。 Blobを取得したら、次のように使用できます。 ファイルリーダー を付けて、その中身を見ることができる。 このようにして、先ほどChromeに貼り付けたもののデータURLを取得することができます。

document.onpaste = function (event) {
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    console.log(JSON.stringify(items)); // might give you mime types
    for (var index in items) {
        var item = items[index];
        if (item.kind === 'file') {
            var blob = item.getAsFile();
            var reader = new FileReader();
            reader.onload = function (event) {
                console.log(event.target.result); // data url!
            }; 
            reader.readAsDataURL(blob);
        }
    }
};

データのurlがあれば、ページに画像を表示することができます。 もし代わりにアップロードしたいのであれば、readAsBinaryStringを使うか、または、XHRの中に フォームデータ .

編集：アイテムは、型が データ転送項目 . JSON.stringify はアイテムリストでは動作しないかもしれませんが、アイテム上をループしたときに MIME タイプを取得できるはずです。