前端图像处理：基于 Canvas 的图片模糊化实现

开篇

本文是基于工具小站-图片模块-图片模糊化功能的实现，进行了一些简单的总结。

图片模糊化原理

图片模糊化功能的实现本质上还是对于canvas的应用，首先获取到上传图片的数据，并在canvas画布上绘制出来，随后通过对于filter属性中的blur的效果进行设置。
filter属性是一个非常非常重要的属性，可以对图片的模糊度、亮度、对比度、灰度、色调旋转等各种属性进行调整和设置。
顺带一提，模糊的实现通常是通过卷积操作来进行的。图像每个像素的值都会根据周围的像素进行计算，从而达到模糊的效果。高斯模糊是常用的一种模糊算法，它基于高斯分布来决定影响每个像素的权重，效果比较自然。

代码逻辑

<template>
  <div class="image-blur-container">
    <header class="app-header">
      <h1>图片模糊化</h1>
      <p class="subtitle">给图片增加模糊效果</p>
    </header>
    <!-- 图片上传区域 -->
    <el-upload
      class="upload-area"
      drag
      :show-file-list="false"
      accept="image/*"
      :on-change="handleImageChange"
      :auto-upload="false"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">拖拽图片到此处或 <em>点击上传</em></div>
    </el-upload>

    <!-- 图片预览和编辑区域 -->
    <div v-if="imageUrl" class="preview-area">
      <div class="image-container" ref="imageContainer">
        <!-- 原始图片 -->
        <img :src="imageUrl" ref="previewImage" class="original-image" />

        <!-- 绘制层 Canvas -->
        <canvas
          v-if="blurMode === 'custom'"
          ref="drawCanvas"
          class="draw-canvas"
          @mousedown="startDrawing"
          @mousemove="draw"
          @mouseup="stopDrawing"
          @mouseleave="stopDrawing"
        ></canvas>
      </div>

      <!-- 控制面板 -->
      <div class="control-panel">
        <el-form :model="blurConfig" label-width="100px">
          <!-- 模糊程度 -->
          <el-form-item label="模糊程度">
            <el-select v-model="blurConfig.level">
              <el-option label="低" value="low" />
              <el-option label="中" value="medium" />
              <el-option label="高" value="high" />
            </el-select>
          </el-form-item>

          <!-- 模糊区域 -->
          <el-form-item label="模糊区域">
            <el-select v-model="blurMode">
              <el-option label="全部" value="all" />
              <el-option label="局部" value="partial" />
              <el-option label="自定义" value="custom" />
            </el-select>
          </el-form-item>

          <!-- 区域大小 -->
          <el-form-item label="区域大小">
            <el-select v-model="blurConfig.size">
              <el-option label="小" value="small" />
              <el-option label="中" value="medium" />
              <el-option label="大" value="large" />
            </el-select>
          </el-form-item>

          <!-- 区域位置 -->
          <el-form-item label="区域位置">
            <el-select v-model="blurConfig.position">
              <el-option label="左上" value="top-left" />
              <el-option label="右上" value="top-right" />
              <el-option label="左下" value="bottom-left" />
              <el-option label="右下" value="bottom-right" />
              <el-option label="居中" value="center" />
              <el-option label="自定义" value="custom" />
            </el-select>
          </el-form-item>

          <!-- 透明度 -->
          <el-form-item label="透明度">
            <el-slider
              v-model="blurConfig.opacity"
              :min="0"
              :max="100"
              :step="1"
            />