https://fxio.site/tags/wasm/Recent content in WASM on FXIO 技术博客Hugo -- 0.157.0zh-cnTue, 18 Aug 2026 17:36:00 +0800https://fxio.site/posts/tools/idphoto-ai-tool/Tue, 18 Aug 2026 17:36:00 +0800https://fxio.site/posts/tools/idphoto-ai-tool/<h2 id="背景">背景</h2> <p>办身份证、社保卡、护照、港澳通行证、驾照，都需要证件照和回执。线下照相馆收 ¥10~20，线上小程序也差不多。</p> <p>其实只要两步：</p> <ol> <li><strong>拍照</strong>：微信搜「智绘免费证件照制作」小程序，手机拍就行</li> <li><strong>回执</strong>：上 <a href="https://rzzx.com.cn">rzzx.com.cn</a>「证件数码相片质量检测中心」，官方渠道只要 ¥1.5</li> </ol> <p>但很多同学拍出来的照片背景杂乱（白墙有阴影、灰底、杂色），不符合要求。下面这个工具可以直接在浏览器里完成 <strong>AI 自动抠图 + 换纯白/蓝/红底色</strong>，全程本地处理，照片不出浏览器。</p> <h2 id="证件照要求速查">证件照要求速查</h2> <ul> <li>背景必须纯白、红或蓝色（<strong>严禁灰色背景</strong>）</li> <li>禁止翻拍纸质照片（尤其翻拍身份证）</li> <li>禁止模糊、水印、变形</li> <li>禁止 AI <strong>生成</strong>的证件照（但抠图换底色属于正常修图，没问题）</li> <li>头顶与照片上边距要有一定距离</li> </ul> <h2 id="在线工具">在线工具</h2> <p>直接在下面操作，上传照片 → 选规格 → 选底色 → 生成下载：</p> <script src="https://fastly.jsdelivr.net/npm/@imgly/background-removal@1.4.5/dist/bundle.js" crossorigin="anonymous"></script> <div class="idphoto-tool" style="max-width:800px;margin:24px auto;background:#fff;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.06);padding:20px;border:1px solid #e2e8f0;"> <h2 style="font-size:1.35rem;text-align:center;margin-bottom:6px;">📷 AI 证件照生成工具</h2> <p style="text-align:center;color:#64748b;font-size:0.8rem;margin-bottom:20px;">纯本地计算 · 零上传 · 杂色背景换纯白/证件蓝/红</p> <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;"> <!-- 控制面板 --> <div style="border:1px solid #e2e8f0;border-radius:12px;padding:16px;background:#fafafa;"> <div style="margin-bottom:14px;"> <label style="display:block;font-size:0.85rem;font-weight:600;margin-bottom:6px;">1. 上传自拍照（支持拍照或相册选择）</label> <input type="file" id="imageInput" accept="image/*" style="width:100%;padding:10px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;font-size:0.85rem;"> </div> <div style="margin-bottom:14px;"> <label style="display:block;font-size:0.85rem;font-weight:600;margin-bottom:6px;">2. 证件照尺寸规格</label> <select id="specSelect" style="width:100%;padding:10px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;font-size:0.85rem;"> <option value="295x413">标准 1 寸 (25mm × 35mm / 295×413 px)</option> <option value="413x579">标准 2 寸 (35mm × 49mm / 413×579 px)</option> <option value="390x567">大 1 寸 / 护照 / 签证 (33mm × 48mm)</option> <option value="original">保持原图比例 (仅换底色)</option> </select> </div> <div style="margin-bottom:14px;"> <label style="display:block;font-size:0.85rem;font-weight:600;margin-bottom:6px;">3. 选择底色</label> <div style="display:flex;gap:12px;"> <div class="color-btn active" data-color="#FFFFFF" style="width:36px;height:36px;border-radius:50%;border:2px solid #cbd5e1;cursor:pointer;background:#FFFFFF;" title="纯白底"></div> <div class="color-btn" data-color="#438EDB" style="width:36px;height:36px;border-radius:50%;border:2px solid #cbd5e1;cursor:pointer;background:#438EDB;" title="证件蓝"></div> <div class="color-btn" data-color="#C40000" style="width:36px;height:36px;border-radius:50%;border:2px solid #cbd5e1;cursor:pointer;background:#C40000;" title="证件红"></div> <div class="color-btn" data-color="#F2F4F7" style="width:36px;height:36px;border-radius:50%;border:2px solid #cbd5e1;cursor:pointer;background:#F2F4F7;" title="浅灰底"></div> </div> </div> <p><button id="generateBtn" style="width:100%;padding:12px;background:#2563eb;color:white;border:none;border-radius:8px;font-size:0.95rem;font-weight:600;cursor:pointer;">开始生成证件照</button></p>