Canvas局部马赛克核心是仅处理指定区域并重绘像素块，需满足CORS启用、本地服务器运行、Canvas尺寸匹配；推荐fillRect填色法（硬边强遮蔽）或drawImage缩放法（禁用平滑、性能高）；鼠标交互需精准映射坐标、计算ROI、限定处理范围。
网页端用 Canvas 实现图片局部马赛克打码，核心是“只处理指定区域 + 像素块重绘”，不是全图模糊，也不是简单涂色。关键在于坐标精准、采样合理、绘制高效，同时绕开跨域和模糊插值陷阱。
必须满足的前置条件
局部打码的前提是图片能被 Canvas 读取像素数据：
- 图片需启用 CORS：加载时设置
img.crossOrigin = 'anonymous'，否则getImageData报SecurityError - 不能直接双击打开 HTML 文件（
file://协议），必须通过本地服务器运行（如python3 -m http.server） - Canvas 尺寸要与绘制图像的自然尺寸或缩放后尺寸严格匹配，避免坐标偏移
局部区域马赛克的两种主流实现方式
推荐根据使用场景二选一：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
方式一：fillRect 填色法（硬边清晰，适合隐私保护）
对目标区域按块划分（如 16×16 像素为一块），每块取左上角像素或平均色，再用fillRect填满整块。适合人脸、证件号等需要强遮蔽的场景。 -
方式二：drawImage 缩放法（性能高，浏览器原生加速）
把目标区域内每个小块（如 8×8）用drawImage拉伸到大尺寸（如 64×64），前提是提前设ctx.imageSmoothingEnabled = false，否则边缘发虚。更省 CPU，适合频繁拖动打码。
鼠标交互式局部打码的关键步骤
用户用鼠标圈出要打码的区域，需注意三件事：
- 用
canvas.getBoundingClientRect()获取 canvas 在页面中的真实位置，把鼠标clientX/clientY准确映射为 canvas 像素坐标（尤其当 canvas 有 CSS 缩放或外边距时） - 记录鼠标按下（
mousedown）和抬起（mouseup）位置，算出矩形 ROI：{x, y, width, height} - 只在该 ROI 内循环处理：例如
for (let y = roi.y; y ，避免遍历全图
撤销与还原的实用方案
局部打码常需“撤回一笔”而不是逐像素撤销：
- 每次完成一个 ROI 打码后，把该区域原始像素备份进数组：
history.push(ctx.getImageData(roi.x, roi.y, roi.width, roi.height)) - 撤销时，从 history 弹出最后一份 ImageData，用
ctx.putImageData(data, roi.x, roi.y)精准覆盖回去 - 不建议用
canvas.toDataURL()全图快照——体积大、耗内存、失真风险高
