这是一组「图片处理」方向的在线工具生成型提示词（Prompts）。每条 Prompt 都要求 AI 直接产出一个可运行/可构建/可部署的浏览器端在线工具：包含完整项目代码、文件结构、运行命令、部署说明，以及至少 5 条测试用例或 QA checklist，并且工具内置“一键输出 HTML”（导出单个可直接打开的 HTML 文件，或一键生成包含 index.html 的最小可运行包）用于交付与预览。
浏览器端图片元数据清理与批量压缩工作台
面向“很多图片要交付、但要更小、更干净、更规范”的场景，要求生成一个纯前端工具：上传多张图片后可批量压缩/缩放重编码，从而清理 EXIF 等元数据，并导出交付包。
提示词 (Prompts):
请用中文完成：生成一个可部署的浏览器端在线工具《图片元数据清理与批量压缩工作台》。要求你直接输出完整项目，不要只讲思路。
目标：用户上传多张 JPG/PNG/WebP 图片后，工具能批量：
- 重编码以清理元数据（说明：通过 Canvas/Blob 重编码，达到去除 EXIF/ICC/注释等效果；对 PNG 也通过重编码去除文本块）。
- 按规则压缩（可设置 JPEG 质量、最大长边、输出格式）。
- 输出报告（每张：原始大小/新大小/压缩率/输出格式）。
- 提供“一键输出 HTML”：按钮可下载一个单文件 index.html（包含全部 HTML/CSS/JS），双击即可离线打开运行；另提供“一键导出最小可运行包”下载 zip（至少含 index.html）。
技术栈约束：纯前端优先（HTML + CSS + 原生 JS）；不依赖服务器；不调用外部网络 API；允许使用轻量前端库（如 JSZip）但必须写清安装与构建命令。
交付物（必须逐项给出）：
1) 项目文件树（包含每个文件的用途说明）。
2) 完整源码（所有文件逐个贴出）。
3) 本地运行命令（开发/构建/预览）。
4) 部署说明（静态托管）。
5) 测试用例或 QA checklist（至少 8 条，覆盖：大图、透明 PNG、不同浏览器、批量 200 张、输出格式一致性、导出 HTML/zip、异常文件、内存占用）。
注意：不要包含任何“生成图片/出图/海报/插画”功能；仅处理用户上传的现有图片。
主要用途: 批量压缩与重编码清理元数据，输出可交付的离线 HTML 单文件与 zip 包，适合电商图/运营图/截图整理交付。
在线图片尺寸裁剪与多规格导出器
解决“同一张图要输出多种尺寸/比例”的问题：支持常见比例与自定义尺寸，批量导出并附带尺寸清单。
提示词 (Prompts):
请用中文生成一个浏览器端在线工具《图片尺寸裁剪与多规格导出器》，直接给出完整项目代码。
功能要求：
- 上传 1 张或多张图片；每张可选择裁剪框（支持锁定比例/自由比例、拖拽缩放）。
- 预置规格：头像 1:1（256/512/1024）、横幅 16:9（1280x720/1920x1080）、封面 4:3（1200x900）。支持自定义规格列表。
- 导出：按规格生成对应图片（保持清晰度，支持 2x/3x DPR），打包 zip 下载。
- 输出“规格清单”JSON（每个导出文件名、宽高、源文件名、时间戳）。
- 必须支持“一键输出 HTML”：导出一个单文件 index.html（离线可运行），以及可选 zip 包。
交付物必须包含：文件树、完整源码、运行命令、部署说明、至少 6 条 QA checklist（裁剪精度、比例锁定、批量导出命名冲突、透明背景、移动端触控、导出 HTML）。
限制：只处理用户上传图片，不做生成插画/渲染图。
主要用途: 统一尺寸规范与批量导出，适合运营素材、产品图、封面图的规格交付。
在线图片格式转换与透明背景保留工具
把 PNG/JPG/WebP 互转，并提供“保留透明/填充背景色/尺寸缩放”的选项，输出转换前后对比。
提示词 (Prompts):
请用中文生成浏览器端在线工具《图片格式转换与透明背景保留工具》，直接输出完整项目。
要求：
- 输入：PNG/JPG/WebP；输出：PNG/JPG/WebP（不要承诺浏览器不支持的格式）。
- 选项：输出格式、JPEG 质量、是否保留透明（若输出 JPG 则提供“背景填充色”）、最大长边缩放。
- 预览：转换前后并排对比、显示尺寸与文件大小；支持下载单张与批量 zip。
- 必须提供“一键输出 HTML”：下载单文件 index.html（离线可运行），并说明安全性（不上传服务器）。
交付物：文件树 + 完整源码 + 运行/构建命令 + 部署说明 + 至少 7 条 QA checklist（透明 PNG 转 JPG 背景、批量转换、质量参数生效、缩放保持比例、不同浏览器、导出 HTML、异常文件处理）。
主要用途: 图片格式统一与压缩策略落地，减少体积并保证透明背景等关键属性不丢失。
在线图片对比与差异热力图工具
用于“改图前后差异核对”：生成像素级差异高亮图，并输出可分享的对比报告（HTML）。
提示词 (Prompts):
请用中文生成一个纯前端在线工具《图片对比与差异热力图》。直接给出完整项目代码。
功能：
- 上传两张图片（支持不同尺寸，提供对齐策略：缩放对齐/居中对齐/裁剪对齐）。
- 生成：差异热力图、闪烁对比、滑块对比（before/after）。
- 输出：一键导出对比报告 HTML（单文件 index.html 可离线打开），包含：两图预览、差异图、参数、时间。
- 批量：可导入多组对比（按文件名配对规则）。
交付物必须有：文件树、完整源码、运行命令、部署说明、至少 8 条 QA checklist（尺寸不一致、滑块交互、批量配对、导出 HTML、移动端、性能、错误提示）。
限制：不做“生成新图片”类功能，只做对比与可视化。
主要用途: 改图审核、版本回归核对、压缩策略验证（看是否引入明显失真）。
在线调色板提取与色值导出工具
从现有图片中抽取主色/辅助色，导出为 CSS 变量、JSON、以及可直接打开的颜色预览 HTML。
提示词 (Prompts):
请用中文生成浏览器端在线工具《调色板提取与色值导出》。直接输出完整项目。
要求：
- 上传图片后，抽取 N 个代表色（可选 6/8/12），显示色块、占比、HEX/RGB/HSL。
- 导出：CSS 变量、JSON、以及“一键输出 HTML”生成单文件调色板预览页（index.html）。
- 支持：锁定某个颜色、复制色值、深浅背景切换。
交付物：文件树、完整源码、运行命令、部署说明、至少 6 条 QA checklist（不同图片、极端单色图、导出内容正确、复制按钮、导出 HTML、移动端）。
限制：只从上传图片采样，不做生成插画/渲染图。
主要用途: 从现有素材快速抽取可复用色值，生成可交付的颜色规范与预览页。
在线 favicon 与 PWA 图标打包生成器
把一张现有 Logo/图标输入，输出多尺寸图标集合与 manifest，并能导出静态包（含 index.html 预览）。
提示词 (Prompts):
请用中文生成一个浏览器端在线工具《favicon 与 PWA 图标打包生成器》，直接给出完整项目代码。
功能：
- 输入：用户上传 1 张图片（PNG/JPG）。
- 生成：16/32/48/64/128/192/512 等常用尺寸（基于 Canvas 缩放）。
- 输出：icons/ 目录下各尺寸 PNG + 一个 manifest.webmanifest + 一个 index.html 预览页。
- 必须支持“一键导出最小可运行包”：下载 zip（包含 index.html、manifest、icons/*）。同时提供“一键输出 HTML”：可下载单文件 index.html（用于预览与说明，不依赖外网）。
交付物：文件树、完整源码、运行命令、部署说明、至少 7 条 QA checklist（非方图裁切策略、缩放清晰度、zip 结构、manifest 字段、导出 HTML、错误提示）。
限制：仅处理上传图片，不引导生成海报/插画。
主要用途: 把现有图标规范化成一套可部署的图标资产与预览包。
在线图片批量命名规则器与清单导出
把一批图片按规则重命名（前缀/序号/日期/尺寸/格式），并导出清单 CSV/JSON 与交付包 zip。
提示词 (Prompts):
请用中文生成纯前端在线工具《图片批量命名规则器与清单导出》，直接输出完整项目。
要求：
- 导入多张图片后，支持设置命名规则：前缀、序号位数、是否包含原名、是否包含宽高、是否包含日期。
- 预览：实时展示“将要导出的文件名”列表，检测重名并给出解决策略。
- 导出：按规则重命名后的文件打包 zip + 同时导出清单 CSV/JSON。
- 必须支持“一键输出 HTML”：下载单文件 index.html（离线可运行）。
交付物：文件树、完整源码、运行命令、部署说明、至少 6 条 QA checklist（重名处理、特殊字符、批量 500 张、清单字段完整、导出 HTML、zip 可解压）。
限制：不生成新图片，只做整理与打包。
主要用途: 规范交付包命名与清单，提升素材交接效率。
在线图片转 HTML 嵌入片段生成器
把图片转成可嵌入网页的片段（img 标签、DataURL、尺寸与 alt 文案），并输出一份可直接打开的 HTML 预览文件。
提示词 (Prompts):
请用中文生成浏览器端在线工具《图片转 HTML 嵌入片段生成器》，直接输出完整项目。
功能：
- 上传图片后生成：
1) img 标签片段（可选使用 DataURL 或 Blob URL）。
2) DataURL/ 64 文本（可复制，显示字符长度）。
3) “离线预览 HTML”：一键导出 index.html，打开即可看到图片与片段示例。
- 可选：批量生成 gallery 页面（静态 HTML）。
交付物：文件树、完整源码、运行命令、部署说明、至少 5 条 QA checklist（大图转 DataURL 性能、复制按钮、导出 HTML 正确、批量 gallery、错误处理）。
限制：只处理上传图片，不做生成海报/插画。
主要用途: 将现有图片快速转换成可交付的 HTML 片段与离线预览页，适合文档/工单/需求说明嵌入。
可直接交付的 HTML 源码（index.html 单文件示例）
下面给出一个可直接打开运行的单文件 HTML 示例：实现“多图导入 → 批量压缩/缩放重编码 → 打包 zip 下载 → 一键导出本工具 index.html”。它也可作为上述 Prompt 的期望输出模板。
<!doctype html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< name="viewport" content="width=device-width, initial-scale=1" />
< >图片批量压缩与导出（离线单文件）</ >
<style>
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;margin:0;background:#0b1020;color:#e7eaf0}
header{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
header h1{margin:0;font-size:18px}
header p{margin:6px 0 0;color:#9aa3b2;font-size:12px;line-height:1.5}
main{display:grid;grid-template-columns:340px 1fr;gap:12px;padding:12px;align-items:start}
.card{background:#121a33;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px}
label{display:block;color:#9aa3b2;font-size:12px;margin:8px 0 6px}
input,select,button{width:100%;padding:9px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0c132a;color:#e7eaf0}
button{cursor:pointer}
button[disabled]{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:8px}
.row button{width:auto;flex:1}
table{width:100%;border-collapse:collapse;font-size:12px}
th,td{padding:8px;border-bottom:1px solid rgba(255,255,255,.1);vertical-align:top}
th{color:#9aa3b2;text-align:left;font-weight:600}
.hint{color:#9aa3b2;font-size:12px;line-height:1.45}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@media (max-width: 980px){main{grid-template-columns:1fr}}
</style>
</head>
<body>
<header>
<h1>图片批量压缩与导出（离线单文件）</h1>
<p>本工具只在本地浏览器处理文件：通过 Canvas 重新编码进行压缩与尺寸缩放。提供 zip 打包下载，以及一键导出本工具的 index.html。</p>
</header>
<main>
<section class="card">
<label>导入图片（可多选：JPG/PNG/WebP）</label>
<input id="file" type="file" accept="image/png,image/jpeg,image/webp" multiple />
<label>输出格式</label>
<select id="fmt"><option value="image/jpeg">JPG</option><option value="image/png">PNG</option><option value="image/webp">WebP</option></select>
<label>质量（仅 JPG/WebP，0-1）</label>
<input id="q" type="number" min="0" max="1" step="0.05" value="0.82" />
<label>最大长边（0=不缩放）</label>
<input id="max" type="number" min="0" step="1" value="1920" />
<div class="row" style="margin-top:10px">
<button id="run" disabled>开始处理</button>
<button id="zip" disabled>下载 zip</button>
</div>
<div class="row" style="margin-top:8px">
<button id="export">一键导出 HTML（index.html）</button>
<button id="clear" disabled>清空</button>
</div>
<p class="hint" id="status">提示：选择图片后再开始处理。</p>
</section>
<section class="card">
<div class="hint" id="stats"></div>
<div style="overflow:auto;max-height:70vh">
<table><thead><tr><th>文件名</th><th>原始</th><th>输出</th><th>压缩率</th><th>下载</th></tr></thead><tbody id="tbody"></tbody></table>
</div>
</section>
</main>
< >
function u16(v){var a=new Uint8Array(2);new DataView(a.buffer).setUint16(0,v,true);return a;}
function u32(v){var a=new Uint8Array(4);new DataView(a.buffer).setUint32(0,v,true);return a;}
function enc(s){return new TextEncoder().encode(s);}
function cat(ch){var n=0;for(var i=0;i<ch.length;i++)n+=ch[i].length;var out=new Uint8Array(n);var o=0;for(var j=0;j<ch.length;j++){out.set(ch[j],o);o+=ch[j].length;}return out;}
var CRC=(function(){var t=new Uint32Array(256);for(var n=0;n<256;n++){var c=n;for(var k=0;k<8;k++)c=(c&1)?(0xedb88320^(c>>>1)):(c>>>1);t[n]=c>>>0;}return t;})();
function crc32(buf){var c=0^(-1);for(var i=0;i<buf.length;i++){c=(c>>>8)^CRC[(c^buf[i])&255];}return (c^(-1))>>>0;}
function zipStore(files){var locals=[];var centrals=[];var off=0;for(var i=0;i<files.length;i++){var f=files[i];var nameB=enc(f.name);var data=f.data;var crc=crc32(data);var local=cat([u32(0x04034b50),u16(20),u16(0),u16(0),u16(0),u16(0),u32(crc),u32(data.length),u32(data.length),u16(nameB.length),u16(0),nameB,data]);locals.push(local);var central=cat([u32(0x02014b50),u16(20),u16(20),u16(0),u16(0),u16(0),u16(0),u32(crc),u32(data.length),u32(data.length),u16(nameB.length),u16(0),u16(0),u16(0),u16(0),u32(0),u32(off),nameB]);centrals.push(central);off+=local.length;}var cStart=off;var cData=cat(centrals);off+=cData.length;var end=cat([u32(0x06054b50),u16(0),u16(0),u16(files.length),u16(files.length),u32(cData.length),u32(cStart),u16(0)]);return cat(locals.concat([cData,end]));}
function fmt(n){var u=["B","KB","MB"];var i=0;var v=n;while(v>=1024&&i<u.length-1){v/=1024;i++;}return (i===0?String(v|0):v.toFixed(2))+" "+u[i];}
function ext(m){return m==="image/png"?"png":(m==="image/webp"?"webp":"jpg");}
var $=function(id){return document.getElementById(id);};
var selected=[];var outputs=[];
$("file").addEventListener("change",function(){selected=Array.prototype.slice.call(this.files||[]);outputs=[];$("tbody").innerHTML="";$("run").disabled=!selected.length;$("clear").disabled=!(selected.length||outputs.length);$("zip").disabled=!outputs.length;$("status").textContent=selected.length?("已选择 "+selected.length+" 个文件。点击开始处理。"):"提示：选择图片后再开始处理。";$("stats").textContent="";});
$("clear").addEventListener("click",function(){selected=[];outputs=[];$("file").value="";$("tbody").innerHTML="";$("run").disabled=true;$("zip").disabled=true;$("clear").disabled=true;$("status").textContent="已清空。";$("stats").textContent="";});
$("export").addEventListener("click",function(){var blob=new Blob([document.documentElement.outerHTML],{type:"text/html;charset=utf-8"});var a=document.createElement("a");a.href=URL.create URL(blob);a.download="index.html";a.click();setTimeout(function(){URL.revoke URL(a.href);},1500);});
function loadImg(file){return new Promise(function(res,rej){var url=URL.create URL(file);var img=new Image();img. =function(){res({img:img,url:url});};img. =function(){rej(new Error("图片加载失败"));};img.src=url;});}
function encodeCanvas(img, mime, quality, maxSide){var w=img.naturalWidth||img.width;var h=img.naturalHeight||img.height;var outW=w,outH=h;var long=Math.max(w,h);if(maxSide>0&&long>maxSide){var s=maxSide/long;outW=Math.max(1,Math.round(w*s));outH=Math.max(1,Math.round(h*s));}var c=document.createElement("canvas");c.width=outW;c.height=outH;var ctx=c.getContext("2d");ctx.imageSmoothingEnabled=true;ctx.imageSmoothingQuality="high";ctx.drawImage(img,0,0,outW,outH);return new Promise(function(res){if(mime==="image/png"){c.toBlob(function(b){res({blob:b,w:w,h:h,outW:outW,outH:outH});},mime);}else{c.toBlob(function(b){res({blob:b,w:w,h:h,outW:outW,outH:outH});},mime,quality);}});}
function addRow(name, origSize, outSize, blob){var tr=document.createElement("tr");var ratio=origSize?((1-outSize/origSize)*100):0;var url=URL.create URL(blob);tr.innerHTML="<td class="mono">"+name+"</td><td class="mono">"+fmt(origSize)+"</td><td class="mono">"+fmt(outSize)+"</td><td class="mono">"+ratio.toFixed(1)+"%</td><td class="mono"><a href=""+url+"" download=""+name+"">下载</a></td>";$("tbody").appendChild(tr);}
$("run").addEventListener("click",async function(){outputs=[];$("tbody").innerHTML="";var mime=$("fmt").value;var q=Math.min(1,Math.max(0,Number($("q").value||0.82)));var maxSide=Math.max(0,Number($("max").value||0));$("status").textContent="处理中...";var totalO=0,totalN=0,ok=0;for(var i=0;i<selected.length;i++){var f=selected[i];try{var r=await loadImg(f);var e=await encodeCanvas(r.img,mime,q,maxSide);URL.revoke URL(r.url);var outName=f.name.replace(/.[^.]+$/,"")+"."+ext(mime);outputs.push({name:outName,blob:e.blob,origSize:f.size,outSize:e.blob.size});addRow(outName,f.size,e.blob.size,e.blob);totalO+=f.size;totalN+=e.blob.size;ok++;}catch(err){var tr=document.createElement("tr");tr.innerHTML="<td class="mono">"+f.name+"</td><td colspan="4" class="mono">失败："+(err&&err.message?err.message:String(err))+"</td>";$("tbody").appendChild(tr);}}var ratio=totalO?((1-totalN/totalO)*100):0;$("stats").textContent="原始 "+fmt(totalO)+" → 输出 "+fmt(totalN)+" | 总压缩 "+ratio.toFixed(1)+"% | 成功 "+ok+"/"+selected.length;$("zip").disabled=!outputs.length;$("clear").disabled=false;$("status").textContent="完成：可下载 zip 交付。";});
$("zip").addEventListener("click",async function(){if(!outputs.length)return;$("zip").disabled=true;$("status").textContent="打包 zip...";var files=[];for(var i=0;i<outputs.length;i++){var o=outputs[i];var ab=await o.blob.arrayBuffer();files.push({name:o.name,data:new Uint8Array(ab)});}var rep=enc(JSON.stringify({generatedAt:new Date().toISOString(),items:outputs.map(function(o){return {name:o.name,origSize:o.origSize,outSize:o.outSize};})},null,2));files.push({name:"report.json",data:rep});var zipBytes=zipStore(files);var blob=new Blob([zipBytes],{type:"application/zip"});var a=document.createElement("a");a.href=URL.create URL(blob);a.download="images_"+Date.now()+".zip";a.click();setTimeout(function(){URL.revoke URL(a.href);},1500);$("status").textContent="已触发下载。";$("zip").disabled=false;});
</ >
</body>
</html>
