Is there a way to convert a byte array to image data without relying on canvas?
I currently have this code, but I'm wondering if it can be achieved without using canvas. 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've attempted to convert it to a base64 URI with no luck:
'data:image/png;base64,' + btoa(String.fromCharCode.apply(this, byteArray));Update 2
To separate the question from the issue
The main concern is not the canvas itself, but rather the lack of support in oldIE (and others). Using libraries like excanvas or flashcanvas seems excessive for this specific use case.