ブラウザから透過性のあるPNGをコピーしても背景が黒く表示される
透明度のあるPNG画像をクリップボードにコピーして、Photoshopやペイントなどに貼り付けると、透明度が黒くなってしまいます。- 透明度が黒くなってしまいます。
何か対処法はありますか?ブラウザの問題なのか、アプリケーションの問題なのか、それともクリップボードのOSの問題なのか。
私はWindows 7を使用しており、ChromeとInternet Explorerの最新バージョンでテストしました。
透明度のあるPNG画像をクリップボードにコピーして、Photoshopやペイントなどに貼り付けると、透明度が黒くなってしまいます。- 透明度が黒くなってしまいます。
何か対処法はありますか?ブラウザの問題なのか、アプリケーションの問題なのか、それともクリップボードのOSの問題なのか。
私はWindows 7を使用しており、ChromeとInternet Explorerの最新バージョンでテストしました。
コピーペーストでは透明度が維持されません。ファイルを保存してからPhotoshopでOpen File
を使ってみてください。AFAIKでは、Paintには透過性を有効にしたpngファイルを保存する機能がありません。
Windows**にとって最も便利なので、 @DanLugg のコメントを回答として掲載します。
1.画像を右クリックしてブラウザからCopy Image URL
。
2. PhotoshopでFile->Open
(ctrl-o)を選択し、ダイアログのファイル名の部分にURLを貼り付けます。
- _Photoshop/WindowsはURLを一時ファイルにダウンロードして開きます。 _
OS Xの場合、ファイルを開くダイアログ/シートにはURIを貼り付けるフィールドがありません。その代わりに、ファイルをダウンロードして開いて(例:ブラウザからデスクトップにドラッグして、新しいファイルをDockやPhotoshopドキュメントにドラッグして)、一時ファイルを削除しなければなりません。
FWIW、これはブラウザやOSの問題ではなく、Photoshopの問題のようです。OS XでもWindowsでも、Chrome(OS XではSafariも)から透過性のあるPNG画像をコピーしてIllustratorや他のアプリケーションに貼り付けても、透過性が維持されています。Photoshopだけの問題です。
この問題を解決するための回避策を作りました。PNG をコピーした後にスクリプトを実行すると、透明度を保ったまま Chrome から Photoshop や Paint などに画像を貼り付けることができます。
プログラム + ソース。https://github.com/skoshy/CopyTransparentImages/releases ](https://github.com/skoshy/CopyTransparentImages/releases)
0x3& もし何か問題があれば、ここかGithubで気軽に教えてください!
そこで、この煩わしさに辟易して回避策を作ってみました。
これには2つの要素があります。
AutoHotKeyスクリプトは、Photoshopが現在アクティブかどうかをチェックし、アクティブであればCtrl
+V
のキーの組み合わせをインターセプトし、ユーティリティを実行します。
ユーティリティが画像を %TEMP%\clip.png
に保存した場合、Shift
+Ctrl
+F12
のキーの組み合わせが Photoshop に送られます。
ユーティリティが画像を保存しなかった場合、標準のclip.png
+Ctrl
キーのコンボがPhotoshopに送られ、標準のペーストが実行されます。
全てのソースコードはこちらにあります。 https://github.com/SilverEzhik/ClipboardToPNG ユーティリティはこちらからダウンロードできます。 https://github.com/SilverEzhik/ClipboardToPNG/releases
Photoshop アクションを作成するには、Shift+Ctrl+F12 にマッピングされたキーの組み合わせで新規アクションを作成し(またはスクリプトファイルの組み合わせを変更)、記録中に V
> File
に移動して、ファイル名フィールドに Place Embedded...
をペーストします。
AHKスクリプトのソースコードは以下にあります。AutoHotKeyを使ったことがない場合は、インストールしてから、ClipboardToPNG.exeユーティリティと同じディレクトリに%TEMP%\clip.png
ファイルを保存してから実行してください。
DoPhotoshopPaste() {
RunWait, %A_ScriptDir%\ClipboardToPNG.exe ; run utility, wait for it to complete
if (ErrorLevel == 0) { ; if error code is 0
SendEvent, +^{F12} ; press Shift+Ctrl+F12 to run the designated Photoshop action to paste
}
else {
SendEvent, ^v ; else, just perform a standard paste.
}
}
#IfWinActive ahk_exe Photoshop.exe ; only activate this hotkey when photoshop is active
^v::DoPhotoshopPaste()
#IfWinActive
気になる方は、コピーしたPNGファイルを手動で開いても背景色が黒くなってしまう場合は、アルファチャンネルがないかどうか確認してみてください。
どのソフトでPNGを作成したかにもよりますが、透明度がレイヤーの中にある場合と、アルファチャンネルの中にある場合があるようです。
アルファチャンネルに入っている時のコツは、アルファチャンネルの小さなプレビューをCTRL+クリックして選択し、選択したレイヤーの背景を黒にしてマスクを作成することです(その後、アルファチャンネルを削除することができます)。(そうすればアルファチャンネルを削除することができます)
今調べていたら、かなりの時間を費やしてしまいました。プロトタイピング中にPhotoshopを使って半透明のテクスチャをコピーしたことがあるのですが(Axure RPのコピー先で)、これがなかなかうまくいかない。
さて、html 5の新しいクリップボードAPIを使ってみました。その際に生成されるPNGファイルを解剖してみました。
クリップボードAPIで半透明のテクスチャをブラウザにコピーするためにクリップボード(長方形のマーキー付き)を使うと、アルファバイトをFF(完全に不透明)に設定してくれます。
“Save as Web” PNG 24 ファイルをドラッグ&ドロップ API を使ってブラウザにコピーすると、期待通りに動作し、透明ピクセルが動作します(アルファバイトは強制的に FF に設定されません)。
注意:Photoshopが24bitと言っていても実際は8bitで書き出してしまう(確認済み)。