一张普通照片拖进网页几毫秒就变成由.:-*#%这些字符拼成的画宽度、字符集、亮度和对比度都能随手调还能一键复制字符画或导出 PNG/TXT。整个过程纯前端完成图片不会上传到任何服务器。先看成品再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署并公开分享。这个工具做什么它把「图片像素」翻译成「灰度字符」做成了一个本地即用的 ASCII 字符画工具拖拽上传拖图或点选图片都行支持 PNG / JPG / WEBP / GIF右侧实时预览字符画。可调输出宽度滑块从 20 到 240 个字符越宽细节越多越窄越有极简味道。6 套字符集标准10、精细70、带块、色块、圆点以及自定义字符集灰度层次随字符数变化。亮度 / 对比度两个独立滑块照片太暗或灰度拉不开时现场调整不必回去重改原图。反色 彩色字符画黑底白字 / 白底黑字一键切换彩色模式会按原图颜色给每个字符上色。导出一键复制字符画到剪贴板或下载 TXT、PNGPNG 是用 Canvas 重新渲染出来的等宽字符图。码道开通免费体验版开始之前先免费开通码道体验版。不需要装任何软件浏览器就能用https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz开通后有三种使用方式WebUI浏览器对话、TUI终端命令行和桌面 IDEIDE 插件。本文用 WebUI 版演示。进入 AI 开发者空间浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_sourceopcsfsqutm_mediumwbwz弹窗「请选择要进入的版本」→ 点击体验版首次使用会跳到华为云登录页扫码登录一次后续浏览器会话复用弹窗「临时凭据自动配置」→ 点击同意沙箱自动创建进入 AI 开发者空间主界面后先等左侧菜单加载出来再找到CodeArts点击它右侧的浏览器图标打开码道 WebUI 对话窗口打开后码道 WebUI 底部输入框提示「尽管吩咐我来帮你搞定」小贴士体验版沙箱 3 小时后自动重置生成完记得把index.html下载保存。任务描述在码道 WebUI 输入框粘贴以下需求回车发送模型默认glm-5.2可直接用开发一个「照片转 ASCII 字符画」网页应用用户可以上传或拖入一张图片应用把图片转换成由黑白 ASCII 字符组成的字符画可调整输出宽度、字符集、亮度/对比度支持一键复制字符画和下载 PNG/文本界面简洁美观单个网页打开即用。完成后用部署功能部署成可访问的网页应用并告诉我访问地址。这轮码道具体做了什么不是把通用 AI 能力复述一遍而是它在这篇项目里的实际动作读取沙箱路径后在/workspace/ascii-art下新建项目目录并清掉了残留的旧目录。发现PYTHONHOME指向了码道自带的python3.12会导致端口检测异常改用纯 bash 的/dev/tcp探测空闲端口启动服务时再清掉相关环境变量。写入约 558 行的单文件index.html原生 HTML/CSS/JS零依赖包含图像读取、灰度采样、亮度对比度、字符集切换、复制与 Canvas 导出等完整逻辑。检测到 3000 端口空闲用python3 -m http.server 3000 --bind 0.0.0.0 --directory /workspace/ascii-art起服务curl自检通过后给出内部预览地址。代码亮点以下是index.html里值得关注的设计思路和实现细节。1. 用加权灰度把像素映射到字符图片先画到 Canvas 上再getImageData逐像素采样。每个像素先做 Alpha 混合到黑底再用标准亮度公式转灰度最后按灰度值落到字符集数组的对应下标constgray0.299*r0.587*g0.114*b;letidxMath.floor((gray/255)*n);if(idxn)idxn-1;if(idx0)idx0;constchchars[idx];2. 亮度对比度在采样前先处理像素对比度不是简单乘系数而是套用标准对比度公式(259*(C255))/(255*(259-C))再叠加亮度偏移constcf(259*(contrast255))/(255*(259-contrast));rclamp(cf*(r-128)128brightness);gclamp(cf*(g-128)128brightness);bclamp(cf*(b-128)128brightness);3. 彩色字符画和反色默认是黑白字符开启「彩色字符画」后每个字符用span单独着色颜色就是原图对应像素的颜色「反色」则把 RGB 三点都取反实现黑底白字 / 白底黑字切换constcolinvert?rgb(${255-c.r},${255-c.g},${255-c.b}):rgb(${c.r},${c.g},${c.b});htmlspan stylecolor:${col}${escapeHtml(c.ch)}/span;4. 复制与 PNG 导出复制优先用navigator.clipboard失败再降级到execCommand(copy)。下载 PNG 则直接按字符网格重画一张 Canvas用等宽字体逐格fillText再toBlob下载ctx.font${fontSize}px Courier New, Consolas, monospace;for(lety0;yrows;y){for(letx0;xcols;x){constccells[y*colsx];ctx.fillText(c.ch,padx*charW,pady*charH);}}直接下载试玩本次生成的项目就是单文件index.html没有第三方依赖把文件保存到本地后双击用浏览器打开即可运行。源码同步到公开 Demo Park 仓库Demo Park 仓库https://atomgit.com/deli007/demo_park本案例目录https://atomgit.com/deli007/demo_park/tree/main/codearts-ascii-art-generator总结照片转 ASCII 字符画这一步把「图片处理」这件事拆成了清晰的三段像素采样、灰度/亮度/对比度映射、字符渲染与导出。技术上是 CanvasgetImageData逐像素处理再加上字符集和反色/彩色两处显示层切换前后端都不碰服务器图片隐私也更安心。后续还可以加批量拖图、去色阈值或按区域黑白化。如果还没用过码道可以免费开通体验版https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz 照片转 ASCII 字符画：拖一张图，黑白字符拼出你的脸
一张普通照片拖进网页几毫秒就变成由.:-*#%这些字符拼成的画宽度、字符集、亮度和对比度都能随手调还能一键复制字符画或导出 PNG/TXT。整个过程纯前端完成图片不会上传到任何服务器。先看成品再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署并公开分享。这个工具做什么它把「图片像素」翻译成「灰度字符」做成了一个本地即用的 ASCII 字符画工具拖拽上传拖图或点选图片都行支持 PNG / JPG / WEBP / GIF右侧实时预览字符画。可调输出宽度滑块从 20 到 240 个字符越宽细节越多越窄越有极简味道。6 套字符集标准10、精细70、带块、色块、圆点以及自定义字符集灰度层次随字符数变化。亮度 / 对比度两个独立滑块照片太暗或灰度拉不开时现场调整不必回去重改原图。反色 彩色字符画黑底白字 / 白底黑字一键切换彩色模式会按原图颜色给每个字符上色。导出一键复制字符画到剪贴板或下载 TXT、PNGPNG 是用 Canvas 重新渲染出来的等宽字符图。码道开通免费体验版开始之前先免费开通码道体验版。不需要装任何软件浏览器就能用https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz开通后有三种使用方式WebUI浏览器对话、TUI终端命令行和桌面 IDEIDE 插件。本文用 WebUI 版演示。进入 AI 开发者空间浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_sourceopcsfsqutm_mediumwbwz弹窗「请选择要进入的版本」→ 点击体验版首次使用会跳到华为云登录页扫码登录一次后续浏览器会话复用弹窗「临时凭据自动配置」→ 点击同意沙箱自动创建进入 AI 开发者空间主界面后先等左侧菜单加载出来再找到CodeArts点击它右侧的浏览器图标打开码道 WebUI 对话窗口打开后码道 WebUI 底部输入框提示「尽管吩咐我来帮你搞定」小贴士体验版沙箱 3 小时后自动重置生成完记得把index.html下载保存。任务描述在码道 WebUI 输入框粘贴以下需求回车发送模型默认glm-5.2可直接用开发一个「照片转 ASCII 字符画」网页应用用户可以上传或拖入一张图片应用把图片转换成由黑白 ASCII 字符组成的字符画可调整输出宽度、字符集、亮度/对比度支持一键复制字符画和下载 PNG/文本界面简洁美观单个网页打开即用。完成后用部署功能部署成可访问的网页应用并告诉我访问地址。这轮码道具体做了什么不是把通用 AI 能力复述一遍而是它在这篇项目里的实际动作读取沙箱路径后在/workspace/ascii-art下新建项目目录并清掉了残留的旧目录。发现PYTHONHOME指向了码道自带的python3.12会导致端口检测异常改用纯 bash 的/dev/tcp探测空闲端口启动服务时再清掉相关环境变量。写入约 558 行的单文件index.html原生 HTML/CSS/JS零依赖包含图像读取、灰度采样、亮度对比度、字符集切换、复制与 Canvas 导出等完整逻辑。检测到 3000 端口空闲用python3 -m http.server 3000 --bind 0.0.0.0 --directory /workspace/ascii-art起服务curl自检通过后给出内部预览地址。代码亮点以下是index.html里值得关注的设计思路和实现细节。1. 用加权灰度把像素映射到字符图片先画到 Canvas 上再getImageData逐像素采样。每个像素先做 Alpha 混合到黑底再用标准亮度公式转灰度最后按灰度值落到字符集数组的对应下标constgray0.299*r0.587*g0.114*b;letidxMath.floor((gray/255)*n);if(idxn)idxn-1;if(idx0)idx0;constchchars[idx];2. 亮度对比度在采样前先处理像素对比度不是简单乘系数而是套用标准对比度公式(259*(C255))/(255*(259-C))再叠加亮度偏移constcf(259*(contrast255))/(255*(259-contrast));rclamp(cf*(r-128)128brightness);gclamp(cf*(g-128)128brightness);bclamp(cf*(b-128)128brightness);3. 彩色字符画和反色默认是黑白字符开启「彩色字符画」后每个字符用span单独着色颜色就是原图对应像素的颜色「反色」则把 RGB 三点都取反实现黑底白字 / 白底黑字切换constcolinvert?rgb(${255-c.r},${255-c.g},${255-c.b}):rgb(${c.r},${c.g},${c.b});htmlspan stylecolor:${col}${escapeHtml(c.ch)}/span;4. 复制与 PNG 导出复制优先用navigator.clipboard失败再降级到execCommand(copy)。下载 PNG 则直接按字符网格重画一张 Canvas用等宽字体逐格fillText再toBlob下载ctx.font${fontSize}px Courier New, Consolas, monospace;for(lety0;yrows;y){for(letx0;xcols;x){constccells[y*colsx];ctx.fillText(c.ch,padx*charW,pady*charH);}}直接下载试玩本次生成的项目就是单文件index.html没有第三方依赖把文件保存到本地后双击用浏览器打开即可运行。源码同步到公开 Demo Park 仓库Demo Park 仓库https://atomgit.com/deli007/demo_park本案例目录https://atomgit.com/deli007/demo_park/tree/main/codearts-ascii-art-generator总结照片转 ASCII 字符画这一步把「图片处理」这件事拆成了清晰的三段像素采样、灰度/亮度/对比度映射、字符渲染与导出。技术上是 CanvasgetImageData逐像素处理再加上字符集和反色/彩色两处显示层切换前后端都不碰服务器图片隐私也更安心。后续还可以加批量拖图、去色阈值或按区域黑白化。如果还没用过码道可以免费开通体验版https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz