缘起
最近工作中需要将图片脱敏打码，先想到用 Photoshop 工具来处理，处理完后感觉图片多了操作有些繁琐，并不是很方便，虽然 PS 很强大，但杀鸡焉用牛刀，因此尝试制作一个图片脱敏的工具。
浏览器是相当强大的软件，在上面操作起来的会很流畅，而且用现成的库可以做到很美观，也不需要很多编码，也不用打包成 exe 等执行文件，很适合跨平台使用，因此打算用 Html + JS + tailwindcss 来制作。
要是自己写代码得相当费事，直接用 AI 工具来尝试下，被结果惊艳到了，以下是制作流程。
工具
VSCode + CodeBuddy
制作步骤(提示词)：
Step1. 用html+js+tailwindcss,实现图片代码功能，要求打码位置手动选择，支持框选多个位置，位置可以编辑、删除，提供下载，本地选择图片功能
效果如图：
默认只提供下载 PNG 格式的图片，但实际使用中需要 JPEG 的图片（节省空间），于是追加了功能，如下：
Step2. 追加保存图片为jpg功能
效果如图：
图片操作空间有些小，太密集的内容框选比较费劲，于是追加了如下功能，这里感觉生成的很好，支持 “Ctrl/⌘+滚轮缩放图片” 这个功能：
Step3. 追加图片放大缩小功能，更清晰的框选位置
效果图（同效果图2）
工具中的编辑模式刚开始没搞懂有什么用，操作了几次才明白，编辑模式时才可以拖动选框的大小、位置，这个功能为什么不能默认就带呢，不用点击让人迷惑的编辑模式，于是乎~
Step4. 将编辑模式功能移到框选模式里，默认就可以编辑选框，然后删除编辑模式
效果图：
感想
这次使用 CodeBuddy 生成 图片打码脱敏工具，被AI工具惊艳到了，在用这个之前，先用豆包网页版生成了一次，返回的结果不是很理想。这次为 CodeBuddy 打 Call~
