把照片变成字符画最直观的办法是把灰度映射到一串字符。可第一次做出来圆形常常变成长椭圆问题未必在灰度公式而在字符本身不是正方形。等宽字体只保证字符之间等宽不保证一个字格的宽和高相等。假设实测字格宽为 8 像素、高为 16 像素一张 120×120 的图若输出 60 列合理行数约为60×120/120×8/1630。把行数也设成 60显示高度就会翻倍。这里的 8/16 是示例参数需要按实际字体测量。灰度之前先处理透明背景Canvas 的像素说明给出了 RGBA 的排列。透明像素可能保留黑色 RGB 数据直接拿它算灰度会把本应是白纸的地方变成黑洞。例子先在白色背景上合成再用加权灰度挑选字符。权重0.2126/0.7152/0.0722直接作用在这里的字节值上只是一种常用视觉近似。严格的相对亮度计算还涉及色彩空间和线性化不能因为用了三个熟悉的系数就称它为物理准确的光照测量。一个不依赖图片库的核心下面用一张内存中的圆形测试图演示完整转换读者可以直接运行node ascii.js。采样采用格子中心的最近邻因而高频细节会丢失如果接入真实照片应先做区域平均或其他降采样再考虑边缘增强。不要把字符越多解释成还原越准确。白底上的黑色用纯白用空格。输出前不裁掉每行末尾空白否则等宽版面难以比较。发布到网页时用pre、固定字体和行高窄屏允许横向滚动。若只放一张字符画截图还应附上原图说明。本地验证检查了全透明像素归白、纯黑映射、输出行列数量。没有测试真实图片解码、字体度量、浏览器 Canvas 或图像质量。对这个小工具我宁可先把圆画圆再增加“复古滤镜”的名字。可独立运行的核心例子const ramp%#*-:. ; function glyph(r,g,b,a) { const alphaa/255; const v(.2126*r.7152*g.0722*b)*alpha255*(1-alpha); return ramp[Math.min(ramp.length-1,Math.floor(v/256*ramp.length))]; } function ascii(data,w,h,cols,cellW8,cellH16) { if(data.length!w*h*4 || w1 || h1 || !Number.isInteger(cols) || cols1) throw Error(尺寸错误); if(!(cellW0 cellH0)) throw Error(字格尺寸必须为正); const rowsMath.max(1,Math.round(cols*h/w*cellW/cellH)); return Array.from({length:rows},(_,y) Array.from({length:cols},(_,x) { const pxMath.min(w-1,Math.floor((x.5)*w/cols)); const pyMath.min(h-1,Math.floor((y.5)*h/rows)); const i(py*wpx)*4; return glyph(...data.slice(i,i4)); }).join()).join(\n); } const w120,h120,datanew Uint8ClampedArray(w*h*4); for(let y0;yh;y) for(let x0;xw;x) { const v(x-60)**2(y-60)**245**2 ? 0:255; data.set([v,v,v,255],(y*wx)*4); } const outputascii(data,w,h,60); if(glyph(0,0,0,0)! || glyph(0,0,0,255)!) throw Error(灰度错误); const linesoutput.split(\n); if(lines.length!30 || lines.some(xx.length!60)) throw Error(比例错误); console.log(output);
把照片变成字符画最直观的办法是把灰度映射到一串字符。可第一次做出来圆形常常变成长椭圆问题未必在灰度公式而在字符本身不是正方形。等宽字体只保证字符之间等宽不保证一个字格的宽和高相等。假设实测字格宽为 8 像素、高为 16 像素一张 120×120 的图若输出 60 列合理行数约为60×120/120×8/1630。把行数也设成 60显示高度就会翻倍。这里的 8/16 是示例参数需要按实际字体测量。灰度之前先处理透明背景Canvas 的像素说明给出了 RGBA 的排列。透明像素可能保留黑色 RGB 数据直接拿它算灰度会把本应是白纸的地方变成黑洞。例子先在白色背景上合成再用加权灰度挑选字符。权重0.2126/0.7152/0.0722直接作用在这里的字节值上只是一种常用视觉近似。严格的相对亮度计算还涉及色彩空间和线性化不能因为用了三个熟悉的系数就称它为物理准确的光照测量。一个不依赖图片库的核心下面用一张内存中的圆形测试图演示完整转换读者可以直接运行node ascii.js。采样采用格子中心的最近邻因而高频细节会丢失如果接入真实照片应先做区域平均或其他降采样再考虑边缘增强。不要把字符越多解释成还原越准确。白底上的黑色用纯白用空格。输出前不裁掉每行末尾空白否则等宽版面难以比较。发布到网页时用pre、固定字体和行高窄屏允许横向滚动。若只放一张字符画截图还应附上原图说明。本地验证检查了全透明像素归白、纯黑映射、输出行列数量。没有测试真实图片解码、字体度量、浏览器 Canvas 或图像质量。对这个小工具我宁可先把圆画圆再增加“复古滤镜”的名字。可独立运行的核心例子const ramp%#*-:. ; function glyph(r,g,b,a) { const alphaa/255; const v(.2126*r.7152*g.0722*b)*alpha255*(1-alpha); return ramp[Math.min(ramp.length-1,Math.floor(v/256*ramp.length))]; } function ascii(data,w,h,cols,cellW8,cellH16) { if(data.length!w*h*4 || w1 || h1 || !Number.isInteger(cols) || cols1) throw Error(尺寸错误); if(!(cellW0 cellH0)) throw Error(字格尺寸必须为正); const rowsMath.max(1,Math.round(cols*h/w*cellW/cellH)); return Array.from({length:rows},(_,y) Array.from({length:cols},(_,x) { const pxMath.min(w-1,Math.floor((x.5)*w/cols)); const pyMath.min(h-1,Math.floor((y.5)*h/rows)); const i(py*wpx)*4; return glyph(...data.slice(i,i4)); }).join()).join(\n); } const w120,h120,datanew Uint8ClampedArray(w*h*4); for(let y0;yh;y) for(let x0;xw;x) { const v(x-60)**2(y-60)**245**2 ? 0:255; data.set([v,v,v,255],(y*wx)*4); } const outputascii(data,w,h,60); if(glyph(0,0,0,0)! || glyph(0,0,0,255)!) throw Error(灰度错误); const linesoutput.split(\n); if(lines.length!30 || lines.some(xx.length!60)) throw Error(比例错误); console.log(output);
