0

I would like to know how to extract the raw data from a html5 canvas as raw bitmap pixel data and store it in a variable.

So far I have setup my html5 canvas with an image in it: https://jsfiddle.net/t21mjh5L/1/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("myimg");
ctx.drawImage(img,0,0);
var bitmapData;
//retrieve image data as raw bitmap
user1869257
  • 505
  • 2
  • 6
  • 16
  • Have you seen [this older question](http://stackoverflow.com/questions/667045/getpixel-from-html-canvas)? – Pointy Jan 06 '16 at 18:54

1 Answers1

3

you can try to get bitmap data like this :

var myImageData = ctx.getImageData(left, top, width, height).data;

More information about getting image data can be found here

readysteady
  • 316
  • 2
  • 8
  • Thanks. Your answer helped me find this article which helped me get where I wanted. https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/ – user1869257 Jan 06 '16 at 19:49
  • Also if anyone is interested this is how you can get raw jpeg data: var jpegRawData = canvas.toDataURL("image/jpeg", 1.0).replace("data:image/jpeg;base64,",""); – user1869257 Jan 07 '16 at 17:42