3

私はコードのクリップボードから画像を貼り付けるのにfrom hereを使用しています。すべてのブラウザ(Chrome、Firefox、Edge、Opera)で正常に動作します。Mozilla FirefoxとMS Edgeのクリップボードから来るとAlphaが黒くなる

問題は、画像がアルファチャンネル(透明領域)を持つPNGまたはGIFの場合、FirefoxとEdgeではアルファが黒くなります。

ここでは、コードスニペット(or jsfiddle if you prefer)です:

document.getElementById('pasteArea').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! 
 
     document.getElementById("pastedImage").src = event.target.result; 
 
    }; 
 
    reader.readAsDataURL(blob); 
 
    } 
 
}
body { 
 
background-color: skyblue; 
 
}
<textarea id="pasteArea" placeholder="Paste Image Here"></textarea><br> 
 
<img id="pastedImage">

は、ここで私は、次のデモンストレーションで使用するソースイメージです:

source pic

これはで何が起こるかでありますChrome/Opera(良好な出力):

transsourcearrowtranssource

これは、Firefox/EDGE(悪い出力)で何が起こるかです:

transsourcearrowenter image description here

私はまた、のような他のソフトウェアでは、この悪い行動(貼り付けられた黒アルファ)を​​参照してくださいAdobe IllustratorとCorel Drawで、黒いアルファを避けるために、「貼り付け」ではなく「開く」または「配置/読み込み」する必要があります。

システム情報:Windows 10(周年更新版)32ビット。クローム58.0.3029.81、オペラ44.0、Firefoxの53.0、マイクロソフトエッジは38.14393.0.0

私の質問は:私はMozilla Firefoxの/ MSエッジ上のウェブページでを貼り付けた画像に黒のアルファを避けることができる方法は?

+0

私はそれが何に依存しているかについてはあまり気にしていませんが、Edge/38.14393.1066.0で起こるのですが、Firefox/53.0の2つの異なるWindows 10 x64コンピュータでは再現できません。 Edgeで結果として得られる画像は2 KB小さくなります。 –

+0

追加情報:私はWindows 10 32ビット版を使用しています。 Chrome 58.0.3029.81、Opera 44.0、Firefox 53.0、Microsoft Edge 38.14393.0.0 –

+1

Alphaは 'items [i] .getAsFile()'には既に存在しません。私はそれがクリップボードがいくつかのフォーマットでデータを保存するかもしれないという事実に関連していると思う。手元にクリップボードビューアはありませんが、ワープロに画像を貼り付けるときには3つの異なる選択肢があり、そのうちの1つにアルファチャンネルがありません。このAPIを使用するときに選択できるかどうかはわかりません。 –

答えて

0

あなたはこれを自分で回避することはできません。ユーザーがこれを回避できる唯一の方法は、クリップボードを使用してイメージをインポートまたはエクスポートする代わりに、イメージをアップロードまたはダウンロードすることです。

関連する問題