【Codex】保证原图像素不变技术图片美化
技术教程里的配图经常面临一个矛盾原始图片足够准确但视觉效果不够适合发布AI 生成的图片足够漂亮但细节不一定可信。对于接线图、软件截图、数据图、系统架构图这类内容准确性比装饰性更重要。线路位置、模块文字、按钮名称、坐标刻度、颜色标识只要发生变化图片就不能继续作为教学依据。以 K210 接线图为例一张原始接线图里可能包含开发板、LCD 屏幕、面包板、外接模块和多根杜邦线。AI 如果重新生成整张图很可能把线路接到相邻引脚把红线改成橙线把模块文字改成近似字符甚至补出原图里没有的电子元件。对于普通封面图来说这些问题可能只是视觉误差对于硬件实验来说这类误差会直接影响实验判断。更稳妥的方案是把“美观”和“准确”拆开处理。AI 只负责生成信息图模板中央区域保持纯白空白Python 程序负责把原始图片原样贴入中央 frame合成完成后程序再从成品图里裁出原图区域与源图做逐像素对比。这样得到的成品既有教学海报的外观又能保证核心图片没有被 AI 修改。技术图片类型原图里不能被改动的内容直接交给 AI 可能出现的问题硬件接线图引脚位置、线路颜色、模块名称、电源连接关系线路被改接、线条被补全、模块被重画、文字变形软件操作截图菜单名称、按钮位置、窗口状态、版本界面按钮文字被改写、界面布局被重构、图标被替换数据分析图坐标轴、图例、数值标签、颜色映射数据被美化成近似值图例和刻度失去可信度系统架构图节点名称、依赖关系、箭头方向、层级结构模块关系被重新组织箭头方向发生错误教材实拍图设备形态、实验现象、检测结果、局部细节真实细节被生成纹理覆盖实验现象失真文章目录核心思路项目准备批量合成信息图错误与正确校对像素级校验总结核心思路这套流程的核心只有一句话AI 负责漂亮程序负责准确。AI 的优势在于生成统一的视觉风格例如蓝白科技背景、圆角卡片、标题区、说明区、图标装饰和课程海报氛围。AI 不适合承担高精度复刻任务尤其不适合重画电路图、截图、数据图这类对细节敏感的内容。Python 的优势在于坐标可控、批量稳定、结果可验证。只要程序不对原始图片做缩放、裁剪、滤镜、压缩重采样就能把原图作为一个整体贴入成品图中。信息图外壳可以很漂亮但中央核心图像必须由程序在合成末端贴入避免任何装饰元素覆盖或污染原图。角色负责内容不负责内容关键要求image_gen背景、卡片、标题区、说明区、整体视觉风格原始接线图、截图、图表、架构图的重绘中央 frame 必须纯白空白Python读取原图、填充标题、生成缩略图、贴入中央区域、保存成品重新理解图片内容、猜测线路、重画模块原图贴入时不缩放、不裁剪、不加滤镜像素校验从成品图裁出原图区域并做差异对比只靠肉眼判断差异为空才算合格这套方法适合从单个 K210 项目扩展到所有技术图片加工任务。接线图可以换成 Arduino、ESP32、树莓派截图可以换成 PyCharm、VS Code、Django 后台页面图表可以换成 Matplotlib、ECharts、Power BI 仪表盘。只要中间图需要保持真实流程都可以复用。例如成品图如下这里既保证了线路原图的正确同时又美化了信息。项目准备项目目录需要把原图、模板、成品和脚本分开存放。这样做的好处是批量处理更清晰原始素材不会被成品覆盖校验报告也更容易追踪。原图无损信息图生成/ ├─ input/ │ ├─ 1.板载LED流水灯实验_bb.png │ ├─ 2.板载方向按键实验_bb.png │ └─ 3-9.无源蜂鸣器实验_bb.png ├─ template/ │ └─ poster_template.png ├─ output/ │ ├─ 1.板载LED流水灯实验_art.png │ ├─ 2.板载方向按键实验_art.png │ └─ 3-9.无源蜂鸣器实验_art.png ├─ scripts/ │ └─ build_infographic.py └─ check_report.json文件类型命名示例作用原始图3-9.无源蜂鸣器实验_bb.png真实接线图、截图、数据图或架构图模板图poster_template.pngAI 生成的信息图外壳成品图3-9.无源蜂鸣器实验_art.png程序合成后的教学海报脚本文件build_infographic.py批量合成和像素校验校验报告check_report.json记录合成数量、通过数量和异常文件模板生成时中央 frame 是最关键的区域。这个区域必须是纯白矩形不能有水印、纹理、浅色线条、图标、阴影、提示文字或装饰性图案。只要中央区域存在非白色元素程序贴入原图后可能出现边缘污染也会影响视觉统一。可以使用下面这段提示词生成通用模板Create a clean modern blue-white educational infographic poster template. The center must contain a large completely blank pure-white rectangular frame. This frame is reserved for inserting an external original image later by code. Do not draw any circuit board, wire, screenshot, chart, device, UI element, module, component, watermark, pattern, shadow, text, icon, or decoration inside the center frame. Layout: Top title area Left information card area Right detail display card area Bottom explanation card area Large blank white center frame Text: Main title placeholder: 原图无损信息图 Subtitle: AI 负责外观程序保证准确 Left card header: 核心内容 Right card header: 局部展示 Bottom card headers: 阅读说明, 使用提醒, 原理说明 Style: Bright blue-white STEM education poster, rounded cards, light circuit texture background, clean classroom infographic design, high readability, modern teaching material style. Critical constraint: The center frame interior must remain pure white and completely empty.如果应用在 K210 接线图场景可以把标题替换成“实验连线图”副标题替换成“CMVBlock K210 学习开发板”。如果应用在软件教程场景可以把左侧卡片改成“操作重点”右侧卡片改成“界面局部展示”。通用流程不依赖某一种硬件关键在于中央原图区域始终由程序合成。批量合成信息图合成阶段需要遵守一个顺序模板读取、文字填充、缩略图生成、说明卡片绘制、原图贴入、像素校验、报告输出。原图贴入要放在合成末端因为任何后续绘制都有可能盖住原图区域。标题、说明文字、分割线、模块缩略图都应该在中央 frame 外处理。对于缩略图区域允许程序从原图中裁剪局部并缩放展示。缩略图只是辅助说明不承担核心准确性。中央原图区域则必须保持完整不允许缩放、不允许裁剪、不允许滤镜处理。模板的中央 frame 尺寸应大于或等于原图尺寸如果原图尺寸超过 frame脚本应该报错并跳过而不是强行压缩原图。合成环节程序动作注意事项读取模板打开poster_template.png模板尺寸固定中央 frame 坐标固定读取原图扫描input/*_bb.png原图不做 resize、thumbnail、crop、filter绘制文字根据文件名生成标题标题写在中央 frame 外生成缩略图从原图局部裁剪或按配置裁剪缩略图允许缩放不影响中央原图贴入原图把xxx_bb.png粘贴到中央 frame放在绘制流程末端保存成品_bb.png替换成_art.png成品统一输出到output/像素校验裁出成品中的原图区域并比对差异为空才算通过下面是一份可运行的基础脚本。脚本以“原图不缩放”为原则如果原图尺寸超过中央 frame会记录到异常列表中。模板中的 frame 坐标需要根据实际模板调整。frompathlibimportPathfromPILimportImage,ImageChops,ImageDraw,ImageFontimportjson BASE_DIRPath(__file__).resolve().parents[1]INPUT_DIRBASE_DIR/inputOUTPUT_DIRBASE_DIR/outputTEMPLATE_PATHBASE_DIR/template/poster_template.pngREPORT_PATHBASE_DIR/check_report.jsonFRAME_X420FRAME_Y180FRAME_W1280FRAME_H720TITLE_X80TITLE_Y46OUTPUT_DIR.mkdir(parentsTrue,exist_okTrue)defload_font(size:int)-ImageFont.FreeTypeFont:candidates[C:/Windows/Fonts/msyh.ttc,C:/Windows/Fonts/simhei.ttf,/System/Library/Fonts/PingFang.ttc,/usr/share/fonts/truetype/noto/NotoSansCJK-Regular.ttc,/usr/share/fonts/opentype/noto/NotoSansCJK-Regular.ttc,]forfont_pathincandidates:try:returnImageFont.truetype(font_path,sizesize)exceptOSError:passreturnImageFont.load_default()defpaste_original(base:Image.Image,original:Image.Image,paste_x:int,paste_y:int)-None:iforiginal.modeRGBA:base.paste(original,(paste_x,paste_y),original)else:base.paste(original,(paste_x,paste_y))defis_pixel_exact(art:Image.Image,original:Image.Image,paste_x:int,paste_y:int)-bool:cropart.crop((paste_x,paste_y,paste_xoriginal.width,paste_yoriginal.height))diffImageChops.difference(crop.convert(RGBA),original.convert(RGBA))returndiff.getbbox()isNonedefbuild_one(template:Image.Image,source_path:Path)-dict:originalImage.open(source_path)iforiginal.widthFRAME_Wororiginal.heightFRAME_H:return{file:source_path.name,status:failed,reason:original_image_larger_than_center_frame,original_size:[original.width,original.height],frame_size:[FRAME_W,FRAME_H],}arttemplate.copy().convert(RGBA)drawImageDraw.Draw(art)title_fontload_font(46)small_fontload_font(24)titlesource_path.stem.replace(_bb,)draw.text((TITLE_X,TITLE_Y),title,fill(18,72,145),fonttitle_font)draw.text((80,art.height-92),阅读说明中央区域为原始图片无损贴入周围信息卡片仅用于辅助理解。,fill(40,78,120),fontsmall_font,)draw.rectangle((FRAME_X,FRAME_Y,FRAME_XFRAME_W,FRAME_YFRAME_H),fill(255,255,255,255),)paste_xFRAME_X(FRAME_W-original.width)//2paste_yFRAME_Y(FRAME_H-original.height)//2paste_original(art,original,paste_x,paste_y)output_namesource_path.name.replace(_bb.png,_art.png)output_pathOUTPUT_DIR/output_name art.save(output_path)pixel_okis_pixel_exact(art,original,paste_x,paste_y)return{file:source_path.name,output:output_name,status:okifpixel_okelsefailed,pixel_exact:pixel_ok,paste_box:[paste_x,paste_y,original.width,original.height],}defmain()-None:templateImage.open(TEMPLATE_PATH).convert(RGBA)source_filessorted(INPUT_DIR.glob(*_bb.png))results[]forsource_pathinsource_files:results.append(build_one(template,source_path))ok_items[itemforiteminresultsifitem.get(pixel_exact)isTrue]bad_items[itemforiteminresultsifitem.get(status)!ok]report{bb_count:len(source_files),art_count:len(list(OUTPUT_DIR.glob(*_art.png))),pixel_exact_ok:len(ok_items),bad:bad_items,results:results,}REPORT_PATH.write_text(json.dumps(report,ensure_asciiFalse,indent2),encodingutf-8,)print(json.dumps(report,ensure_asciiFalse,indent2))if__name____main__:main()运行方式可以写成下面这样cd原图无损信息图生成/scripts python build_infographic.py脚本运行后output/目录会生成对应的_art.png文件根目录会生成check_report.json。如果某张原图尺寸大于 frame脚本不会压缩原图而是记录失败原因。这个规则看似严格但能避免“为了塞进模板而偷偷改变原图”的问题。错误与正确校对错误案例需要在教程里重点讲清楚因为很多内容创作者习惯把原图直接交给 AI 处理。AI 的输出看起来像原图并不代表它等于原图。对于精确图像视觉相似不是验收标准像素一致才是验收标准。错误做法表面效果实际风险把接线图直接交给 AI并要求生成漂亮教学海报海报感更强背景更统一线路可能被改接模块文字可能变形电源线颜色可能改变要求 AI “保持中间图不变只加外框”中间图看起来还在AI 可能对整张图做重采样细线和文字边缘已经变化把软件截图交给 AI 做科技风美化页面更精致视觉更高级按钮名称、菜单顺序、图标形态可能被重构让 AI 优化数据图表图表更平滑配色更舒服数值标签、坐标刻度、图例关系可能失真手工拖拽原图到模板单张图处理速度快批量处理时比例、位置、压缩方式难以统一正确案例的重点是“原图从来不交给 AI 重画”。AI 生成的是外壳程序贴入的是源图校验验证的是成品。正确做法操作方式稳定性来源接线图海报AI 生成空白教学模板Python 把原始接线图贴入中央 frame电路图不被 AI 重绘线路保持原样软件教程图AI 生成说明版式Python 嵌入真实截图软件界面真实可参考数据分析封面AI 生成报告外壳Python 嵌入真实图表数据图不被改写架构图信息图AI 生成课程化模板Python 嵌入原架构图节点关系不被重构批量课程资料一套模板匹配多张原图脚本批量输出风格统一结果可验证以 K210 接线图为例错误方案是把3-9.无源蜂鸣器实验_bb.png直接上传给 AI要求生成一张漂亮的信息图。这个流程的风险在于 AI 可能重新理解蜂鸣器模块、杜邦线连接方式和开发板文字。正确方案是先让 AI 生成一张中央空白的蓝白教学模板再由 Python 把3-9.无源蜂鸣器实验_bb.png原样贴入中央 frame。成品图可以更像课程海报但中间接线图仍然来自源文件。像素级校验质量校验不能只看肉眼效果。两张图肉眼看起来完全一样也可能在边缘抗锯齿、透明通道、压缩细节、色值边界上发生变化。对于接线图和截图微小变化可能导致阅读误判。程序裁图对比能把这个问题变成明确结果。校验逻辑并不复杂。程序记录原图贴入成品图的位置从成品图中裁出同样大小的区域把裁出的图片与源图转换到同一种颜色模式再做差异计算。差异为空说明像素一致差异不为空说明成品图里的核心区域发生过变化。校验字段含义合格标准bb_count输入目录中的原始图片数量与实际原图数量一致art_count输出目录中的成品图片数量与原图数量一致pixel_exact_ok逐像素校验通过数量等于bb_countbad校验失败或无法处理的文件空列表paste_box原图在成品图中的位置和尺寸用于追踪裁剪区域合格报告应该类似下面这样{bb_count:49,art_count:49,pixel_exact_ok:49,bad:[]}如果出现异常报告可能类似下面这样{bb_count:49,art_count:48,pixel_exact_ok:47,bad:[{file:3-9.无源蜂鸣器实验_bb.png,status:failed,reason:original_image_larger_than_center_frame,original_size:[1420,820],frame_size:[1280,720]}]}遇到这种情况不应该压缩原图来适配模板。更合理的处理方式是增大模板中央 frame或者单独为大尺寸原图建立一套更大的模板。只要核心要求是“原图一像素不变”任何自动缩放都不应该出现在中央原图区域。像素校验以 RGBA 色值为准不比较 PNG 文件大小、压缩块和元数据。原因是同一张图保存成 PNG 时文件大小可能因为压缩参数变化而不同但只要成品中央区域的 RGBA 像素值与源图一致就能满足教学展示场景中的无损内容要求。总结这套流程的价值不在于让 AI 完成所有图片加工而在于把 AI 放在更合适的位置。AI 擅长设计外壳、统一风格、生成背景和卡片但不适合保证接线图、截图、数据图这类内容的精确复刻。对于技术教程而言漂亮只是加分项准确才是底线。通过“空白模板 Python 合成 像素校验”的方式课程配图可以同时具备两种能力外观像教学海报核心内容仍然等于原图。K210 接线图只是一个典型案例这套方法也适用于软件教程截图、数据分析图、项目架构图和实验记录图。对于 IT 内容创作者而言这种流程更适合长期复用。一套模板可以统一课程视觉一个脚本可以批量生成成品一份校验报告可以证明核心图像没有被改动。真正可靠的技术配图不是让 AI 猜测原图内容而是让程序把真实内容稳定地放到更好的版式里。