5

I have an html canvas, like so:

//output is a base64string of image data
var oldImage = new Image();
oldImage.onload = function () {
  var resizeRatio = oldImage.width / 500;
  var height = oldImage.height / 2;
};
oldImage.src = output;
var standardizedCanvas = document.createElement("canvas");
standardizedCanvas.setAttribute("width", "500px");
standardizedCanvas.setAttribute("height", height + "px");
standardizedCanvas.getContext("2d").drawImage(oldImage, 0, 0, frontCanvas.width, frontCanvas.height);

So I can read the image into the canvas, and then get the Image Data. But what does that really give me? I need a byte[] from the canvas, which contains the image data, so really I want to convert a base64 string into a byte[]. Am I on the right track, or....?

Munawir
  • 3,346
  • 9
  • 33
  • 51
perennial_
  • 1,798
  • 2
  • 26
  • 41
  • 1
    duplicate? http://stackoverflow.com/questions/12041851/converting-bytes-to-an-image-for-drawing-on-a-html5-canvas – EugenSunic Jul 31 '15 at 00:19
  • I'm confused about what are you trying to do? In general `.getImageData(0,0,canvas.width,canvas.height)` is a way to get an array containing the red, green, blue & alpha values for every pixel on the canvas. Here's a previous SO answer explaining the format of the pixel array: http://stackoverflow.com/questions/22637324/colorpicker-implementation-using-javascript-and-canvas/22641173#22641173 – markE Jul 31 '15 at 01:43

1 Answers1

6

Calling getImageData returns an ImageData object.

Documentation :

https://developer.mozilla.org/en-US/docs/Web/API/ImageData

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData

The data property of an ImageData object is is a byte array of length 4*width*height.

The pixels are ordered top left to bottom right a row at a time, with each pixel be represented by 4 bytes, red, green blue and alpha.

Bob
  • 523
  • 4
  • 11