6

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...

yckart
  • 32,460
  • 9
  • 122
  • 129
  • The only other way, I think, would be by going through a server. – Ted Hopp Apr 21 '13 at 23:49
  • You could potentially convert your image data to base64. e.g. British Blog Directory – Lee Taylor Apr 21 '13 at 23:51
  • @LeeTaylor Yeh, I know already about base64-URIs but not how to convert an byte array to image-data ready b64 code. – yckart Apr 21 '13 at 23:54
  • You can try something like [this](http://stackoverflow.com/a/7372816/825789), but I suspect using a canvas should perform better. – bfavaretto Apr 22 '13 at 02:20
  • On your update: but oldIE also doesn't support data URIs. So, what are you trying to achieve with that? – bfavaretto Apr 23 '13 at 01:00
  • @bfavaretto 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. – yckart Apr 23 '13 at 21:22

2 Answers2

0

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.

markE
  • 102,905
  • 11
  • 164
  • 176
  • 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. :) – yckart Apr 22 '13 at 00:32
  • **Update**: No! Rebuilding the interface doesn't work, sadly :( – yckart Apr 22 '13 at 00:59
  • 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! ;) – markE Apr 22 '13 at 01:03
  • Yeah, it seems so ;( But since I hate answer with the context *no*, I'll play a bit around with base64 encoding. – yckart Apr 22 '13 at 01:42
  • Just think of Canvas as an Advanced Super Powerful Image Class for the web. It's really not that bad. – Jack Franzen Apr 22 '13 at 01:47
0

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.

Josh Marinacci
  • 1,715
  • 1
  • 14
  • 15
  • 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... – yckart Apr 22 '13 at 04:47