ブラウザから透過性のあるPNGをコピーしても背景が黒く表示される

コピーペーストでは透明度が維持されません。ファイルを保存してから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だけの問題です。

これを試してみてください: 透明な画像をコピーして、MS Wordに貼り付けます。その後、Wordからコピー(またはドラッグ/ドロップ)して、他のターゲットプログラムに貼り付けます。

私は、ChromeからVisioにペーストすると黒くなりますが、Wordでは正常に動作し、Wordからコピーすると、Visioに正常に透過的にペーストされます。

この問題を解決するための回避策を作りました。PNG をコピーした後にスクリプトを実行すると、透明度を保ったまま Chrome から Photoshop や Paint などに画像を貼り付けることができます。

プログラム + ソース。https://github.com/skoshy/CopyTransparentImages/releases ](https://github.com/skoshy/CopyTransparentImages/releases)

0x3& もし何か問題があれば、ここかGithubで気軽に教えてください!

ブラウザからPhotoshopなど、PNGファイルを適切に処理してくれるプログラムに画像をドラッグするだけでOKです。

そこで、この煩わしさに辟易して回避策を作ってみました。

これには2つの要素があります。

• クリップボード画像を.pngファイルに保存するために書いた小さなユーティリティ
• AutoHotKey スクリプト

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で書き出してしまう（確認済み）。