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