2

と協力して、IEのために働いていません。 Chromeで正常に動作しますが、IEでは動作しません。貼り付けイメージonpaste私は、ユーザーがDIV <code>#pasteImageDiv</code>にペースト<kbd>はCtrl +</kbd><kbd>V</kbd>を介して画像/スクリーンショットを保存しようとしていますクロム

私はIE10を使用しています。

今まで私が見つけたことは、#pasteImageDivのdivにテキストを貼り付けると、IEであってもonpasteというイベントを正常に捕捉できたということです。 テキストの代わりに画像を貼り付けると、onpasteイベントを処理する関数にIEも入力されません。

document.getElementById('pasteImageDiv').onpaste = function (event) {

私はテキスト文字列や画像を貼り付けるかどうかは、Chromeでうまく機能しています。 私が直面している問題の種類を理解していただければ幸いです。それでもなお、追加情報が必要な場合は、お知らせください。

\t $('#pasteImageHere, #pasteImageDiv').click(function(e){ //on paste image button click 
 
\t \t \t e.preventDefault(); 
 
\t \t \t $('#hideOnPaste').hide(); 
 
\t \t \t //document.getElementById('pasteImageDiv').click(); 
 
\t \t document.getElementById('pasteImageDiv').style.backgroundColor = "#F1F1F1"; 
 
\t \t document.getElementById('pasteImageDiv').onpaste = function (event) { 
 
\t \t \t \t $('#hideOnPaste').hide(); 
 
\t \t \t \t //console.log(event.clipboardData.getData('image/png')); 
 
\t \t \t // use event.originalEvent.clipboard for newer chrome versions 
 
\t \t \t var items = (event.clipboardData || event.originalEvent.clipboardData).items; 
 
\t \t \t console.log(JSON.stringify(items)); // will give you the mime types 
 
\t \t \t // find pasted image among pasted items 
 
\t \t \t var blob = null; 
 
\t \t \t for (var i = 0; i < items.length; i++) { 
 
\t \t \t \t if (items[i].type.indexOf("image") === 0) { 
 
\t \t \t \t blob = items[i].getAsFile(); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t // load image if there is a pasted image 
 
\t \t \t if (blob !== null) { 
 
\t \t \t \t var reader = new FileReader(); 
 
\t \t \t \t reader.onload = function(event) { 
 
\t \t \t \t console.log(event.target.result); // data url! 
 
\t \t \t \t var elem = document.createElement("img"); 
 
\t \t \t \t elem.setAttribute("id", "pastedImage"); 
 
\t \t \t \t elem.setAttribute("height", "200"); 
 
\t \t \t \t elem.setAttribute("width", "300"); 
 
\t \t \t \t document.getElementById("pasteImageDiv").appendChild(elem); 
 
\t \t \t \t document.getElementById("pastedImage").src = event.target.result; 
 
\t \t \t \t document.getElementById('inputImageData').value = event.target.result; 
 
\t \t \t \t console.log($('#inputImageData').val()); 
 
\t \t \t \t $('#pastedImage').css('width', '300px'); 
 
\t \t \t \t $('#pastedImage').css('height', '200px'); 
 
\t \t \t \t document.getElementById("pastedImage").style.height = '200px'; 
 
\t \t \t \t }; 
 
\t \t \t \t reader.readAsDataURL(blob); 
 
\t \t \t \t $('#removePastedImage').show(); 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t } 
 
\t 
 
\t \t });

+1

IE10はちょうど私の知る限り –

+0

また、私には思える、それをサポートしていません。 IEに与えて、それが動作することを願っています。 –

+1

私はあなたがここで満足のいく話をしていると思います。私はちょうどそれを試して、Ctrl + Vは私のためにIE7 - 11で動作します。 EdgeやChromeなどは、文書内のペースト*のCtrl-Vのみ受け入れることができます。右クリックしてコンテキストメニューからペーストを選択する必要がある外部コピーを貼り付けることができます。 –

答えて

1

イメージ・ペーストのサポートがIE11に追加されました:

IE11以降では、クリップボードから貼り付けた画像は、デフォルトでbase64エンコードされています。ユーザーは、ローカルファイルシステムからウェブサイトのコンテンツ編集可能な領域に画像を簡単かつ安全にコピー&ペーストすることができます。 IE11より前では、ライブWebサイト(セキュリティゾーンを越えて)にローカルイメージを貼り付けると、ローカルファイルへのアクセスを防ぐためのセキュリティ手段としてイメージアイコンが壊れていました。

IE11は、画像を保存するMicrosoft Officeなどのローカル画像を組み込んだHTMLを貼り付けたり、クリップボードから画像を直接貼り付けることができる最初のブラウザです(写真編集ソフトウェアやPrintScreenなど)一時的にローカルパス)。これらの画像をエンコードするには、DataURIまたはBlobを使用できます。

参照

関連する問題

 関連する問題