StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The following is how to do it in JS. Note that the image must be from the same domain to work properly:</p> <pre class="lang-js prettyprint-override"><code>var img = document.getElementById( 'imagebase' ); var canvas = document.getElementById( 'canvasEl' ); // Set Canvas widht and height canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext( '2d' ); ctx.drawImage( img, 0, 0, canvas.width, canvas.height ); // The loop for ( var x = 0, l = canvas.width; x < l; x++ ) { for ( var y = 0, lh = canvas.height; y < lh; y++ ) { // Returns array [Red, Green, Blue, Alpha] each out of 255 var data = ctx.getImageData(x,y,1,1); // Thresholding: More black than white, and more transparent than not if ( ( data[0]+data[1]+data[2] ) / 3 < ( 255 / 2 ) && data[3] > 255 / 2 ) { // Set to black with full opacity data[0] = 0, data[1] = 0, data[2] = 0, data[3] = 255; } else { // Set to transparent data[3] = 0; } ctx.putImageData( data, x, y ); } } </code></pre> <p>I've used dummy ID's to show you how things work. Also, check out <a href="https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas" rel="nofollow">this page</a> for more information about pixel manipulation.</p> <p>That said, this requires canvas to work so it won't be supported in older IE (unless you use Google's replacement canvas, but I'm not sure about its support for all of these methods). The advantage is that it puts the burden on each user instead of on your server for all users.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload