Flutter中如何为图片添加噪点滤镜/效果？网格渐变噪点实现求助

以下是两种实用方案，帮你在已有的模糊网格渐变上添加颗粒噪点：

方案一：CSS伪元素实现（无需JS） #

适合纯CSS场景，通过伪元素叠加噪点层，避免噪点被模糊滤镜影响：

/* 基础网格渐变容器 */
.grid-container {
  width: 100vw;
  height: 100vh;
  /* 自定义网格渐变样式 */
  background: 
    linear-gradient(45deg, #2c3e5033 25%, transparent 25%, transparent 75%, #2c3e5033 75%),
    linear-gradient(45deg, #2c3e5033 25%, transparent 25%, transparent 75%, #2c3e5033 75%);
  background-size: 50px 50px;
  background-position: 0 0, 25px 25px;
  /* 已实现的模糊效果 */
  filter: blur(1.5px);
  position: relative;
  overflow: hidden;
}

/* 噪点叠加层 */
.grid-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 用重复径向渐变模拟颗粒噪点 */
  background: radial-gradient(#000 1px, transparent 1px);
  background-size: 3px 3px;
  /* 混合模式让噪点自然融合，可根据需求调整 */
  mix-blend-mode: overlay;
  opacity: 0.25;
  /* 取消滤镜，避免噪点被模糊 */
  filter: none;
}

方案二：Canvas绘制（更灵活可控） #

适合需要动态调整噪点密度、大小的场景，步骤清晰：

const canvas = document.getElementById('noise-grid');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 1. 绘制网格渐变
const createGridPattern = () => {
  const tempCanvas = document.createElement('canvas');
  tempCanvas.width = 50;
  tempCanvas.height = 50;
  const tempCtx = tempCanvas.getContext('2d');
  tempCtx.fillStyle = '#2c3e5033';
  tempCtx.fillRect(0, 0, 25, 25);
  tempCtx.fillRect(25, 25, 25, 25);
  return tempCtx.createPattern(tempCanvas, 'repeat');
};
ctx.fillStyle = createGridPattern();
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 2. 添加模糊效果
ctx.filter = 'blur(1.5px)';
ctx.drawImage(canvas, 0, 0);
ctx.filter = 'none'; // 重置滤镜，避免影响后续噪点绘制

// 3. 绘制颗粒噪点
const noiseDensity = 0.008; // 噪点密度，数值越大噪点越多
const totalNoise = Math.floor(canvas.width * canvas.height * noiseDensity);

for (let i = 0; i < totalNoise; i++) {
  const x = Math.random() * canvas.width;
  const y = Math.random() * canvas.height;
  const size = Math.random() * 1.2;
  const opacity = Math.random() * 0.3;
  ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`;
  ctx.fillRect(x, y, size, size);
}

关键注意点 #

• 噪点层要独立于模糊层：用伪元素或Canvas重置滤镜的方式，避免噪点被一起模糊，失去颗粒感。
• 混合模式与透明度：根据你的渐变底色调整mix-blend-mode（比如multiply、soft-light）和透明度，让噪点更自然。
• 噪点优化：如果CSS渐变模拟的噪点不够真实，可以用一张小尺寸的噪点PNG（100x100像素）作为背景平铺，效果更细腻。

内容的提问来源于stack exchange，提问作者s4nk37