www/js/app.js
// data is expected to be a 2 dimensional array of pixel color values
data is expected to be a 2 dimensional array of pixel color values
data is expected to be a 2 dimensional array of pixel color values
function imageFromData(data) {
    var w = pixelData.length;
    var h = pixelData[0].length;
    var arr = [];
    for(var y = 0; y < h; y++) {
        for(var x = 0; x < w; x++) {
            var clr = pixelData[x][y];
            var pixel = [0,0,0,255];
            var loc = 4 * (y * w + x);
            if(clr) {
                pixel[0] = parseInt("0x" + clr.substr(1,2));
                pixel[1] = parseInt("0x" + clr.substr(3,2));
                pixel[2] = parseInt("0x" + clr.substr(5,2));
            }
            arr[loc] = pixel[0];
            arr[loc + 1] = pixel[1];
            arr[loc + 2] = pixel[2];
            arr[loc + 3] = pixel[3];
        }
    }
    var tempCanvas = document.createElement("canvas");
    tempCanvas.width = w / 2;
    tempCanvas.height = h / 2;
    var ctx = tempCanvas.getContext('2d');
    var imageData = ctx.createImageData(w,h);
    imageData.data.set(arr);
    ctx.putImageData(imageData,0,0);
    var imgData = tempCanvas.toDataURL("image/png", 1.0);
    return imgData;
}
function imageFromData ( data ) { var w = pixelData . length ; var h = pixelData [ 0 ] . length ; var arr = [ ] ; for ( var y = 0 ; y < h ; y ++ ) { for ( var x = 0 ; x < w ; x ++ ) { var clr = pixelData [ x ] [ y ] ; var pixel = [ 0 , 0 , 0 , 255 ] ; var loc = 4 * ( y * w + x ) ; if ( clr ) { pixel [ 0 ] = parseInt ( "0x" + clr . substr ( 1 , 2 ) ) ; pixel [ 1 ] = parseInt ( "0x" + clr . substr ( 3 , 2 ) ) ; pixel [ 2 ] = parseInt ( "0x" + clr . substr ( 5 , 2 ) ) ; } arr [ loc ] = pixel [ 0 ] ; arr [ loc + 1 ] = pixel [ 1 ] ; arr [ loc + 2 ] = pixel [ 2 ] ; arr [ loc + 3 ] = pixel [ 3 ] ; } } var tempCanvas = document . createElement ( "canvas" ) ; tempCanvas . width = w / 2 ; tempCanvas . height = h / 2 ; var ctx = tempCanvas . getContext ( '2d' ) ; var imageData = ctx . createImageData ( w , h ) ; imageData . data . set ( arr ) ; ctx . putImageData ( imageData , 0 , 0 ) ; var imgData = tempCanvas . toDataURL ( "image/png" , 1.0 ) ; return imgData ; }
data is expected to be a 2 dimensional array of pixel color values
data is expected to be a 2 dimensional array of pixel color values
// var tSty = tempCanvas.style; // tSty.position = "absolute"; // tSty.right = "20px"; // tSty.bottom = "20px"; // tSty.border = "solid 1px Red"; // document.body.appendChild(tempCanvas); // not sure why the canvas has to be halved, but the image comes out all mucked otherwise.