クリップボードから Gmail に画像を貼り付ける: Chrome 12 での操作方法

クリップボードから Gmail に画像を直接貼り付ける機能に関する Google の発表Chrome 12 を使用した Gmail は、その基礎となるメカニズムについての好奇心を引き起こしました。最新の Chrome バージョンを使用しているにもかかわらず、一部のユーザーは、この機能強化が Webkit でどのように実装されたかについての情報を見つけることができませんでした。

実験の結果、Chrome は新しい Clipboard API 仕様を採用しているようです。この仕様により、event.clipboardData.items プロパティにアクセスできる「貼り付け」イベント ハンドラーの定義が有効になります。各項目に対して getAsFile() を呼び出すことで、Blob オブジェクトを取得できます。その後、この Blob で FileReader を使用してその内容を確認できます。

以下は、貼り付けられた画像のデータ URL を取得する方法を示すコード スニペットです。

document.onpaste = function (event) {
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    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 が利用可能になると、画像を表示できます。あるいは、FormData または readAsBinaryString を使用してアップロードすることもできます。

JSON.stringify は項目リストに対して直接機能しない可能性がありますが、DataTransferItem データ構造を使用して各項目を反復処理することで MIME タイプを取得できることに注意することが重要です。 .