Copying PNG with transparency from browser shows a black background instead

Question

When I copy a PNG image with transparency to the clipboard and subsequently paste it into Photoshop, Paint, etc. - the transparency turns to black.

Is there any workaround for this? Is this a browser issue, an application issue or an OS issue with the clipboard?

I'm using Windows 7 and tested with the latest versions of Chrome and Internet Explorer.

Answer 1

Copy-Paste doesn't maintain transparency. Try saving file and then use Open File in Photoshop. AFAIK, Paint doesn't have the ability to save transparency enabled png files.

Answer 2

Posting the comment by @DanLugg as an answer, as it is the most convenient for Windows, IMHO:

1. Right-click on the image and Copy Image URL from the browser.
2. In Photoshop choose File->Open (ctrl-o) and paste the URL into the filename portion of the dialog.
   • Photoshop/Windows will download the URL to a temporary file and open it.

For OS X, there is no field in an Open File Dialog/Sheet where one could paste a URI. Instead, you must download the file and open it (e.g. drag from browser to Desktop, then drag the new file onto the Dock or into your Photoshop document) and then delete the temporary file.

---

FWIW, this appears to be a Photoshop problem, not a browser or OS problem. On both OS X and Windows, I can copy a PNG image with transparency from Chrome (and also Safari on OS X) and paste it into Illustrator or other applications and have it maintain transparency. Photoshop alone is to blame.

Answer 3

Try this: copy the transparent image, paste into MS Word. THEN copy it (or drag/drop) from word and paste it to the other target program.

I found a paste into Visio from Chrome turns black, but works properly in Word, and then copied from Word it pastes properly and transparently into Visio.

Answer 4

You can just drag the image from the browser to Photoshop or whatever program that will properly handle a PNG file.

Answer 5

I made a workaround that addresses the issue. Running my script after copying a PNG allows you to paste an image from Chrome into Photoshop, Paint, etc with the transparency in tact.

Program + Source: https://github.com/skoshy/CopyTransparentImages/releases

If you run into any issues with it, feel free to let me know here or on Github!

Answer 6

So I got fed up with this annoyance and made a workaround.

There are two pieces to it:

• A tiny utility I wrote to save the clipboard image to a .png file
• An AutoHotKey script

The AutoHotKey script checks if Photoshop is currently active, and if so it intercepts the Ctrl+V key combination, and then it runs the utility.

If the utility saved an image to %TEMP%\clip.png, the Shift+Ctrl+F12 key combination is sent to Photoshop, which I have mapped to a Photoshop Action to place the clip.png file into the currently open document.

If the utility did not save the image, the standard Ctrl+V key combo is sent to Photoshop and a standard paste is performed.

All the source code is available here: https://github.com/SilverEzhik/ClipboardToPNG, and the utility can be downloaded here: https://github.com/SilverEzhik/ClipboardToPNG/releases

To create the Photoshop Action, just make a new action with the key combination mapped to Shift+Ctrl+F12 (or change the combination in the script file), and then while recording, go to File > Place Embedded..., and paste %TEMP%\clip.png in the file name field.

The source code for the AHK script is provided below - if you haven't used AutoHotKey before, install it, then save the code to a filename.ahk file to the same directory as the ClipboardToPNG.exe utility, and then just run it.

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

Answer 7

I just spent a lot of time looking into this. I've used Photoshop to copy semi-transparent textures for some time while prototyping (with the destination of Axure RP).

Now, I've tried using the new clipboard API in html 5. I dissected the PNG files that are generated by this process.

If I use the clipboard (with a rectangular marquee) to copy a semi-transparent texture to the browser with the clipboard API, it sets the alpha byte to FF (completely opaque).

If I use the drag and drop API to copy a "Save as Web" PNG 24 file to the browser, it works as expected and transparent pixels work (and the alpha byte is not forced to FF).

Note: Even thought Photoshop says it's 24 bit, it actually exports it as 8 bit still (confirmed).

Answer 8

For anyone wondering, if you get a black background color on a copied PNG file even when opening it manually, try checking if there isn't an alpha channel.

Seems like depending on which software was used to make the PNG, the transparency is sometimes kept as it inside the layers, but some other time, it's kept in an alpha channel.

A trick when it's in the alpha channel is simply to CTRL+Click on the alpha channel's small preview to select it and then create a mask on the layer with the black background from the selection. (Then you can delete the alpha channel)