web-dev-qa-db-ja.com

JavaScriptを使用してクリップボードから画像を貼り付けます

JavaScriptを使用してクリップボードからカスタムリッチテキストエディターに画像を貼り付けるにはどうすればよいですか？ （ctrl + cおよびctrl + vまたはスナップショット）。

誰もがAjaxのリッチテキストエディターを使用しましたか？クリップボードからAjax RTEに画像を貼り付けることはできますか？

あなたの考えを共有してください！

ありがとう！

javascriptclipboardcopy-paste
84
kani

この質問はまだGoogleの検索結果に頻繁に表示されるため、今日はこれが可能であることを指摘したいと思います。 少なくともGoogleではChrome（2011） すべての最新ブラウザ（2018）。 GMailで使用するために実装しましたが、すべてのWebサイトで利用できます。

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

30
max.weller

これは間違いなくChromeとFirefoxで可能です。IE/ Safariについてはよくわかりません。

例としてimgur.com、onpaste、pasteboard.coを見て、 githubのペーストボードのコード と Joelのブログでの優れた記事 を参照してください。

レコードについては、ユーザーが要素でCtrl + Vを押す必要があり、event.clipboardDataから読み取ることでpasteイベントハンドラーでデータをキャプチャできますが、下位レベルで機能させるには、フォーカスが空のcontenteditable要素にあることを確認し、そこから結果をプルする必要があります。 Firefox 22で問題なく動作します。 here を参照してください。

13
Jaykul

Firefox 4などの新しいブラウザーは、クリップボードからRTEへのイメージデータの貼り付けを エンコードされたPNGデータを含むデータURI としてサポートします。ただし、ほとんどのWebアプリケーションはこれらのデータURIを誤って解析し、破棄します。 Yahooメールは適切に処理します。ただし、GmailとHotmailはそれを破棄します。これについてGoogleとMicrosoftに通知しました。

10
Saqib Ali

今のところ clipboardData Object を見つけました。

ただし、クリップボードからテキスト形式またはURLのみを取得します。 clipboardData is IEのみ、文字列で機能し、画像を貼り付けるとnullを返します。

テスト例

 <form>
    <input type="text" id="context"  onClick="paste();">  
  </form>

<script type="text/javascript"> 

function paste() {  

var sRetrieveData = clipboardData.getData("Text");
document.getElementById('context').value = sRetrieveData;        

}
</script>

デフォルトでは、クリップボードへのアクセスはFirefoxでは有効になっていません。説明 here 。一方、 execCommand（） はテキスト値のみを処理し、Firefoxに準拠していません。

他の人が言ったように、コードがIEで動作するという事実はセキュリティリスクであり、どのサイトでもクリップボードのテキストにアクセスできます。

画像の相対URLをコピーする最も簡単な方法は、Javaアプレット、windows activeXプラグイン、 。netコード を使用するか、ドラッグアンドドロップすることです。

10
belaz

他の人を助けるために、ニック・ラタラックの答えをここに残します

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

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

5
Emanuel

残念ながら、クリップボードからRTEに画像を貼り付けることはできません。

画像とテキストを含むMicrosoft Wordなどのデスクトップアプリからblobをコピーすると、画像は壊れた参照として表示され（比率は正しくなります）、テキストは正しく貼り付けられます（書式設定は失われます） 。

可能な唯一のことは、RTE内でイメージをコピーし、RTE内に貼り付けることです。

1
aleemb