真马赛克必须用 ctx.getImageData + ctx.putImageData 修改像素，不能用 fillRect；需按块采样均值重写像素，涂鸦式操作要分点计算单元格并清空canvas；导出须用 uni.canvasToTempFilePath 并确保渲染完成。
uni-app 中 Canvas 绘制马赛克区域必须用 ctx.putImageData，不能靠 ctx.fillRect 模拟
直接在 Canvas 上用 fillRect 画色块只是“伪马赛克”，它不修改原图像素，导出时会丢失。真马赛克需要读取原始图像数据、按块采样、重写像素——这只能通过 ctx.getImageData + ctx.putImageData 实现。
注意：uni-app 的 canvas 在 H5 和小程序平台行为一致，但 App 端（iOS/Android）需使用 uni.createCanvasContext 且必须指定 canvas-id；H5 端则依赖原生 HTMLCanvasElement，需用 uni.canvasToTempFilePath 导出时才兼容。
- 先用
uni.chooseImage获取图片临时路径，再用uni.getImageInfo获取宽高，避免 canvas 尺寸错位 - 马赛克块大小建议设为 8–24 像素，太小看不出效果，太大失真严重
- 每次涂抹前必须调用
ctx.clearRect(0, 0, width, height)清空 canvas，否则旧像素残留
实现涂鸦式马赛克：监听 touchstart/touchmove 并分块处理坐标
不能把整个触摸轨迹当一条线来马赛克——那样会漏掉中间空隙。正确做法是将每段移动拆成多个采样点，对每个点为中心的正方形区域执行马赛克填充。
关键逻辑是：拿到触摸点 (x, y) 后，计算其所在马赛克单元格左上角坐标 (Math.floor(x / size) * size, Math.floor(y / size) * size)，再对该单元格内所有像素赋值为该区域平均色。
const size = 16; // 马赛克块边长
function mosaicBlock(ctx, imgData, x, y, blockSize) {
const w = imgData.width;
const h = imgData.height;
const startX = Math.max(0, Math.min(w - blockSize, Math.floor(x / blockSize) * blockSize));
const startY = Math.max(0, Math.min(h - blockSize, Math.floor(y / blockSize) * blockSize));
const data = imgData.data;
let r = 0, g = 0, b = 0, a = 0, count = 0;
for (let dy = 0; dy < blockSize; dy++) {
for (let dx = 0; dx < blockSize; dx++) {
const idx = ((startY + dy) * w + (startX + dx)) * 4;
r += data[idx];
g += data[idx + 1];
b += data[idx + 2];
a += data[idx + 3];
count++;
}
}
const avgR = Math.round(r / count);
const avgG = Math.round(g / count);
const avgB = Math.round(b / count);
const avgA = Math.round(a / count);
for (let dy = 0; dy < blockSize; dy++) {
for (let dx = 0; dx < blockSize; dx++) {
const idx = ((startY + dy) * w + (startX + dx)) * 4;
data[idx] = avgR;
data[idx + 1] = avgG;
data[idx + 2] = avgB;
data[idx + 3] = avgA;
}
}
}
ctx.putImageData 在真机上失败？检查 canvas 的 width/height 是否与图片等比缩放
常见错误：图片宽高为 1200×800，canvas 设置成 width="300" height="200"（CSS 缩放），但 ctx.getImageData 读取的是渲染后尺寸（300×200），导致像素错位、putImageData 报错 IndexSizeError。
- canvas 的
width和height属性必须等于图片原始宽高（或整数倍缩放），不能仅靠 CSS 控制显示大小 - H5 端可用
drawImage(img, 0, 0, canvas.width, canvas.height)确保图像完整绘制进缓冲区 - 小程序端若用
uni.createCanvasContext(canvasId)，务必确认canvas组件已挂载且宽高属性已设置（非 style） - App 端 iOS 可能限制 canvas 宽高上限（如 >2048），超限时需先等比压缩图片再处理
导出带马赛克的图片：优先用 uni.canvasToTempFilePath，别用 toDataURL
toDataURL 在 H5 可用，但在微信小程序和 App 端不可靠（尤其 iOS WKWebView 不支持）。uni-app 提供的 uni.canvasToTempFilePath 是跨平台唯一稳定方案。
注意：该 API 要求 canvas 必须已绘制完毕，且不能在异步回调中立即调用——需加 setTimeout(..., 0) 或用 uni.nextTick 确保渲染队列清空。
- 导出前确保已调用
ctx.putImageData，且无未完成的getImageData异步等待 - 配置项中
quality: 1可避免 JPEG 压缩模糊马赛克边缘 - 安卓 App 端若返回空路径，检查是否遗漏
canvas-id或 canvas 未设置宽高属性
马赛克本质是局部像素均值替换，不是图形绘制；所有“画笔”操作最终都要落回像素数组操作。Canvas 尺寸、图像数据同步时机、跨端导出路径，这三处最容易卡住，而不是算法本身。
