StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to get pixel data from canvas which contains the screenshot generated by a chrome extension?
text
Body
copied!<p>I am trying to implement a very simple color picker chrome extension. The idea is simple.</p> <ol> <li>make use of the captureVisibleTab API provided by chrome to get screenshot of current page at regular intervals.</li> <li>load this screenshot in a canvas and then use get getImageData method for canvas context and display color values of the pixel based on the mouse coordinates.</li> </ol> <p>I thought the idea was fairly simple to implement, but it actually did not turn out so well. Any help with the following snippets would be helpful:</p> <p>background.js (working perfectly!)</p> <pre><code>chrome.extension.onMessage.addListener(function(request, sender, sendResponse) { if (request.action == 'capture') { chrome.tabs.captureVisibleTab(null, null, function(dataUrl) { sendResponse({ imageUrl: dataUrl }); }); } return true; }); </code></pre> <p>content_script.js</p> <pre><code>function fill_canvas(){ chrome.extension.sendMessage({action: 'capture'}, function(response) { canvas = document.createElement('canvas'); canvas.width= $(window).width(); canvas.width= $(window).height(); canvasContext = canvas.getContext('2d'); var img = new Image(); img.onLoad = function(){ canvasContext.drawImage(img, 0, 0); } img.src = response.imageUrl; }); } $(document).ready(function(){ fill_canvas(); $(document).mousemove(function(e) { pixelData = canvasContext.getImageData(e.offsetX,e.offsetY, 1, 1).data; console.log(pixelData); }); }); </code></pre> <p><strong>Please expect the surrounding code to be working correctly (like the simple activate extension button) and all relevant permissions granted in the manifest.</strong></p> <p>The output generated for pixelData looks Like:</p> <pre><code>[0, 0, 0, 0, byteLength: 4, byteOffset: 0, buffer: ArrayBuffer, subarray: function, set: function…] </code></pre> <p>which on opening contains lot's of info, except the one I need.</p> <p>Cheers!</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