Post #144,936
3/8/04 6:26:52 PM
3/8/04 11:38:55 PM
|
Creating images on the fly in client side JavaScript
I have a need to generate some raster images on a client browser using JavaScript - not using the server to generate the images. In investigating the matter, I see that you can [link|http://examples.oreilly.com/jscript2/14.2.txt|generate xbm files] on the fly and use the generated string to display in an image node. Seen some useful examples such as [link|http://builder.com.com/5100-6371-1050181.html?tag=s|dynamic barcodes] and [link|http://www.massmind.org/techref/language/java/script/xbmsample.htm|random numbers]. In my application, I've got a bunch of raster images being generated, that I'd like to display in the browser without need of a return trip the server. I can get the results I need shown in the sample code below. However, the method used requires constructing the complete xbm in a Javascript string beforehand. What I really would like is if the writing of the xbm file was somehow cached or buffered. Maybe a generator or somesuch. Anyone used xbm file generation in JavaScript? And if so, have you found a way to lower the memory footprint? Thanks. Sample code follows: <html>\n<head>\n<title>Generate XBM Image From Client Side JavaScript</title>\n</head>\n<body>\n<script language='JavaScript' type='text/javascript'>\n<!--\n // map the bitmap value into output string (note the nibble/octet swap)\n HexMap = [\n "0x00","0x10","0x20","0x30","0x40","0x50","0x60","0x70","0x80","0x90","0xa0","0xb0","0xc0","0xd0","0xe0","0xf0",\n "0x01","0x11","0x21","0x31","0x41","0x51","0x61","0x71","0x81","0x91","0xa1","0xb1","0xc1","0xd1","0xe1","0xf1",\n "0x02","0x12","0x22","0x32","0x42","0x52","0x62","0x72","0x82","0x92","0xa2","0xb2","0xc2","0xd2","0xe2","0xf2",\n "0x03","0x13","0x23","0x33","0x43","0x53","0x63","0x73","0x83","0x93","0xa3","0xb3","0xc3","0xd3","0xe3","0xf3",\n "0x04","0x14","0x24","0x34","0x44","0x54","0x64","0x74","0x84","0x94","0xa4","0xb4","0xc4","0xd4","0xe4","0xf4",\n "0x05","0x15","0x25","0x35","0x45","0x55","0x65","0x75","0x85","0x95","0xa5","0xb5","0xc5","0xd5","0xe5","0xf5",\n "0x06","0x16","0x26","0x36","0x46","0x56","0x66","0x76","0x86","0x96","0xa6","0xb6","0xc6","0xd6","0xe6","0xf6",\n "0x07","0x17","0x27","0x37","0x47","0x57","0x67","0x77","0x87","0x97","0xa7","0xb7","0xc7","0xd7","0xe7","0xf7",\n "0x08","0x18","0x28","0x38","0x48","0x58","0x68","0x78","0x88","0x98","0xa8","0xb8","0xc8","0xd8","0xe8","0xf8",\n "0x09","0x19","0x29","0x39","0x49","0x59","0x69","0x79","0x89","0x99","0xa9","0xb9","0xc9","0xd9","0xe9","0xf9",\n "0x0a","0x1a","0x2a","0x3a","0x4a","0x5a","0x6a","0x7a","0x8a","0x9a","0xaa","0xba","0xca","0xda","0xea","0xfa",\n "0x0b","0x1b","0x2b","0x3b","0x4b","0x5b","0x6b","0x7b","0x8b","0x9b","0xab","0xbb","0xcb","0xdb","0xeb","0xfb",\n "0x0c","0x1c","0x2c","0x3c","0x4c","0x5c","0x6c","0x7c","0x8c","0x9c","0xac","0xbc","0xcc","0xdc","0xec","0xfc",\n "0x0d","0x1d","0x2d","0x3d","0x4d","0x5d","0x6d","0x7d","0x8d","0x9d","0xad","0xbd","0xcd","0xdd","0xed","0xfd",\n "0x0e","0x1e","0x2e","0x3e","0x4e","0x5e","0x6e","0x7e","0x8e","0x9e","0xae","0xbe","0xce","0xde","0xee","0xfe",\n "0x0f","0x1f","0x2f","0x3f","0x4f","0x5f","0x6f","0x7f","0x8f","0x9f","0xaf","0xbf","0xcf","0xdf","0xef","0xff"];\n\n // image attributes\n var myImageWidth = 512;\n var myImageHeight = 500;\n\n // allocate array to hold each line of the raster image\n var myImageArray = new Array(myImageHeight);\n for (var i = 0; i < myImageArray.length; i++) {\n myImageArray[i] = new Array(Math.ceil(myImageWidth / 8));\n }\n\n // generate the bitmapped image in the array\n // (for now fake image - all bits set)\n for (var i = 0; i < myImageArray.length; i++) {\n for (var j = 0; j < myImageArray[i].length; j++) {\n myImageArray[i][j] = 0xFF;\n }\n }\n\n // create the xbm file format string\n var myImageString = [];\n var k = 0;\n for (var i = 0; i < myImageArray.length; i++) {\n for (var j = 0; j < myImageArray[i].length; j++) {\n myImageString[k++] = HexMap[myImageArray[i][j]];\n }\n }\n\n-->\n</script>\n <img src='javascript:"#define cmr_width " + myImageWidth + "\\n" +\n "#define cmr_height " + myImageHeight + "\\n" +\n "#define cmr_x_hot -1\\n#define cmr_y_hot -1\\nstatic char cmr_bits[] = {\\n" +\n myImageString.toString() + "};\\n"'>\n</body>\n</html>\n
Edited by ChrisR
March 8, 2004, 11:00:41 PM EST
Creating images on the fly in client side JavaScript
I have a need to generate some raster images on a client browser using JavaScript - not using the server to generate the images. In investigating the matter, I see that you can [link|http://examples.oreilly.com/jscript2/14.2.txt|generate xbm files] on the fly and use the generated string to display in an image node. Seen some useful examples such as [link|http://builder.com.com/5100-6371-1050181.html?tag=s|dynamic barcodes] and [link|http://www.massmind.org/techref/language/java/script/xbmsample.htm|random numbers]. In my application, I've got a bunch of raster images being generated, that I'd like to display in the browser without need of a return trip the server. I can get the results I need shown in the sample code below. However, the method used requires constructing the complete xbm in a Javascript string beforehand. What I really would like is if the writing of the xbm file was somehow cached or buffered. Maybe a generator or somesuch. Anyone used xbm file generation in JavaScript? And if so, have you found a way to lower the memory footprint? Thanks. Sample code follows: <!-- [link|http://examples.oreilly.com/jscript2/14.2.txt|http://examples.orei...jscript2/14.2.txt] --> <html> <head> <title>Generate XBM Image From Client Side JavaScript</title> </head> <body> <script language='JavaScript' type='text/javascript'> <!-- // image attributes var myImageWidth = 512; var myImageHeight = 20;
// allocate array to hold each line of the raster image var myImageArray = new Array(myImageHeight); for (var i = 0; i < myImageArray.length; i++) { myImageArray[i] = new Array(Math.ceil(myImageWidth / 8)); }
// generate the bitmapped image in the array // (for now fake image - all bits set) for (var i = 0; i < myImageArray.length; i++) { for (var j = 0; j < myImageArray[i].length; j++) { myImageArray[i][j] = 0xFF; } }
// create the xbm file format string var myImageString = "#define cmr_width " + myImageWidth + "\n" + "#define cmr_height " + myImageHeight + "\n" + "#define cmr_x_hot -1\n" + "#define cmr_y_hot -1\n" + "static char cmr_bits[] = {\n"; for (var i = 0; i < myImageArray.length; i++) { for (var j = 0; j < myImageArray[i].length; j++) { if (i+j) myImageString += ","; myImageString = myImageString += "0x" + myImageArray[i][j].toString(16); } } myImageString += "};\n";
// display the image - successful document.write("<img src='javascript:myImageString'>");
// this doesn't work //newWin = window.open("", "win1", "width=500,height=500,resizable"); //newWin.document.open("image/xbm"); //newWin.document.write(myImageString); //newWin.document.close(); --> </script> </body> </html>
Edited by ChrisR
March 8, 2004, 11:38:55 PM EST
Creating images on the fly in client side JavaScript
I have a need to generate some raster images on a client browser using JavaScript - not using the server to generate the images. In investigating the matter, I see that you can [link|http://examples.oreilly.com/jscript2/14.2.txt|generate xbm files] on the fly and use the generated string to display in an image node. Seen some useful examples such as [link|http://builder.com.com/5100-6371-1050181.html?tag=s|dynamic barcodes] and [link|http://www.massmind.org/techref/language/java/script/xbmsample.htm|random numbers]. In my application, I've got a bunch of raster images being generated, that I'd like to display in the browser without need of a return trip the server. I can get the results I need shown in the sample code below. However, the method used requires constructing the complete xbm in a Javascript string beforehand. What I really would like is if the writing of the xbm file was somehow cached or buffered. Maybe a generator or somesuch. Anyone used xbm file generation in JavaScript? And if so, have you found a way to lower the memory footprint? Thanks. Sample code follows: <html>
<head>
<title>Generate XBM Image From Client Side JavaScript</title>
</head>
<body>
<script language='JavaScript' type='text/javascript'>
<!--
// map the bitmap value into output string (note the nibble/octet swap)
HexMap = [
"0x00,","0x10,","0x20,","0x30,","0x40,","0x50,","0x60,","0x70,","0x80,","0x90,","0xa0,","0xb0,","0xc0,","0xd0,","0xe0,","0xf0,",
"0x01,","0x11,","0x21,","0x31,","0x41,","0x51,","0x61,","0x71,","0x81,","0x91,","0xa1,","0xb1,","0xc1,","0xd1,","0xe1,","0xf1,",
"0x02,","0x12,","0x22,","0x32,","0x42,","0x52,","0x62,","0x72,","0x82,","0x92,","0xa2,","0xb2,","0xc2,","0xd2,","0xe2,","0xf2,",
"0x03,","0x13,","0x23,","0x33,","0x43,","0x53,","0x63,","0x73,","0x83,","0x93,","0xa3,","0xb3,","0xc3,","0xd3,","0xe3,","0xf3,",
"0x04,","0x14,","0x24,","0x34,","0x44,","0x54,","0x64,","0x74,","0x84,","0x94,","0xa4,","0xb4,","0xc4,","0xd4,","0xe4,","0xf4,",
"0x05,","0x15,","0x25,","0x35,","0x45,","0x55,","0x65,","0x75,","0x85,","0x95,","0xa5,","0xb5,","0xc5,","0xd5,","0xe5,","0xf5,",
"0x06,","0x16,","0x26,","0x36,","0x46,","0x56,","0x66,","0x76,","0x86,","0x96,","0xa6,","0xb6,","0xc6,","0xd6,","0xe6,","0xf6,",
"0x07,","0x17,","0x27,","0x37,","0x47,","0x57,","0x67,","0x77,","0x87,","0x97,","0xa7,","0xb7,","0xc7,","0xd7,","0xe7,","0xf7,",
"0x08,","0x18,","0x28,","0x38,","0x48,","0x58,","0x68,","0x78,","0x88,","0x98,","0xa8,","0xb8,","0xc8,","0xd8,","0xe8,","0xf8,",
"0x09,","0x19,","0x29,","0x39,","0x49,","0x59,","0x69,","0x79,","0x89,","0x99,","0xa9,","0xb9,","0xc9,","0xd9,","0xe9,","0xf9,",
"0x0a,","0x1a,","0x2a,","0x3a,","0x4a,","0x5a,","0x6a,","0x7a,","0x8a,","0x9a,","0xaa,","0xba,","0xca,","0xda,","0xea,","0xfa,",
"0x0b,","0x1b,","0x2b,","0x3b,","0x4b,","0x5b,","0x6b,","0x7b,","0x8b,","0x9b,","0xab,","0xbb,","0xcb,","0xdb,","0xeb,","0xfb,",
"0x0c,","0x1c,","0x2c,","0x3c,","0x4c,","0x5c,","0x6c,","0x7c,","0x8c,","0x9c,","0xac,","0xbc,","0xcc,","0xdc,","0xec,","0xfc,",
"0x0d,","0x1d,","0x2d,","0x3d,","0x4d,","0x5d,","0x6d,","0x7d,","0x8d,","0x9d,","0xad,","0xbd,","0xcd,","0xdd,","0xed,","0xfd,",
"0x0e,","0x1e,","0x2e,","0x3e,","0x4e,","0x5e,","0x6e,","0x7e,","0x8e,","0x9e,","0xae,","0xbe,","0xce,","0xde,","0xee,","0xfe,",
"0x0f,","0x1f,","0x2f,","0x3f,","0x4f,","0x5f,","0x6f,","0x7f,","0x8f,","0x9f,","0xaf,","0xbf,","0xcf,","0xdf,","0xef,","0xff,"];
// image attributes
var myImageWidth = 512;
var myImageHeight = 100;
// allocate array to hold each line of the raster image
var myImageArray = new Array(myImageHeight);
for (var i = 0; i < myImageArray.length; i++) {
myImageArray[i] = new Array(Math.ceil(myImageWidth / 8));
}
// generate the bitmapped image in the array
// (for now fake image - all bits set)
for (var i = 0; i < myImageArray.length; i++) {
for (var j = 0; j < myImageArray[i].length; j++) {
myImageArray[i][j] = 0xFF;
}
}
// create the xbm file format string
var myImageString = "#define cmr_width " + myImageWidth + "\n" +
"#define cmr_height " + myImageHeight + "\n" +
"#define cmr_x_hot -1\n" +
"#define cmr_y_hot -1\n" +
"static char cmr_bits[] = {\n";
for (var i = 0; i < myImageArray.length; i++) {
for (var j = 0; j < myImageArray[i].length; j++) {
myImageString += HexMap[myImageArray[i][j]];
}
}
myImageString += "};\n";
// display the image - successful
document.write("<img src='javascript:myImageString'>");
-->
</script>
</body>
</html>
|