How do I retrieve raw bitmap data from html5 canvas using JavaScript?

Question

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

Have you seen this older question?

Pointy
– Pointy

2016-01-06 18:54:59 +00:00
Commented Jan 6, 2016 at 18:54 — Pointy
– Pointy, Commented Jan 6, 2016 at 18:54

readysteady · Accepted Answer · 2016-01-06 19:06:09Z

2

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

edited Jan 6, 2016 at 19:06

answered Jan 6, 2016 at 19:00

readysteady

3242 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1869257 Over a year ago

Thanks. Your answer helped me find this article which helped me get where I wanted. hacks.mozilla.org/2011/12/…

user1869257 Over a year ago

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,","");

Collectives™ on Stack Overflow

How do I retrieve raw bitmap data from html5 canvas using JavaScript?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related