Gmail と Google Chrome 12 以降では、クリップボードから画像を貼り付ける機能はどのように機能しますか? 質問する

Gmail と Google Chrome 12 以降では、クリップボードから画像を貼り付ける機能はどのように機能しますか? 質問する

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

この動作から、Chromeで使用されている最新バージョンのWebKitは、Javascriptの貼り付けイベントで画像を処理できると推測する必要がありますが、そのような機能強化に関する参照を見つけることができませんでした。ゼロクリップボードキー押下イベントにバインドしてフラッシュ機能をトリガーするため、コンテキスト メニューからは機能しません (また、ZeroClipboard はクロス ブラウザーであり、投稿では Chrome でのみ機能すると述べられています)。

では、これはどのように機能するのでしょうか。また、この機能を有効にするために Webkit (または Chrome) に機能強化が加えられたのはどこでしょうか。

ベストアンサー1

私はこれに少し時間を費やして実験しました。これは新しいクリップボード API 仕様「貼り付け」イベントハンドラを定義し、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 タイプを取得できるはずです。

おすすめ記事