png images with white

[teacherguy]

I have been digging through the dictionary, the forums, and the web. I cannot find the answer and it must be simple.

I have png images that include white around the subjects that I would like to treat as alpha/transparent. Although the dictionary says the transparent keyword applies to ios, just below that it says:

The transparent mode can be used only on Mac OS systems. On Unix and Windows systems, objects whose ink property is set to this mode appear as though their ink were set to srcCopy.

So... is there a way to treat white portions of a png image as alpha?

[richmond62]

Frankly I would just open the PNG images up in GIMP [ https://www.gimp.org/ ] and remove the white areas that you want to be transparent
and then the whole problem won't exist.

samplePNGwithTransparency.png (24.34 KiB) Viewed 7832 times

Here's a simple PNG with transparency.

[FourthWorld]

I think maybe that Dictionary entry may need an update, for several reasons. For starters, the only Unix platform LC deploys to these days is macOS (Linux may be Unix-like but isn't true Unix, while macOS is a certified Unix system). Also, I believe PNGs with white area render as white on all platforms by default. And most relevant here, the common way to get transparent regions with PNG is to include an Alpha channel, and LC honors a PNG's Alpha channel on all platforms.

[teacherguy]

Well let me phrase the issue a different way because yes, if I were including the images in the stack before building, I could certainly create the images with the proper alpha channels.

But in this case the user is pinch/zooming a png image in a browser instance and I'm capturing the snapshot (the background of the browser instance is white). So is there a way to treat the browser background as the alpha channel in this situation?

[richmond62]

I set up a stack on Macintosh (as Linux just went 'wonky' in this respect) with a browser instance
and a URL to a PNG image with transparency:

as you can see, it shows up with the "usual" sort of chequered effect
where there is transparency (i.e. NOT white).
I could neither GRAB nor PINCH it to save my life; but, then, I was using
a polycarbonate 2006 iMac with a mouse (Mac OS 10.7.5).

BrowserProb.zip

Here's my stack.

(84.45 KiB) Downloaded 212 times

[richmond62]

Aah: could you clarify things a bit more, please?

When you say that an end-user is

pinch/zooming a png image in a browser instance and I'm capturing the snapshot

does that mean the end-user is
pinching/zooming the image in the browser, or the browser itself?

I am quite unable to do anything with the PNG in my browser instance, although a right-click gives a contextual menu with 3 items
that don't seem to work (Macintosh):

I am, also, interested to know how you are capturing the snapshot, having just made a fool of myself by trying this:

import snapshot from widget "RBrowser"

I assume (?) that you are importing a screenshot using the dimensions of the area that encloses the image; which will, always, capture everything
that is inwith those parameters; unlike something like 'import snapshot from img "box" '.

[teacherguy]

If I do a google image search in my browser instance and choose "View original image" png files do not load into the browser instance with the checkered background.

[Klaus]

You will only see this "checkerboard" in an image editing application indicating that thes parts of the image are transparent -> alpha channel.
Modern browsers display this of course as, well, real transparent areas so you see the background of the page here!

So is there a way to treat the browser background as the alpha channel in this situation?

No, since LC will only see the browser widget as "whole" and not the actual separateparts of a webpage.
You may have to parse the source (htmltext) of the widget and search for a PNG image inside of a "img" html tag.

[teacherguy]

Good call on looking at the html. If I can figure out the percentage of zooming/loc and then just grab the image that would work. Thanks Klaus.

[richmond62]

Of course you can put the URL of a transparent GIF into an empty image like this:

put URL "https://upload.wikimedia.org/wikipedia/ ... tion_1.png" into img "HOLDER"

and then allow end-users to muck around with the size of the image, make snapshots, and so forth with no real troubles at all.

I've just done exactly that successfully, both on a Mac and on Linux:

Browser for PNG.livecode.zip

Here's the stack.

(195.86 KiB) Downloaded 230 times

I have deliberately put a rounded rectangle graphic with a fairly gross pattern behind the image so you can see the transparency.

[teacherguy]

Thanks Richmond. The problems I've been having are (I think) unique to the iOS browser instance. I've been trying to allow the user lots of flexibility in surfing images and being able to pinch/zoom them, and then upon having it sized properly take a snapshot. At that moment the white background of the browser instance was essentially being flattened with the image sitting on top of it, so even if the image had an alpha channel it was lost.

Well.... found this post:

http://forums.livecode.com/viewtopic.ph ... e95#p71598

I was not aware that you can actually set the alpha of the iOS browser to 0!! Now when I take the snapshot I get ONLY the image and not the white background of the browser!

Update: Well, sort of. Now I get the proper dimensions for the rect (the rect of the screenrect) and the image is zoomed exactly as the user left it, but the background is black. Well, at least it's not white lol...progress?

[teacherguy]

Filed a bug today on this issue. Here is the stack I put together to demonstrate how a browser window can have transparent or semi-transparent qualities but the resulting snapshot does not include the proper alphadata. If anyone sees something I'm missing please let me know. Open the stack in the simulator.

[atmosk]

This definitely isn't the ideal solution, but it could work okayish (ultra slow with larger images). Basically just a bandage fix.

Code: Select all

on mouseUp
   lock screen
   put "255,255,255" into transparentColor
   answer file "Select the image"
   put it into fileDir
   if (the result = "Cancel") then
      set the name of me to "Import image"
      exit mouseUp
   end if
   create invisible img 
   put the id of it into tempID
   set the filename of img id tempID to fileDir
   put the imageData of img id tempID into iData; put length(iData) div 4 into LL ;partially copying -hh in this part
   put numToChar(2) into tBlack
   put numToChar(0) into nBlack
   repeat with i = 1 to LL
      put byte 4*i-3 to 4*i of iData into k
      put byteToNum(byte 2 of k) & "," & byteToNum(byte 3 of k) & "," & byteToNum(byte 4 of k) into f
      if (f = transparentColor) then
         put nBlack & nBlack & nBlack into byte 4*i-2 to 4*i of iData
      else if (item 1 of f + item 2 of f + item 3 of f <= 3) then
         put tBlack & tBlack & tBlack into byte 4*i-2 to 4*i of iData
      end if
   end repeat
   set the ink of image id tempID to "transparent"
   set the blendLevel of image id tempID to 1
   set the imageData of img id tempID to iData
   set the visible of img id tempID to  true
   unlock screen
end mouseUp

Just add it to a button to import an image where white is replaced with black (at least on windows black seems to the be the color that's used as the transparent color) and 0,0,0-1,1,1 blacks are moved up to 2,2,2 so they aren't treated as transparent.
While the same transparent colors might not be used on MacOS, all you have to do is replace the transparent color with non-transparent and your desired color as the transparent one.