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

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

その動作から、Chromeで使用されているWebkitの最新バージョンはJavascript貼り付けイベントで画像を処理できると想定する必要がありますが、そのような拡張機能への参照を見つけることができませんでした。私は信じてZeroClipboardのキープレスイベントに結合するが、そのフラッシュ機能をトリガし、そのようにするだろう、コンテキストメニューからではない仕事（また、ZeroClipboardはクロスブラウザであり、ポストは、これはChromeでのみ動作しますと言います）。

それで、これはどのように機能し、機能を有効にするWebkit（またはChrome）に拡張が加えられたのですか？

私はこれを試すのに少し時間を費やしました。それは、新しいクリップボードAPI仕様に従っているようです。「貼り付け」イベントハンドラーを定義してevent.clipboardData.itemsを確認し、それらに対してgetAsFile（）を呼び出してBlobを取得できます。Blobを取得したら、それにFileReaderを使用して、Blobの内容を確認できます。これは、Chromeに貼り付けたばかりのもののデータURLを取得する方法です。

// window.addEventListener('paste', ... or
document.onpaste = function(event){
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); // will give you the mime types
  for (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にそれを置くことができいるFormDataを。

ニックによる答えはまだ機能するために小さな変更を必要とするようです:)

// window.addEventListener('paste', ... or
document.onpaste = function (event) {
  // use event.originalEvent.clipboard for newer chrome versions
  var items = (event.clipboardData  || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); // will give you the mime types
  // find pasted image among pasted items
  var blob = null;
  for (var i = 0; i < items.length; i++) {
    if (items[i].type.indexOf("image") === 0) {
      blob = items[i].getAsFile();
    }
  }
  // load image if there is a pasted image
  if (blob !== null) {
    var reader = new FileReader();
    reader.onload = function(event) {
      console.log(event.target.result); // data url!
    };
    reader.readAsDataURL(blob);
  }
}

実行コードの例：http : //jsfiddle.net/bt7BU/225/

したがって、ニックスの答えに対する変更は次のとおりです。

var items = event.clipboardData.items;

に

var items = (event.clipboardData  || event.originalEvent.clipboardData).items;

また、貼り付けたアイテムから2番目の要素を取得する必要がありました（別のWebページからバッファーに画像をコピーした場合、最初の要素はtext / htmlのようです）。だから私は変わった

  var blob = items[0].getAsFile();

画像を含むアイテムを検索するループに（上記を参照）

私はニックの答えに直接答える方法を知りませんでした、ここで問題ないでしょう：$ :)

取引全体をまとめたスムーズなjQueryプラグインを以下に示します（基本的にはNickの回答と同じ原則です）：http : //strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

ライブデモ、注釈付きソースコード、その他すべてが揃っています。

Webブラウザーは前進を続けています。私は最近これを見つけました：

コードスニペット— JavaScriptを使用してクリップボード画像にアクセスする

この：

Paste Wasteland（または、なぜonPasteイベントが混乱しているのか）

最初のリンクは、FirefoxとChromeでのみJavaScriptを使用してクリップボード画像を取得する方法を説明しています。2番目のリンクには、IE（未知のバージョン）に適用された同じ手法について言及するポストスクリプトが含まれています。

私の知る限りでは -

HTML 5機能（ファイルAPIおよび関連）を使用-プレーンなJavaScriptでクリップボードの画像データにアクセスできるようになりました。

ただし、これはIE（IE 10未満）では機能しません。IE10のサポートについてもあまり知りません。

IEの場合、「フォールバック」オプションであると私が信じているオプションは、Adobe AIR apiまたは署名付きアプレットを使用しています。

かっこいい。私はまだそれを理解するためにgmailソースに飛び込んでいません（私はドラッグアウト機能でやった）が、それはクロムがすでに拡張したドラッグ/ドロップAPIの拡張であると推測しています。デスクトップへのドラッグ機能がどのように機能するかについては、まともな記述があります：http : //www.thecssninja.com/javascript/gmail-dragoutこれは、少なくとも正しい方向にあなたを向けるかもしれません。

これは、私のプロジェクトで機能するangular2 typescriptの例からのものです。それが誰かを助けることを願っています。ロジックは他の場合も同様です。

https://gist.github.com/sandeepsuvit/a8ba77faebba260455985504be24aef7

ここにライブ実装があります：

https://stackblitz.com/edit/angular-f7kcny?file=app/app.component.ts