Page 1 of 1
png images with white
Posted: Fri Nov 25, 2016 4:52 am
by 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?
Re: png images with white
Posted: Fri Nov 25, 2016 7:20 pm
by 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 9803 times
Here's a simple PNG with transparency.
Re: png images with white
Posted: Fri Nov 25, 2016 7:58 pm
by 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.
Re: png images with white
Posted: Fri Nov 25, 2016 9:42 pm
by 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?
Re: png images with white
Posted: Sat Nov 26, 2016 10:22 am
by 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).
Re: png images with white
Posted: Sat Nov 26, 2016 5:26 pm
by 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" '.
Re: png images with white
Posted: Sat Nov 26, 2016 5:50 pm
by 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.
Re: png images with white
Posted: Sat Nov 26, 2016 6:03 pm
by 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.
Re: png images with white
Posted: Sat Nov 26, 2016 8:35 pm
by 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.
Re: png images with white
Posted: Sat Nov 26, 2016 9:06 pm
by 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:
I have
deliberately put a
rounded rectangle graphic with a fairly gross pattern behind the image so you can see the transparency.
Re: png images with white
Posted: Sun Nov 27, 2016 1:48 am
by 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?
Re: png images with white
Posted: Sun Nov 27, 2016 11:23 pm
by 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.
Re: png images with white
Posted: Mon Nov 28, 2016 8:14 am
by 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.
