Raw Image Data Conversion In Javascript

I get a raw image data from a server, what are my best options to draw it on a canvas and how do I do it? Please give an insight as I am very new to html and javascript. All I want

Solution 1:

You can use context.createImageData to create an imageData object which you can fill with your RGBA data from your server:

Example code an a Demo: http://jsfiddle.net/m1erickson/XTATB/

// test data fill a 30x20 canvas with red pixels// test width/height is 30x20var canvasWidth=30;
var canvasHeight=20;

// resize the canvas 
canvas.width=canvasWidth;
canvas.height=canvasHeight;

// create some test data (you can use server data in production)var d=[];
for(var i=0;i<canvasWidth*canvasHeight;i++){
    // red & alpha=255 green & blue = 0
    d.push(255,0,0,255);
}

// create a new imageData object with the specified dimensionsvar imgData=ctx.createImageData(canvasWidth,canvasHeight);

// get the data property of the imageData object// this is an array that will be filled with the test datavardata=imgData.data;

// copy the test data (d) into the imageData.data (data)for(var i=0;i<data.length;i++){
    data[i]=d[i];
}

// push the modified imageData object back to the canvas
ctx.putImageData(imgData,0,0);