图片两边或者上下高斯模糊中间清晰效果方案

一、需求背景与效果描述

在UI设计、相册应用、视频编辑等场景中，图片两边或者上下高斯模糊中间清晰的效果常用于聚焦主体内容、增强视觉层次感或模拟镜头景深。例如：

• 横向布局中，左右两侧模糊，中间主体清晰（如手机相册浏览模式）；
• 纵向布局中，上下边缘模糊，中间内容突出（如网页头部背景图）。

该效果的核心是通过高斯模糊算法对图像边缘区域进行处理，同时保留中间区域的原始细节。

二、技术实现原理

1. 高斯模糊基础

高斯模糊是一种基于正态分布的图像平滑技术，通过计算像素周围邻域的加权平均值实现模糊效果。其核心公式为：
[ G(x,y) = \frac{1}{2\pi\sigma^2} e^{-\frac{x^2+y^2}{2\sigma^2}} ]
其中，(\sigma) 控制模糊强度，值越大模糊范围越广。

2. 分区域处理逻辑

实现两侧/上下模糊中间清晰的效果需分两步：

1. 定义清晰区域与模糊区域：通过几何掩模（Mask）划分中间保留区和边缘模糊区；
2. 动态模糊强度：在模糊区域内，可根据距离中间区域的远近调整模糊半径（(\sigma)），实现渐变效果。

三、具体实现方案

方案1：使用图像处理库（如OpenCV）

代码示例（Python + OpenCV）

import cv2
import numpy as np
def apply_side_blur(image_path, blur_strength=15, clear_width_ratio=0.5):
    img = cv2.imread(image_path)
    h, w = img.shape[:2]
    clear_width = int(w * clear_width_ratio)
    # 创建左右掩模（左侧模糊）
    mask_left = np.zeros((h, w), dtype=np.uint8)
    mask_left[:, :clear_width//2] = 255  # 左侧全模糊
    mask_right = np.zeros((h, w), dtype=np.uint8)
    mask_right[:, w-clear_width//2:] = 255  # 右侧全模糊
    # 对掩模区域应用高斯模糊
    blurred_left = cv2.GaussianBlur(img, (0, 0), blur_strength)
    blurred_right = cv2.GaussianBlur(img, (0, 0), blur_strength)
    # 合并结果：中间清晰，两侧模糊
    result = img.copy()
    result[:, :clear_width//2] = blurred_left[:, :clear_width//2]
    result[:, w-clear_width//2:] = blurred_right[:, w-clear_width//2:]
    return result
# 调用示例
output = apply_side_blur("input.jpg", blur_strength=25, clear_width_ratio=0.6)
cv2.imwrite("output.jpg", output)

关键参数说明

• blur_strength：控制模糊程度（(\sigma)值）；
• clear_width_ratio：中间清晰区域占图片宽度的比例（0~1）。

方案2：CSS实现（Web前端场景）

对于网页背景图，可通过CSS的filter和mask属性实现类似效果：

.container {
    background-image: url("image.jpg");
    mask-image: linear-gradient(to right, transparent 0%, white 25%, white 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, white 25%, white 75%, transparent 100%);
}
.blurred-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("image.jpg");
    filter: blur(10px);
    z-index: -1;
    mask-image: linear-gradient(to right, black 0%, transparent 25%, transparent 75%, black 100%);
}

此方案通过叠加两层图像（底层模糊，上层清晰）实现效果。

方案3：移动端（Flutter示例）

import 'package:flutter/material.dart';
import 'package:flutter_image_compress/flutter_image_compress.dart';
class BlurEffectWidget extends StatelessWidget {
  final String imagePath;
  BlurEffectWidget({required this.imagePath});
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 底层模糊图像
        Image.file(File(imagePath),
          fit: BoxFit.cover,
          filterQuality: FilterQuality.low,
          color: Colors.black.withOpacity(0.7),
          colorBlendMode: BlendMode.modulate,
        ),
        // 中间清晰区域（通过ClipRect裁剪）
        ClipRect(
          child: Align(
            alignment: Alignment.center,
            child: FractionallySizedBox(
              widthFactor: 0.6, // 中间60%宽度清晰
              child: Image.file(File(imagePath), fit: BoxFit.cover),
            ),
          ),
        ),
      ],
    );
  }
}

四、优化与注意事项

1. 性能优化：
   • 大图处理时建议先缩放再模糊，减少计算量；
   • 使用GPU加速（如OpenCV的UMat）。
2. 边缘过渡：
   • 在清晰与模糊区域间添加渐变过渡，避免生硬分界。
3. 动态调整：
   • 根据设备屏幕尺寸动态计算清晰区域比例。

五、应用场景扩展

1. 视频处理：在FFmpeg中通过boxblur滤镜结合crop和overlay实现动态模糊效果。
2. 游戏开发：在Unity中使用Shader实现实时模糊，聚焦角色周围区域。

通过上述方案，开发者可灵活选择适合自身平台的技术路径，实现高效的图片边缘模糊中间清晰效果。