png images with white

Anything beyond the basics in using the LiveCode language. Share your handlers, functions and magic here.

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller, robinmiller

Post Reply
teacherguy
Posts: 377
Joined: Thu Dec 08, 2011 2:43 am

png images with white

Post by teacherguy » Fri Nov 25, 2016 4:52 am

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
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 5061
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: png images with white

Post by richmond62 » Fri Nov 25, 2016 7:20 pm

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
samplePNGwithTransparency.png (24.34 KiB) Viewed 3623 times
Here's a simple PNG with transparency.

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 8143
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: png images with white

Post by FourthWorld » Fri Nov 25, 2016 7:58 pm

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.
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

teacherguy
Posts: 377
Joined: Thu Dec 08, 2011 2:43 am

Re: png images with white

Post by teacherguy » Fri Nov 25, 2016 9:42 pm

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
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 5061
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: png images with white

Post by richmond62 » Sat Nov 26, 2016 10:22 am

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:
BrowserPNG.png
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 91 times

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 5061
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: png images with white

Post by richmond62 » Sat Nov 26, 2016 5:26 pm

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):
ungrabbable.jpg
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
Posts: 377
Joined: Thu Dec 08, 2011 2:43 am

Re: png images with white

Post by teacherguy » Sat Nov 26, 2016 5:50 pm

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. :cry:

Klaus
Posts: 12067
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: png images with white

Post by Klaus » Sat Nov 26, 2016 6:03 pm

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! :D
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
Posts: 377
Joined: Thu Dec 08, 2011 2:43 am

Re: png images with white

Post by teacherguy » Sat Nov 26, 2016 8:35 pm

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
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 5061
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: png images with white

Post by richmond62 » Sat Nov 26, 2016 9:06 pm

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:
PNGBrowser.gif
Browser for PNG.livecode.zip
Here's the stack.
(195.86 KiB) Downloaded 100 times
I have deliberately put a rounded rectangle graphic with a fairly gross pattern behind the image so you can see the transparency.

teacherguy
Posts: 377
Joined: Thu Dec 08, 2011 2:43 am

Re: png images with white

Post by teacherguy » Sun Nov 27, 2016 1:48 am

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? :lol:

teacherguy
Posts: 377
Joined: Thu Dec 08, 2011 2:43 am

Re: png images with white

Post by teacherguy » Sun Nov 27, 2016 11:23 pm

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.
Attachments
Snapshot.zip
(2.56 KiB) Downloaded 94 times

atmosk
Posts: 32
Joined: Wed Feb 27, 2013 5:50 pm

Re: png images with white

Post by atmosk » Mon Nov 28, 2016 8:14 am

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.

Image

Post Reply

Return to “Talking LiveCode”