search

nprapps / lunchbox

Image tools for social media sharing
http://blog.apps.npr.org/lunchbox/
MIT License
175 stars 144 forks source link

Colors render differently in Chrome and Safari #81

Open duner opened 7 years ago

duner commented 7 years ago

screen shot 2017-01-10 at 6 45 30 pm

This is the exact same version of quotable, with the exact same theme, running in two different browsers. I know I'm color blind, but those colors are not rendering the same.

A first Google suggests that maybe it has something to do with this https://bugs.chromium.org/p/chromium/issues/detail?id=425935:

The canvas specification does not state what colorspace a 2D Canvas pixel buffer uses, so browser implementors are free to use what they feel is appropriate. Chrome's implementation treats it as being in the display's color space (as opposed to some other implementations that use sRGB). Right now drawImage is pretty much the only draw method that does the right thing in terms of color management. Unfortunately, when strokeStyle and fillStyle are constructed from color literals, sRGB colors end up being treated as if they already had the display profile baked in, which is not the case.

duner commented 7 years ago

There is also a color difference between the version that shows up in the GUI in Chrome and the version that gets downloaded. YAY FOR TECHNOLOGY. screen shot 2017-01-10 at 6 49 53 pm

eads commented 7 years ago

I have been wondering if we DO need to render these on a server of some sort. It still might not solve this fucking problem though.

eads commented 7 years ago

The other thing is getting consistent retina-quality versions. HTML2Canvas struggles with that one.

duner commented 7 years ago

@eads Those are the two things I'm kinda trying to figure out right now. I was paroozing @jemory's work on retina quality images earlier https://github.com/nprapps/lunchbox/issues/58 and was maybe going to implement that.

I wonder if there are other options besides HTML2Canvas for doing that kind of thing. Maybe it makes sense to just do everything in canvas from the beginning? I'm not sure if that would fix the color thing though.

duner commented 7 years ago

I also just took a look at the live version of Vox's meme tool and they seem to also have this same problem with colors rendering correctly when downloaded. http://apps.voxmedia.com/tools/meme/sbnation/

eads commented 7 years ago

The color thing seems baked into the canvas implementation and squishiness around color space.

I have a hard time imagining something other than HTML2Canvas (though there might be better implementations of the idea) that don't involve farming out the work to an external server/service.

TylerFisher commented 7 years ago

I've already implemented dom-to-image, which is a far cleaner pipeline, over here https://github.com/nprapps/lunchbox/commit/34eb4d3e6ce80cb34a6fbfe5a80385d0f05c17de. Same issue.