Convert byte array to image data without canvas

Question

Is there any way to convert an array of bytes into image data without using a canvas?

I am currently using something similar, but I think it can be done without a canvas, or am I mistaken?

var canvas = document.getElementsByTagName("canvas")[0]; var ctx = canvas.getContext("2d"); var byteArray = [ 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, // red 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, // green 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255 // blue ]; var imageData = ctx.getImageData(0, 0, 10, 3); for(var i = 0; i < byteArray.length; i+=4){ imageData.data[i] = byteArray[i]; imageData.data[i+1] = byteArray[i + 1]; imageData.data[i+2] = byteArray[i + 2]; imageData.data[i+3] = byteArray[i + 3]; } ctx.putImageData(imageData, 0, 0); 

http://jsfiddle.net/ARTsinn/swnqS/

Update

I already tried to convert it to base64-uri, but did not succeed:

'data:image/png;base64,' + btoa(String.fromCharCode.apply(this, byteArray));

Update 2

To split a question into a problem

The canvas itself is not the fact that oldIE (and yet) do not support it .... And libraries like excanvas or flashcanvas seem too bloated for this use case ...

Answer 1

canvas.getImageData returns an ImageData object that looks like this:

 interface ImageData { readonly attribute unsigned long width; readonly attribute unsigned long height; readonly attribute Uint8ClampedArray data; }; 

(see specifications: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#imagedata )

I think you can bind your data to this interface and try it.

If you try let me know how it works :)

Alternatively, you can create a canvas in the cell of your desired width / height - document.createElement ("canvas"), then grab it imagedata and mount your own array. I know this works. Yes ... this contradicts your question, but you do not add the canvas to your page.

Answer 2

Is there a reason you don't want to use the canvas? Actually this is what for canvas. Once you have the image data, what would you do with it? Set it in the browser? Send to server? Download for user? If the problem is that you do not want to have a canvas on the screen, you can create a hidden canvas to do the job.