BackgroundCheck

I&#x27;ll start by saying that I think this is pretty cool and clever, and pretty useful for text. It works great on Safari.<p>I should however add, that while moving the elements over the picture, I didn&#x27;t once lose sight of my cursor, as it is black with a white outline, which seems to be a much simpler solution to the problem.

This is a nice step, but not good enough for practical use. Put the text half on the black lamp, half off, and you get 1&#x2F;2 invisible text. While interesting, it&#x27;s not reliably accurate enough to use in any sort of automated fashion.

Didn&#x27;t seem to do anything. I&#x27;m on Chrome 29.0.1547.65.<p><i></i>Edit<i></i>: I tried again, this time releasing the elements. It sounded like it should be live updating as I&#x27;m dragging in the description, but it&#x27;s only when you DROP the elements, not DRAG the elements.

I would do it in RGB space. Run kmeans to get a set of Voronoi cell centroids, 5-6 should be good. Then take the Delaunay triangulation of that and pick a color midpoint between Voronoi neighbors that maximizes the distance sum from all the Voronoi generator points.<p>[1] <a href="http://en.wikipedia.org/wiki/File:Delaunay_Voronoi.svg" rel="nofollow">http:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;File:Delaunay_Voronoi.svg</a><p>[2] <a href="http://people.sc.fsu.edu/~jburkardt/isu/reu_2001/voronoi_paper/voronoi.pdf" rel="nofollow">http:&#x2F;&#x2F;people.sc.fsu.edu&#x2F;~jburkardt&#x2F;isu&#x2F;reu_2001&#x2F;voronoi_pap...</a>

So, I&#x27;d propose a modification to handle text:<p>Color is part of the battle, but the real killer is having things of roughly the same frequency behind the text--that is to say, having fine lines and detail of about the same resolution as the letters of the text. That seems to be what makes it harder to pick out words.<p>So, if you could maybe do a 2D FFT or DCT on the area the text would take up, and if the frequencies you find are beyond a certain threshold, add a background color for the text, maybe opacity based on how close in frequency or harmonics the image is to the text.

This is cool but I think the best general solution is bordered text. You can see some edge cases where this solution fails for half the text, like the edge between dark and light on the tub.

It appears this script uses the Canvas element to determine the colour to make the overlaying text or element. It might be worth noting in the README that for images to work being loaded from a CDN like Amazon Cloudfront or Amazon S3 that the header access-control-allow-origin needs to be set to <i>. So like-so: access-control-allow-origin: </i> — otherwise your Canvas is tainted and you can&#x27;t get the image data out of it due to security restrictions...

This is cool, but I found a small defect. If you drag the dot over the images while they are loading, the color change doesn&#x27;t take place. It might be necessary to call your function after images have been loaded on your demo page.

Hehe, nice. I tried to put the small dot on the big one, both had the same dark hue, so I guess it works only on background, not on other placed elements, right?

<a href="http://imgur.com/pQjoQ" rel="nofollow">http:&#x2F;&#x2F;imgur.com&#x2F;pQjoQ</a> White text with black outline can be read on any color.

This is a pretty cool concept, but it still needs a bit of work. While I agree with black borders around the text, I think it seems to meme-like. Maybe work on getting a shadow around the text when it is over multiple colours (e.g. the third picture near the concentration of lights). Other than that, it&#x27;s a great concept, and I&#x27;d love to use it.

Fun idea, but poor execution. Why would you sample an area 4x or more unrelated to the data at hand? You should calculate the tightest bounding-box for your object and then apply the code, or just hit-test the non-transparant part of the current element, because you can still overlay items white on white, as long as the parts around it are dark enough.

This reminds me of Kevin Hale&#x27;s post on Calculating Color Contrast for Legible Text:<p><a href="http://www.particletree.com/notebook/calculating-color-contrast-for-legible-text/" rel="nofollow">http:&#x2F;&#x2F;www.particletree.com&#x2F;notebook&#x2F;calculating-color-contr...</a>

Its good. I kept small drop overlapped on big drop on first picture. Finally, I saw on black drop only. Is should show black drop with white drop at center right?

Elements won&#x27;t drag Firefox 23.0.1

Your demo does not work at all on mobile. I suggest you try pep.JS for drag and drop.

Elements don&#x27;t drag from where I click. They seem to snap.