🎨 图片马赛克工具

给图片添加马赛克效果，支持全图和区域马赛克

上传图片

📤

将图片文件拖到此处

或点击上传

支持JPG、PNG、WEBP、GIF格式

马赛克设置

马赛克块大小: 10px

💡 使用说明

支持拖拽或点击上传图片文件
可调节马赛克块大小（2-50px）
全图马赛克：整张图片都应用马赛克效果
区域马赛克：选择图片中需要打马赛克的区域
纯客户端处理，保护隐私安全

预览区域

请上传图片开始处理

link.download = 'pixelated-image.png'; link.href = previewCanvas.toDataURL('image/png'); link.click(); } // 创建原图canvas originalCanvas = document.createElement('canvas'); originalCanvas.width = img.width; originalCanvas.height = img.height; originalCtx = originalCanvas.getContext('2d'); originalCtx.drawImage(img, 0, 0); originalWrapper.appendChild(originalCanvas); // 创建效果图canvas previewCanvas = document.createElement('canvas'); previewCanvas.width = img.width; previewCanvas.height = img.height; previewCtx = previewCanvas.getContext('2d'); previewCtx.drawImage(img, 0, 0); previewWrapper.appendChild(previewCanvas); // 保存原始图像数据用于实时预览 originalImageData = previewCtx.getImageData(0, 0, previewCanvas.width, previewCanvas.height); // 自动应用马赛克效果 applyPixelateWithPreview(); } // 防抖函数 function debounce(func, delay) { return function(...args) { if (previewTimeout) { clearTimeout(previewTimeout); } previewTimeout = setTimeout(() => func.apply(this, args), delay); }; } // 防抖后的预览函数 const debouncedPreview = debounce(() => { applyPixelateWithPreview(); }, 100); // 带预览的马赛克应用 function applyPixelateWithPreview() { if (!previewCanvas || !originalImageData) return; // 恢复原始图像 previewCtx.putImageData(originalImageData, 0, 0); // 应用马赛克 const blockSize = parseInt(document.getElementById('blockSize').value); pixelateFull(previewCtx, previewCanvas.width, previewCanvas.height, blockSize); } // 全图马赛克 function pixelateFull(ctx, width, height, blockSize) { const imageData = ctx.getImageData(0, 0, width, height); const data = imageData.data; for (let y = 0; y < height; y += blockSize) { for (let x = 0; x < width; x += blockSize) { // 计算块的平均颜色 let r = 0, g = 0, b = 0, count = 0; for (let dy = 0; dy < blockSize && y + dy < height; dy++) { for (let dx = 0; dx < blockSize && x + dx < width; dx++) { const idx = ((y + dy) * width + (x + dx)) * 4; r += data[idx]; g += data[idx + 1]; b += data[idx + 2]; count++; } } r = Math.floor(r / count); g = Math.floor(g / count); b = Math.floor(b / count); // 填充块 for (let dy = 0; dy < blockSize && y + dy < height; dy++) { for (let dx = 0; dx < blockSize && x + dx < width; dx++) { const idx = ((y + dy) * width + (x + dx)) * 4; data[idx] = r; data[idx + 1] = g; data[idx + 2] = b; } } } } ctx.putImageData(imageData, 0, 0); } // 重置图片 function resetImage() { if (originalImage) { displayImage(originalImage); } } // 下载图片 function downloadImage() { if (!previewCanvas) return; const link = document.createElement('a'); link.download = 'pixelated-image.png'; link.href = previewCanvas.toDataURL('image/png'); link.click(); } }

🎨 图片马赛克工具

预览区域

📷 原图

🎨 效果图

📖 关于图片马赛克工具

✨ 核心功能

🎯 应用场景

❓ 常见问题

什么是图片马赛克？

为什么要给图片添加马赛克？

如何选择合适的马赛克块大小？

🔗 相关工具推荐