Photo Scrubber：浏览器本地给人脸打码去元数据

本站独立编写的教学实现，非Simon Willison原工具代码；CDN版本号0.10.14为示例，使用前可在npmjs.com核对@mediapipe/tasks-vision最新版本。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>本地人脸打码工具（本站示例）</title>
<style>body{font-family:sans-serif;max-width:900px;margin:20px auto}canvas{border:1px solid #ccc;max-width:100%}button{margin:6px 4px;padding:8px 14px}</style>
</head>
<body>
<h2>本地人脸打码与元数据清除</h2>
<p>所有处理在本浏览器内完成，图片不上传。</p>
<input type="file" id="file" accept="image/*">
<button id="loadModel">加载模型</button>
<button id="detect" disabled>检测人脸</button>
<label>模糊强度 <input type="range" id="strength" min="4" max="24" value="10"></label>
<button id="apply" disabled>应用模糊</button>
<button id="export" disabled>导出图片</button>
<p id="status">请先加载模型（首次需联网）。</p>
<canvas id="cv"></canvas>
<script type="module">
import { FaceDetector, FilesetResolver } from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14";
const cv = document.getElementById('cv'), ctx = cv.getContext('2d');
const st = document.getElementById('status');
let detector = null, faces = [], strokes = [], img = null, drawing = false, cur = null;
document.getElementById('loadModel').onclick = async () => {
  st.textContent = '模型下载中…';
  const files = await FilesetResolver.forVisionTasks("https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/wasm");
  detector = await FaceDetector.createFromOptions(files, {
    baseOptions: { modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_detector/blaze_face_short_range/float16/1/blaze_face_short_range.tflite" },
    runningMode: "IMAGE" });
  st.textContent = '模型就绪，请选择图片。';
  document.getElementById('detect').disabled = false;
};
document.getElementById('file').onchange = e => {
  const f = e.target.files[0]; if (!f) return;
  const url = URL.createObjectURL(f);
  img = new Image();
  img.onload = () => { cv.width = img.width; cv.height = img.height; redraw(); st.textContent = '图片已载入，点检测人脸。'; };
  img.src = url;
};
function redraw(){ if(!img) return; ctx.drawImage(img,0,0); faces.forEach(b=>blurRect(b)); strokes.forEach(b=>blurRect(b)); }
function blurRect(b){
  const s = parseInt(document.getElementById('strength').value);
  const d = ctx.getImageData(b.x,b.y,b.w,b.h);
  const off = document.createElement('canvas'); off.width=b.w; off.height=b.h;
  const octx = off.getContext('2d'); octx.putImageData(d,0,0);
  octx.globalAlpha=0.5; octx.drawImage(off,0,0,b.w/s,b.h/s);
  octx.globalAlpha=1; octx.imageSmoothingEnabled=true;
  octx.drawImage(off,0,0,b.w/s,b.h/s,0,0,b.w,b.h);
  ctx.putImageData(octx.getImageData(0,0,b.w,b.h), b.x, b.y);
}
document.getElementById('detect').onclick = () => {
  if (!detector || !img) return;
  const r = detector.detect(cv);
  faces = r.detections.map(d => ({ x:d.boundingBox.originX, y:d.boundingBox.originY, w:d.boundingBox.width, h:d.boundingBox.height }));
  redraw();
  st.textContent = '检测到 ' + faces.length + ' 张人脸。';
  document.getElementById('apply').disabled = false;
  document.getElementById('export').disabled = false;
};
document.getElementById('apply').onclick = redraw;
cv.onmousedown = e => { drawing = true; cur = null; };
cv.onmousemove = e => {
  if (!drawing) return;
  const r = cv.getBoundingClientRect();
  const x = (e.clientX - r.left) * (cv.width / r.width);
  const y = (e.clientY - r.top) * (cv.height / r.height);
  if (cur) { cur.w = x - cur.x; cur.h = y - cur.y; } else { cur = { x, y, w:0, h:0 }; }
};
cv.onmouseup = () => { if (cur && Math.abs(cur.w) > 5) strokes.push(cur); cur = null; drawing = false; redraw(); st.textContent = '已添加手动涂抹区域。'; };
document.getElementById('export').onclick = () => {
  const a = document.createElement('a');
  a.download = 'scrubbed.png';
  a.href = cv.toDataURL('image/png');
  a.click();
  st.textContent = '已导出PNG，原EXIF元数据不随canvas重编码保留。';
};
</script>
</body>
</html>