私はコードのクリップボードから画像を貼り付けるのに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">
は、ここで私は、次のデモンストレーションで使用するソースイメージです:
これはで何が起こるかでありますChrome/Opera(良好な出力):
これは、Firefox/EDGE(悪い出力)で何が起こるかです:
私はまた、のような他のソフトウェアでは、この悪い行動(貼り付けられた黒アルファ)を参照してくださいAdobe IllustratorとCorel Drawで、黒いアルファを避けるために、「貼り付け」ではなく「開く」または「配置/読み込み」する必要があります。
システム情報:Windows 10(周年更新版)32ビット。クローム58.0.3029.81、オペラ44.0、Firefoxの53.0、マイクロソフトエッジは38.14393.0.0
私の質問は:私はMozilla Firefoxの/ MSエッジ上のウェブページでを貼り付けた画像に黒のアルファを避けることができる方法は?
私はそれが何に依存しているかについてはあまり気にしていませんが、Edge/38.14393.1066.0で起こるのですが、Firefox/53.0の2つの異なるWindows 10 x64コンピュータでは再現できません。 Edgeで結果として得られる画像は2 KB小さくなります。 –
追加情報:私はWindows 10 32ビット版を使用しています。 Chrome 58.0.3029.81、Opera 44.0、Firefox 53.0、Microsoft Edge 38.14393.0.0 –
Alphaは 'items [i] .getAsFile()'には既に存在しません。私はそれがクリップボードがいくつかのフォーマットでデータを保存するかもしれないという事実に関連していると思う。手元にクリップボードビューアはありませんが、ワープロに画像を貼り付けるときには3つの異なる選択肢があり、そのうちの1つにアルファチャンネルがありません。このAPIを使用するときに選択できるかどうかはわかりません。 –