纯css无法实现可控马赛克面板，需canvas+js；局部选区须将clientx/y通过getboundingclientrect换算为canvas像素坐标，注意缩放、移动端touch及ios zoom兼容；选区渲染建议用offscreencanvas或overlay避免性能损耗。
纯 CSS 做不了真正可控的马赛克面板，必须用 canvas + JavaScript 实现；所谓“面板”，核心是支持局部选区、实时预览、块粒度调节和撤销重绘，不是全图一键糊掉。
局部马赛克区域怎么动态框选并映射到 canvas 像素坐标
鼠标拖拽画矩形只是 DOM 层面操作，关键要把 clientX/clientY 换算成 canvas 内真实像素坐标，否则选区错位、打码偏移。
- 必须用
canvas.getBoundingClientRect()获取 canvas 在视口中的实际位置（尤其当有 CSS 缩放、margin、border 或父容器 transform 时） - 换算公式固定：
const x = (e.clientX - rect.left) * (canvas.width / rect.width)，y同理；别漏乘缩放比 - 移动端要改用
e.touches[0].clientX，且 iOS Safari 在页面 zoom > 1 时getBoundingClientRect可能不准，建议禁用双指缩放：<meta name="viewport" content="user-scalable=no"> - 选区矩形建议用临时
offscreenCanvas或 overlay<div> 绘制，避免频繁清空主 canvas 影响性能<h3>马赛克块大小调节后如何保证边缘不撕裂</h3> <p>直接按固定步长循环（如 <code>for (let x = 0; x ）会导致右/下边缘被截断——最后一块可能不足 <code>blockSize宽高，强行填充会越界或留白。
Article To Html下载文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正确做法是对起始坐标做对齐：
const x0 = Math.floor(x / blockSize) * blockSize，再取该格子内所有像素计算均值或左上角色 - 读取像素时用
ctx.getImageData(x0, y0, blockSize, blockSize)，即使超出图像边界，getImageData也会自动截断并返回可用数据（不会报错） - 写回时用
ctx.putImageData(data, x0, y0)，确保只更新目标块，不污染周边 - 若需严格等分，可在初始化时把 canvas 尺寸设为
Math.ceil(width / blockSize) * blockSize，但会引入透明边距，慎用
为什么鼠标移动时实时打码会卡顿，怎么优化
在
mousemove里每帧都getImageData → 处理 → putImageData是性能杀手，尤其大图或小块尺寸下，单次操作就超 16ms，直接掉帧。- 只重绘变化区域：记录上一帧打码区域
lastRect，当前帧计算newRect，用unionRect合并二者作为重绘范围 - 用
requestAnimationFrame节流，禁止同步执行；不在事件回调里直接处理像素，只存坐标，动画帧里批量处理 - 对 ROI（Region of Interest）单独提取：
ctx.getImageData(roi.x, roi.y, roi.width, roi.height)，避免读整图 - 块尺寸
blockSize 时，考虑降级为 <code>drawImage缩放方案（imageSmoothingEnabled = false），比逐像素操作快 3–5 倍
跨域图片加载失败导致 getImageData 报 SecurityError 怎么绕过
本地双击打开 HTML、或图片来自其他域名时，
getImageData会直接抛SecurityError: The operation is insecure.，不是代码问题，是浏览器策略硬限制。- 唯一合规解法：服务端代理图片，让前端请求同源 URL（如
/api/proxy?url=https://xxx.com/img.jpg） - 开发阶段用
python3 -m http.server或 VS Code Live Server 启动本地服务器，避开file://协议 - 不能用 CORS header 强行解决——图片服务器不配
Access-Control-Allow-Origin，前端加crossOrigin="anonymous"也无效 - 想绕过？不行。Worker 里 fetch 图片同样受跨域限制，且无法访问
canvas，传不进像素数据
马赛克面板最难的不是打码，是让每一次鼠标拖拽都精准落在像素格上、不跳变、不卡顿、不出安全错误——这些细节没压住，用户第一反应就是“这工具不靠谱”。
- 正确做法是对起始坐标做对齐：
