Generate image in pure JS without canvas

BMP dataURI

You can generate BMP (bitmap) dataURI using below function. RAW BMP with 24-bit - 16x16 RGB is transformed to 2397 bytes dataURI (the image width should be divisable by 4).

/**
 * Generate dataURI raw BMP image
 *
 * @param width - image width (num of pixels)
 * @param pixels - 1D array of RGB pixels (pixel = 3 numbers in
 *                 range 0-255; staring from left bottom corner)
 * @return dataURI string
 */
function genBMPUri(width, pixels) {
  let LE= n=> (n + 2**32).toString(16).match(/\B../g).reverse().join``;
  let wh= LE(width).slice(0,4) + LE(pixels.length/width/3).slice(0,4);
  let size= LE(26+pixels.length);

  let head=`424d${size}000000001a0000000C000000${wh}01001800`;
  
  return "data:image/bmp," + [
           ...head.match(/../g), 
           ...pixels.map(x=> x.toString(16).padStart(2,'0'))
         ].map(x=>'%'+x).join``;
}


// TEST

// 16x16 pixels - 1D Array of pixels (start from bottom-left corner) 
// where one pixel has 3 color component (each 0-255) RGB 
imgagePixels=[0,0,0,8,90,114,0,0,0,0,0,0,8,31,205,8,31,205,8,31,205,8,31,205,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,90,114,8,90,114,8,90,114,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,90,114,8,90,114,8,90,114,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,0,0,0,0,0,0,0,0,0,42,129,252,0,0,0,8,90,114,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,90,114,8,90,114,42,129,252,42,129,252,42,129,252,0,0,0,8,31,205,8,31,205,8,90,114,8,31,205,8,31,205,42,129,252,8,31,205,8,31,205,42,129,252,8,31,205,8,90,114,8,90,114,42,129,252,42,129,252,8,90,114,8,90,114,8,90,114,8,90,114,8,90,114,8,90,114,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,0,0,0,0,0,0,8,90,114,0,0,0,8,90,114,8,90,114,8,90,114,8,90,114,8,90,114,8,90,114,8,90,114,8,31,205,8,90,114,8,90,114,8,90,114,8,31,205,0,0,0,0,0,0,8,90,114,0,0,0,0,0,0,8,90,114,8,90,114,8,90,114,8,90,114,8,90,114,8,31,205,8,90,114,8,90,114,8,90,114,8,31,205,8,90,114,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,42,129,252,42,129,252,42,129,252,42,129,252,42,129,252,42,129,252,42,129,252,8,90,114,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,90,114,8,90,114,42,129,252,42,129,252,42,129,252,42,129,252,8,90,114,8,90,114,8,90,114,8,90,114,8,90,114,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,90,114,42,129,252,8,90,114,8,90,114,42,129,252,42,129,252,42,129,252,8,90,114,42,129,252,42,129,252,42,129,252,8,90,114,0,0,0,0,0,0,0,0,0,0,0,0,8,90,114,42,129,252,8,90,114,42,129,252,42,129,252,42,129,252,8,90,114,42,129,252,42,129,252,8,90,114,8,90,114,8,90,114,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,90,114,8,90,114,8,90,114,42,129,252,42,129,252,8,90,114,42,129,252,0,0,0,8,90,114,8,90,114,8,90,114,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,42,129,252,42,129,252,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,0,0,0,0,0,0,42,129,252,42,129,252,42,129,252,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,42,129,252,42,129,252,42,129,252];

uri = genBMPUri(16, imgagePixels);
msg.innerHTML+= uri;
pic.src= uri;
img{image-rendering: pixelated;width:128px;height:128px}
pre{word-break: break-all;white-space: pre-wrap;}
<img id="pic">
<pre id="msg">Copy below dataURI to browser url top bar or src attrib in img tag<br><br></pre>

Base64 encoded 24bit 16x16 RGB is transformed to 1118 bytes (~2x less than RAW)

/**
 * Generate dataURI base64 BMP image
 *
 * @param width - image width (num of pixels)
 * @param pixels - 1D array of RGB pixels (pixel = 3 numbers in
 *                 range 0-255; staring from left bottom corner)
 * @return dataURI string
 */
function genBMPUri(width, pixels) {
  let LE= n=> (n + 2**32).toString(16).match(/\B../g).reverse().join``;
  let wh= LE(width).slice(0,4) + LE(pixels.length/width/3).slice(0,4);
  let size= LE(26+pixels.length);

  let head=`424d${size}000000001b0000000C000000${wh}0100180000`;
  
  return "data:image/bmp;base64,"
         + btoa(String.fromCharCode(...head.match(/../g).map(x=> +`0x${x}`))) 
         + btoa(pixels.map(p=>String.fromCharCode(p)).join``);
}


// TEST

// 16x16 pixels - 1D Array of pixels (start from bottom-left corner) 
// where one pixel has 3 color component (each 0-255) RGB 
imgagePixels=[0,0,0,8,90,114,0,0,0,0,0,0,8,31,205,8,31,205,8,31,205,8,31,205,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,90,114,8,90,114,8,90,114,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,90,114,8,90,114,8,90,114,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,0,0,0,0,0,0,0,0,0,42,129,252,0,0,0,8,90,114,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,90,114,8,90,114,42,129,252,42,129,252,42,129,252,0,0,0,8,31,205,8,31,205,8,90,114,8,31,205,8,31,205,42,129,252,8,31,205,8,31,205,42,129,252,8,31,205,8,90,114,8,90,114,42,129,252,42,129,252,8,90,114,8,90,114,8,90,114,8,90,114,8,90,114,8,90,114,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,0,0,0,0,0,0,8,90,114,0,0,0,8,90,114,8,90,114,8,90,114,8,90,114,8,90,114,8,90,114,8,90,114,8,31,205,8,90,114,8,90,114,8,90,114,8,31,205,0,0,0,0,0,0,8,90,114,0,0,0,0,0,0,8,90,114,8,90,114,8,90,114,8,90,114,8,90,114,8,31,205,8,90,114,8,90,114,8,90,114,8,31,205,8,90,114,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,42,129,252,42,129,252,42,129,252,42,129,252,42,129,252,42,129,252,42,129,252,8,90,114,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,90,114,8,90,114,42,129,252,42,129,252,42,129,252,42,129,252,8,90,114,8,90,114,8,90,114,8,90,114,8,90,114,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,90,114,42,129,252,8,90,114,8,90,114,42,129,252,42,129,252,42,129,252,8,90,114,42,129,252,42,129,252,42,129,252,8,90,114,0,0,0,0,0,0,0,0,0,0,0,0,8,90,114,42,129,252,8,90,114,42,129,252,42,129,252,42,129,252,8,90,114,42,129,252,42,129,252,8,90,114,8,90,114,8,90,114,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,90,114,8,90,114,8,90,114,42,129,252,42,129,252,8,90,114,42,129,252,0,0,0,8,90,114,8,90,114,8,90,114,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,42,129,252,42,129,252,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,31,205,8,31,205,8,31,205,8,31,205,8,31,205,0,0,0,0,0,0,42,129,252,42,129,252,42,129,252,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,42,129,252,42,129,252,42,129,252];

uri = genBMPUri(16, imgagePixels);
msg.innerHTML+= uri;
pic.src= uri;
img{image-rendering: pixelated;width:128px;height:128px}
pre{word-break: break-all;white-space: pre-wrap;}
<img id="pic">
<pre id="msg">Copy below dataURI to browser url top bar or src attrib in img tag<br><br></pre>

RAW Transparent BMP 32bit RGBA 16x16 (3453 bytes)

/**
 * Generate dataURI raw BMP image
 *
 * @param width - image width (num of pixels)
 * @param pixels - 1D array of RGBA pixels (pixel = 4 numbers in
 *                 range 0-255; staring from left bottom corner)
 * @return dataURI string
 */
function genBMPUri(width, pixels) {
  let LE= n=> (n + 2**32).toString(16).match(/\B../g).reverse().join``;
  let wh= LE(width) + LE(pixels.length/width/4);
  let size= LE(108+pixels.length);
  let r= n=>'0'.repeat(n);
  
  let head = `424d${size}ZZ7AZ006CZ00${wh}01002Z3${r(50)}FFZFFZFFZZZFF${r(104)}`

  return "data:image/bmp," + [
            ...head.replace(/Z/g,'0000').match(/../g), 
            ...pixels.map(x=> x.toString(16).padStart(2,'0'))
         ].map(x=>'%'+x).join``;
}


// TEST
// 16x16 pixels - 1D Array of pixels (start from bottom-left corner) 
// where one pixel has 4 color component (each 0-255) RGBA 
image=[0,0,0,0,8,90,114,16,0,0,0,32,0,0,0,48,8,31,205,64,8,31,205,80,8,31,205,96,8,31,205,112,0,0,0,128,0,0,0,144,0,0,0,160,0,0,0,176,0,0,0,192,0,0,0,208,0,0,0,224,0,0,0,240,0,0,0,0,8,90,114,16,8,90,114,32,8,90,114,48,8,31,205,64,8,31,205,80,8,31,205,96,8,31,205,112,8,31,205,128,8,31,205,144,8,31,205,160,0,0,0,176,0,0,0,192,0,0,0,208,0,0,0,224,0,0,0,240,0,0,0,0,0,0,0,16,8,90,114,32,8,90,114,48,8,90,114,64,8,31,205,80,8,31,205,96,8,31,205,112,8,31,205,128,8,31,205,144,8,31,205,160,8,31,205,176,8,31,205,192,8,31,205,208,0,0,0,224,0,0,0,240,0,0,0,0,42,129,252,16,0,0,0,32,8,90,114,48,8,31,205,64,8,31,205,80,8,31,205,96,8,31,205,112,8,31,205,128,8,31,205,144,8,31,205,160,8,31,205,176,8,31,205,192,8,31,205,208,8,90,114,224,8,90,114,240,42,129,252,0,42,129,252,16,42,129,252,32,0,0,0,48,8,31,205,64,8,31,205,80,8,90,114,96,8,31,205,112,8,31,205,128,42,129,252,144,8,31,205,160,8,31,205,176,42,129,252,192,8,31,205,208,8,90,114,224,8,90,114,240,42,129,252,0,42,129,252,16,8,90,114,32,8,90,114,48,8,90,114,64,8,90,114,80,8,90,114,96,8,90,114,112,8,31,205,128,8,31,205,144,8,31,205,160,8,31,205,176,8,31,205,192,0,0,0,208,0,0,0,224,8,90,114,240,0,0,0,0,8,90,114,16,8,90,114,32,8,90,114,48,8,90,114,64,8,90,114,80,8,90,114,96,8,90,114,112,8,31,205,128,8,90,114,144,8,90,114,160,8,90,114,176,8,31,205,192,0,0,0,208,0,0,0,224,8,90,114,240,0,0,0,0,0,0,0,16,8,90,114,32,8,90,114,48,8,90,114,64,8,90,114,80,8,90,114,96,8,31,205,112,8,90,114,128,8,90,114,144,8,90,114,
160,8,31,205,176,8,90,114,192,0,0,0,208,0,0,0,224,0,0,0,240,0,0,0,0,0,0,0,16,0,0,0,32,0,0,0,48,0,0,0,64,0,0,0,80,42,129,252,96,42,129,252,112,42,129,252,128,42,129,252,144,42,129,252,160,42,129,252,176,42,129,252,192,8,90,114,208,0,0,0,224,0,0,0,240,0,0,0,0,0,0,0,16,0,0,0,32,0,0,0,48,8,90,114,64,8,90,114,80,42,129,252,96,42,129,252,112,42,129,252,128,42,129,252,144,8,90,114,160,8,90,114,176,8,90,114,192,8,90,114,208,8,90,114,224,0,0,0,240,0,0,0,0,0,0,0,16,0,0,0,32,0,0,0,48,8,90,114,64,42,129,252,80,8,90,114,96,8,90,114,112,42,129,252,128,42,129,252,144,42,129,252,160,8,90,114,176,42,129,252,192,42,129,252,208,42,129,252,224,8,90,114,240,0,0,0,0,0,0,0,16,0,0,0,32,0,0,0,48,8,90,114,64,42,129,252,80,8,90,114,96,42,129,252,112,42,129,252,128,42,129,252,144,8,90,114,160,42,129,252,176,42,129,252,192,8,90,114,208,8,90,114,224,8,90,114,240,0,0,0,0,0,0,0,16,0,0,0,32,0,0,0,48,0,0,0,64,8,90,114,80,8,90,114,96,8,90,114,112,42,129,252,128,42,129,252,144,8,90,114,160,42,129,252,176,0,0,0,192,8,90,114,208,8,90,114,224,8,90,114,240,0,0,0,0,0,0,0,16,0,0,0,32,0,0,0,48,0,0,0,64,8,31,205,80,8,31,205,96,8,31,205,112,8,31,205,128,8,31,205,144,8,31,205,160,8,31,205,176,8,31,205,192,8,31,205,208,42,129,252,224,42,129,252,240,0,0,0,0,0,0,0,16,0,0,0,32,0,0,0,48,0,0,0,64,0,0,0,80,8,31,205,96,8,31,205,112,8,31,205,128,8,31,205,144,8,31,205,160,0,0,0,176,0,0,0,192,42,129,252,208,42,129,252,224,42,129,252,240,0,0,0,0,0,0,0,16,0,0,0,32,0,0,0,48,0,0,0,64,0,0,0,80,0,0,0,96,0,0,0,112,0,0,0,128,0,0,0,144,0,0,0,160,0,0,0,176,0,0,0,192,42,129,252,208,42,129,252,224,42,129,252,240]
uri = genBMPUri(16, image);
msg.innerHTML+= uri;
pic.src= uri;
img{position:fixed;image-rendering: pixelated;width:128px;height:128px}
pre{word-break: break-all;white-space: pre-wrap;}
<img id="pic">
<pre id="msg"></pre>

Base64 Transparent BMP 32bit RGBA 16x16 (1554 bytes - ~2x less than RAW)

/**
 * Generate dataURI raw BMP image
 *
 * @param width - image width (num of pixels)
 * @param pixels - 1D array of RGBA pixels (pixel = 4 numbers in
 *                 range 0-255; staring from left bottom corner)
 * @return dataURI string
 */
function genBMPUri(width, pixels) {
  let LE= n=> (n + 2**32).toString(16).match(/\B../g).reverse().join``;
  let wh= LE(width) + LE(pixels.length/width/4);
  let size= LE(109+pixels.length);
  let r= n=>'0'.repeat(n);
  
  let head = `424d${size}ZZ7BZ006CZ00${wh}01002Z3${r(50)}FFZFFZFFZZZFF${r(106)}`

  return "data:image/bmp;base64,"
    + btoa(String.fromCharCode(...head.replace(/Z/g,'0000').match(/../g).map(x=> +`0x${x}`))) 
    + btoa(pixels.map(p=>String.fromCharCode(p)).join``);
}


// TEST
// 16x16 pixels - 1D Array of pixels (start from bottom-left corner) 
// where one pixel has 4 color component (each 0-255) RGBA 
image=[0,0,0,0,8,90,114,16,0,0,0,32,0,0,0,48,8,31,205,64,8,31,205,80,8,31,205,96,8,31,205,112,0,0,0,128,0,0,0,144,0,0,0,160,0,0,0,176,0,0,0,192,0,0,0,208,0,0,0,224,0,0,0,240,0,0,0,0,8,90,114,16,8,90,114,32,8,90,114,48,8,31,205,64,8,31,205,80,8,31,205,96,8,31,205,112,8,31,205,128,8,31,205,144,8,31,205,160,0,0,0,176,0,0,0,192,0,0,0,208,0,0,0,224,0,0,0,240,0,0,0,0,0,0,0,16,8,90,114,32,8,90,114,48,8,90,114,64,8,31,205,80,8,31,205,96,8,31,205,112,8,31,205,128,8,31,205,144,8,31,205,160,8,31,205,176,8,31,205,192,8,31,205,208,0,0,0,224,0,0,0,240,0,0,0,0,42,129,252,16,0,0,0,32,8,90,114,48,8,31,205,64,8,31,205,80,8,31,205,96,8,31,205,112,8,31,205,128,8,31,205,144,8,31,205,160,8,31,205,176,8,31,205,192,8,31,205,208,8,90,114,224,8,90,114,240,42,129,252,0,42,129,252,16,42,129,252,32,0,0,0,48,8,31,205,64,8,31,205,80,8,90,114,96,8,31,205,112,8,31,205,128,42,129,252,144,8,31,205,160,8,31,205,176,42,129,252,192,8,31,205,208,8,90,114,224,8,90,114,240,42,129,252,0,42,129,252,16,8,90,114,32,8,90,114,48,8,90,114,64,8,90,114,80,8,90,114,96,8,90,114,112,8,31,205,128,8,31,205,144,8,31,205,160,8,31,205,176,8,31,205,192,0,0,0,208,0,0,0,224,8,90,114,240,0,0,0,0,8,90,114,16,8,90,114,32,8,90,114,48,8,90,114,64,8,90,114,80,8,90,114,96,8,90,114,112,8,31,205,128,8,90,114,144,8,90,114,160,8,90,114,176,8,31,205,192,0,0,0,208,0,0,0,224,8,90,114,240,0,0,0,0,0,0,0,16,8,90,114,32,8,90,114,48,8,90,114,64,8,90,114,80,8,90,114,96,8,31,205,112,8,90,114,128,8,90,114,144,8,90,114,
160,8,31,205,176,8,90,114,192,0,0,0,208,0,0,0,224,0,0,0,240,0,0,0,0,0,0,0,16,0,0,0,32,0,0,0,48,0,0,0,64,0,0,0,80,42,129,252,96,42,129,252,112,42,129,252,128,42,129,252,144,42,129,252,160,42,129,252,176,42,129,252,192,8,90,114,208,0,0,0,224,0,0,0,240,0,0,0,0,0,0,0,16,0,0,0,32,0,0,0,48,8,90,114,64,8,90,114,80,42,129,252,96,42,129,252,112,42,129,252,128,42,129,252,144,8,90,114,160,8,90,114,176,8,90,114,192,8,90,114,208,8,90,114,224,0,0,0,240,0,0,0,0,0,0,0,16,0,0,0,32,0,0,0,48,8,90,114,64,42,129,252,80,8,90,114,96,8,90,114,112,42,129,252,128,42,129,252,144,42,129,252,160,8,90,114,176,42,129,252,192,42,129,252,208,42,129,252,224,8,90,114,240,0,0,0,0,0,0,0,16,0,0,0,32,0,0,0,48,8,90,114,64,42,129,252,80,8,90,114,96,42,129,252,112,42,129,252,128,42,129,252,144,8,90,114,160,42,129,252,176,42,129,252,192,8,90,114,208,8,90,114,224,8,90,114,240,0,0,0,0,0,0,0,16,0,0,0,32,0,0,0,48,0,0,0,64,8,90,114,80,8,90,114,96,8,90,114,112,42,129,252,128,42,129,252,144,8,90,114,160,42,129,252,176,0,0,0,192,8,90,114,208,8,90,114,224,8,90,114,240,0,0,0,0,0,0,0,16,0,0,0,32,0,0,0,48,0,0,0,64,8,31,205,80,8,31,205,96,8,31,205,112,8,31,205,128,8,31,205,144,8,31,205,160,8,31,205,176,8,31,205,192,8,31,205,208,42,129,252,224,42,129,252,240,0,0,0,0,0,0,0,16,0,0,0,32,0,0,0,48,0,0,0,64,0,0,0,80,8,31,205,96,8,31,205,112,8,31,205,128,8,31,205,144,8,31,205,160,0,0,0,176,0,0,0,192,42,129,252,208,42,129,252,224,42,129,252,240,0,0,0,0,0,0,0,16,0,0,0,32,0,0,0,48,0,0,0,64,0,0,0,80,0,0,0,96,0,0,0,112,0,0,0,128,0,0,0,144,0,0,0,160,0,0,0,176,0,0,0,192,42,129,252,208,42,129,252,224,42,129,252,240]
uri = genBMPUri(16, image);
msg.innerHTML+= uri;
pic.src= uri;
img{position:fixed;image-rendering: pixelated;width:128px;height:128px}
pre{word-break: break-all;white-space: pre-wrap;}
<img id="pic">
<pre id="msg"></pre>

BONUS

  • You cannot use notation String.fromCharCode(...array) with big arrays (e.g. 2562564) this will throw exception (you need to made conversion one-by one like in base64 snippet above).

  • Details for BMP header of example picture (+ little endian procedure which came from here)

                              // hex values, offsets and sizes in little endian
head = [                  // header (before 16x16 RGBA(32bit) pixels  = 1024 bytes raw pixels data)
  "42", "4d",             // "BM" bitmap signature
  "1a", "04", "00", "00", // 0x41a = 1050dec = 16*16*4+26 bytes, total size of header and pixels 
  "00", "00", "00", "00", // reserved
  "1a", "00", "00", "00", // 0x1a=26 bytes, header size (pixels raw data start offset)
  "0C", "00", "00", "00", // 0x0C=12 bytes, Size of DIB header (type signature) - here:  BITMAPCOREHEADER
  "10", "00",             // 0x10=16 pixel, width  INT (little endian)
  "10", "00",             // 0x10=16 pixel, height INT (little endian)
  "01", "00",             // reserved
  "18", "00",             // bit per pixel 0x18=24 (1,4,8,16=0x10,24=0x18,32=0x20)
];

// Conversion to little endian example (padding to 32bit)
// 0x45678 -> 0x00045678 -> 0x78560400
LE = (0x45678 + 2**32).toString(16).match(/\B../g).reverse().join``;
console.log(LE);

  • details of transparent BMP header

    bmpHeaderHex = [
"42", "4d",                  // "BM"
"6c","04","00","00", // 0x46c=1132 size of file in bytes
"00","00","00","00", // reserved
"7a","00","00","00", // 0x7a=122 bitmap raw data start offset (can be changed)
//DIB header
"6c","00","00","00", // 0x6C=108 header size/sign BITMAPV4HEADER
"10","00","00","00", // 0x10=16 pixel width  INT
"10","00","00","00", // 0x10=16 pixel height  INT
"01","00",           // reserved
"20","00",           // 0x20=32 bit per pixel

"03","00","00","00", // BI_BITFIELDS, no pixel array compression used
"00","00","00","00", // Size of the raw bitmap data (including padding)
"00","00","00","00", // width ppm
"00","00","00","00", // height ppm
"00","00","00","00", // colors in palette
"00","00","00","00", // important colors

"00","00","FF","00", // red channel bit mask
"00","FF","00","00", // green channel bit mask
"FF","00","00","00", // blue channel bit mask
"00","00","00","FF", // alpha channel bit mask
"20","6E","69","57", // little-endian 'Win '

"00","00","00","00", // unused 
"00","00","00","00", // unused 
"00","00","00","00", // unused 
"00","00","00","00", // unused 
"00","00","00","00", // unused 
"00","00","00","00", // unused 
"00","00","00","00", // unused 
"00","00","00","00", // unused 
"00","00","00","00", // unused 

"00","00","00","00", // 0 Red Gamma
"00","00","00","00", // 0 Green Gamma
"00","00","00","00", // 0 Blue Gamma
];

  • example code-golf fractal (after ~5s generation you can click rmb on picture, copy its adress and paste in browser adress bar)

    c=512;for(p=i='';j=x=y=0,++i<=c*c;p+=9*c+9*j)while(x*x+y*y<4&&++j-c)[x,y]=[x*x-y*y+i%c/128-2,2*x*y+i/c/128-2]
document.write(`<img src=data:image/bmp;base64,Qk0bAAwAAAAAABsAAAAMAAAAAAIAAgEAGAAA${p}>`)

Tags:

Javascript

Image

Graphics

Data Uri

Related

After upgrading Laravel from 5.6 to 6.0, Call to undefined str_random() function not working Is it possible to disable specific React warnings from Jest (using Create React App) Method Illuminate\Translation\Translator::getFromJson does not exist How to auto-focus with Android CameraX React get state from Redux store within useEffect Why does allocating a single 2D array take longer than a loop allocating multiple 1D arrays of the same total size and shape? EF Core 3 x.Contains() in expression where x is ICollection iOS Simulator (11.1) that comes with Xcode 11.1 GM Seed seems to be unable to boot iOS 13.1 devices How do set text line height in flutter? how to Calculate Percentage in Kotlin syntax? BrowserslistError: Unknown version 67 of android SwiftUI: How to cancel timer in SwiftUI view?

Recent Posts