Convert a byte array to image data without canvas

Question

Is it somehow possible to convert an byte array to image data without using canvas?

I use currently something like this, however I think that can be done without canvas, or am I wrong?

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 already tried to convert it into an base64-uri but no success:

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

Update 2

To split the question from the problem

The canvas itself is it not, rather the fact that oldIE (and else) don't support it. ...And libraries like excanvas or flashcanvas seems a bit too bloated for this use case...

Gaga

The only other way, I think, would be by going through a server. – Merralee

You could potentially convert your image data to base64. e.g. <img src="data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPb WLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVr ApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KT kpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxM AF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs= " alt="British Blog Directory" width="80" height="15" /> – Terricolous

@LeeTaylor Yeh, I know already about base64-URIs but not how to convert an byte array to image-data ready b64 code. – Gaga

You can try something like this, but I suspect using a canvas should perform better. – Magnetite

On your update: but oldIE also doesn't support data URIs. So, what are you trying to achieve with that? – Magnetite

@Magnetite I just need to support ie8+, and and as we know limits ie8 data URIs to a maximum length of 32 KB. (ie9 does not have this limitation). So I don't think that this is a problem. – Gaga

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 the specs: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#imagedata)

I guess you could box your data fitting that interface and try it out.

If you try, let me know how it turns out :)

Alternatively, you could create an in-memory canvas of your desired width/height--document.createElement("canvas"), Then grab its imagedata and plug in your own array. I know this works. Yes...that goes contrary to your question, but you're not adding the canvas to your page.

Bend

Yeah, I had the idea to rebuild the ImageData-interface already too, but did not tried this, yet. I don't believe that this can work, but give me some minutes and I'll try it. :) – Gaga

Update: No! Rebuilding the interface doesn't work, sadly :( – Gaga

I was worried it wouldn't work. I suspect that the CORS "dirty" flag is hidden in the imagedata object somewhere. On the other hand, you could just create that in-memory canvas and you're golden! ;) – Bend

Yeah, it seems so ;( But since I hate answer with the context no, I'll play a bit around with base64 encoding. – Gaga

Just think of Canvas as an Advanced Super Powerful Image Class for the web. It's really not that bad. – Iolite

Answer 2

Is there a reason you don't want to use canvas? This really is what canvas is for. Once you have the image data what would you do with it? Render it in the browser? Send to a server? Download to the user? If the problem is just that you don't want to have a canvas on screen you could create a hidden canvas to do the work.

Olen

The canvas itself is not really the problem, rather the fact that oldIE (and else) don't support it. ...And libraries like excanvas or flashcanvas seems a bit too bloated for this use case... – Gaga