web-dev-qa-db-ja.com

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

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

その振る舞いから、Chromeで使用される最新バージョンのWebkitはJavascript貼り付けイベントの画像を処理できると仮定する必要がありますが、そのような拡張機能への参照を見つけることができませんでした。 ZeroClipboard はキー押下イベントにバインドしてフラッシュ機能をトリガーするため、コンテキストメニューでは機能しません（また、ZeroClipboardはクロスブラウザーであり、投稿ではChromeでのみ機能すると述べています）。

では、これはどのように機能し、機能を有効にするWebkit（またはChrome）の機能強化はどこで行われたのでしょうか？

javascripthtml5google-chromewebkit
138
Emil Lerch

私はこれを試してみました。新しい Clipboard 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を使用するか、 FormData を使用してXHRに配置できます。

210
Nick Retallack

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

// 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();

画像を含むアイテムを見つけるループへ（上記参照）

私はニックの答えに直接答える方法を知りませんでした、ここでうまくいくことを願っています：$ :)

48
robintibor

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

ライブデモ、注釈付きのソースコードなどがあります。

24
Daniel X Moore

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

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

この：

The Paste Wasteland（または、onPasteイベントが混乱する理由）

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

7
Rich Apodaca

私の知る限りでは -

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

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

IEの場合、「フォールバック」オプションであると考えるオプティエンは、AdobeのAIR APIを使用するか、署名付きアプレットを使用するかのいずれかです。

2
saurshaz

かっこいい。私はまだgmailのソースを調べてそれを理解していません（ドラッグアウト機能を使用しました）が、chromeが既に持っているドラッグ/ドロップAPIの拡張機能であると推測しています拡張されました。デスクトップへのドラッグ機能の仕組みについては、まともな説明があります： http://www.thecssninja.com/javascript/gmail-dragout それは少なくともあなたを正しい方向に向けることができます。

1
Mark Kahn

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

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

ライブ実装は次のとおりです。

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

0
Sandeep K Nair