StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Ok, so if I understand you correctly; What you really want is to get the raw image data for 20x20 squares of the image.</p> <p>Here's how you can extract image data with Canvas (<a href="http://jsfiddle.net/LzrN9/3/" rel="nofollow">also on jsFiddle</a>):</p> <pre class="lang-js prettyprint-override"><code>var dpH = 500, dpW = 400, ctx = document.getElementById('p').getContext('2d'), exportData = function() { var data; for (var y=0, yl=dpH/20; y<yl; y++) { for (var x=0, xl=dpW/20; x<xl; x++) { imgData = ctx.getImageData(x*20, y*20, 20, 20).data; console.log("Image data for " + x*20 + ", " + y*20, imgData); // data is an array with 4 values pr pixel // Top left pixel in the 20x20 square r = imgData[0]; // red g = imgData[1]; // green b = imgData[2]; // blue a = imgData[3]; // alpha console.log("RGBa of " + x*20 + ", " + y*20 + ": ", r, g, b, a); } } }, drawImage = function() { ctx.drawImage(this, 0, 0); exportData(this); }; var img = new Image(); img.onload = drawImage; img.src = "image.png"; // has to be on the same domain </code></pre> <hr> <p>** Original answer **</p> <ol> <li><p>The result is a DIV with an SVG-element inside, and a background image behind it. The browser (<a href="http://caniuse.com/svg" rel="nofollow">if it supports SVG</a>) will render them on top of each other. Do you want to extract pixel values? If so, you have to do this through HTML5 Canvas instead of SVG.</p></li> <li><p>Sorry, I don't understand. What are you trying to accomplish? Do you want the pixel data for 20x20 squares? With Raphael you are just drawing lines on top of the picture.</p></li> <li><p>The defaut with of a path is 1 pixels. You can change this by setting an <a href="http://raphaeljs.com/reference.html#Element.attr" rel="nofollow">attribute</a> on the path. Example (<a href="http://jsfiddle.net/LzrN9/" rel="nofollow">also on jsfiddle.net</a>):</p></li> </ol> <pre class="lang-js prettyprint-override"><code>var dpH = 500, dpW = 400, drawPad = Raphael(document.getElementById('p'), dpW, dpH), style = { "stroke" : "#fff", // white "stroke-width" : 2 // default 1 }; for ( var i = 0; i <= dpH / 20; i++) { drawPad.path("M" + 1 + " " + ((i * 20) + 1) + "L" + dpW + " " + ((i * 20) + 1)).attr(style); } for ( var j = 0; j <= (dpW / 20); j++) { drawPad.path("M" + ((j * 20) + 1) + " " + 1 + "L" + ((j * 20) + 1) + " " + dpH).attr(style); } </code></pre>

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