在没有 canvas 的情况下以纯 JS 生成图像
Generate image in pure JS without canvas
如何从没有canvas的像素数组中generate/draw纯JavaScript（无外部库）图片？我尝试以 URI 形式生成图像但没有成功（图片格式不容易快速理解和实现）
BMP 数据 URI
您可以使用以下函数生成 BMP（位图）dataURI。 24 位 RAW BMP - 16x16 RGB 转换为 2397 字节 dataURI（图像宽度应能被 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 编码的 24 位 16x16 RGB 转换为 1118 字节（比 RAW 少约 2 倍）
/**
* 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 透明 BMP 32 位 RGBA 16x16（3453 字节）
/**
* 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 透明 BMP 32 位 RGBA 16x16（1554 字节 - 比 RAW 少约 2 倍）
/**
* 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>
奖金
你不能对大数组使用符号 String.fromCharCode(...array)（例如 2562564）这会抛出异常（你需要进行转换一-像上面的 base64 代码片段一样）。
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);
透明BMP头的详细信息
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
];
示例代码-高尔夫分形（~5s生成后可以点击图片上的rmb，复制地址粘贴到浏览器地址栏）
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}>`)
您可以使用 div-s
从数组中在屏幕上绘制图片
function draw(image) {
let s=''
let zoom=8;
for(let i=0; i<16; i++) for(let j=0; j<16; j++) {
let k=4*((15-i)*16+j);
let c=`rgba(${image[k+2]},${image[k+1]},${image[k]},${image[k+3]/255})`
s+=`<div style="background: ${c}; width:${zoom}px; height:${zoom}px"></div>`
}
pic.style.width = `${16*zoom}px`;
pic.innerHTML = s;
}
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];
draw(image);
#pic {
display: flex;
flex-flow: wrap;
}
<div id="pic"></div>
如何从没有canvas的像素数组中generate/draw纯JavaScript（无外部库）图片？我尝试以 URI 形式生成图像但没有成功（图片格式不容易快速理解和实现）
BMP 数据 URI
您可以使用以下函数生成 BMP（位图）dataURI。 24 位 RAW BMP - 16x16 RGB 转换为 2397 字节 dataURI（图像宽度应能被 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 编码的 24 位 16x16 RGB 转换为 1118 字节（比 RAW 少约 2 倍）
/**
* 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 透明 BMP 32 位 RGBA 16x16（3453 字节）
/**
* 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 透明 BMP 32 位 RGBA 16x16（1554 字节 - 比 RAW 少约 2 倍）
/**
* 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>
奖金
你不能对大数组使用符号
String.fromCharCode(...array)（例如 2562564）这会抛出异常（你需要进行转换一-像上面的 base64 代码片段一样）。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);透明BMP头的详细信息
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 ];示例代码-高尔夫分形（~5s生成后可以点击图片上的rmb，复制地址粘贴到浏览器地址栏）
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}>`)
您可以使用 div-s
从数组中在屏幕上绘制图片function draw(image) {
let s=''
let zoom=8;
for(let i=0; i<16; i++) for(let j=0; j<16; j++) {
let k=4*((15-i)*16+j);
let c=`rgba(${image[k+2]},${image[k+1]},${image[k]},${image[k+3]/255})`
s+=`<div style="background: ${c}; width:${zoom}px; height:${zoom}px"></div>`
}
pic.style.width = `${16*zoom}px`;
pic.innerHTML = s;
}
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];
draw(image);
#pic {
display: flex;
flex-flow: wrap;
}
<div id="pic"></div>