Issue with marginal (but important) color differences with some base64 encoded images.

0 views
Skip to first unread message

mechanic...@gmail.com

unread,
Feb 5, 2014, 7:59:09 PM2/5/14
to node-...@googlegroups.com
I'm having a strange problem with a base64 encoded image being rendered with a very slight difference in the colors. I'm taking an image out of a packed file using the node filesystem, then converting that buffer to base64 and attaching it to an image in javascript using a new image object. This works fine with some images, but with others the color difference appears. It's at this point that the color difference occurs. From here I would normally put this image object into a canvas and do some manipulations using exact hex color replacements.

I know this probably has something to do with node-webkit or one of it's components for a few reasons. First, when I spit out the base64 string for the problem image into the console and open that in a new node-webkit window as a regular image, the color difference still occurs. Second, if I instead use fs to write that same base64 image to a file and open it in any other image rendering program (Windows Photo Viewer, Photoshop), the image does NOT have the color difference, and appears as it should. Finally, and most importantly, this issue only seems to happen on Windows 8.1. I have all my working files on dropbox, so I opened up my laptop and ran the same files using the same node-webkit binary on Windows 7 and the problem does not occur.

Now, the really weird thing to me is it doesn't happen to all images, and the images it does happen to DO have a pattern. I'm compiling various parts of a humanoid sprite into a single object, and it seems that the body and head parts of the sprite (both of which are separate images) have this color change while both left and right arms are completely fine. And, again, this only happens on Windows 8.1.

Is there anything I should be looking for to fix this? I am honestly extremely lost in trying to fix this issue, if I can even fix it at all. Any help or direction would be extremely appreciated. I'm using v0.8.4 of node-webkit for this.

mechanic...@gmail.com

unread,
Feb 5, 2014, 9:40:03 PM2/5/14
to node-...@googlegroups.com, mechanic...@gmail.com
Seems to possibly be a gamma issue with PNGs. This happens on my regular chrome browser as well, the hex colors are slightly darker. For example, where I expect #ffc181 I get #fdc281. I'm currently doing further research on it now that I think I'm on the right path, but I may have been hasty in posting here, as it's looking less like a node-webkit error and more of a general chromium problem.

mechanic...@gmail.com

unread,
Feb 6, 2014, 2:13:49 AM2/6/14
to node-...@googlegroups.com, mechanic...@gmail.com
I ended up using a JS library to strip out unnecessary PNG chunks like gAMA and that seems to have resolved my problem for now. Seems like chromium isn't rendering the PNG accurately under certain circumstances.
Reply all
Reply to author
Forward
0 new messages