前端图像处理惩罚实战: 基于Web Worker和SIMD优化实现图像转灰度功能 ...

开篇

   本篇博客是对于工具小站-图片工具模块-图片转灰度功能的总结。
  原理与作用

   图像灰度化处理惩罚的核心思想是将彩色图像的每个像素转换为灰度值。灰度值通常是根据图像的每个像素的红、绿、蓝（RGB）通道的值按某种加权方式计算出来的。如许可以将彩色图像转换为灰度图像，减少颜色信息，使图像只保留亮度信息。
灰度值的计算方法可以有差别的算法，例如加权平均法、简单平均法等。常见的灰度化算法有：
加权法：根据差别颜色的感知权重来计算灰度值。常见权重为：红色0.2156,绿色0.7152,蓝色0.0722.
平均法：将RGB值平均后作为灰度值。
亮度法：与加权法类似，但利用差别的权重（红色0.299,绿色0.587,蓝色0.114）。
  功能实现逻辑

思量到图片处理惩罚时需要计算的数据量较大，为了避免壅闭主线程的渲染，我接纳了WebWorker的方式在后台线程中实行图像处理惩罚操纵。
下面将简单担当一下webworker文件中，重要的功能的实现逻辑代码。
灰度值查找表预计算

为了优化灰度化处理惩罚性能，这里首先创建了一个grayLookupTable查找表。这张表预计算了每个RGB值对应的灰度值（按照差别的算法），如许可以在现实处理惩罚时直接查找对应的值，避免重复计算。

1. // 预计算灰度值查找表
2. const grayLookupTable = new Uint8Array(256 * 3);
3. const weights = {
4.   weighted: [0.2126, 0.7152, 0.0722],
5.   average: [0.3333, 0.3333, 0.3334],
6.   luminosity: [0.299, 0.587, 0.114]
7. };
9. // 初始化查找表
10. function initLookupTables() {
11.   Object.keys(weights).forEach(method => {
12.     const [r, g, b] = weights[method];
13.     for (let i = 0; i < 256; i++) {
14.       grayLookupTable[i * 3] = i * r;
15.       grayLookupTable[i * 3 + 1] = i * g;
16.       grayLookupTable[i * 3 + 2] = i * b;
17.     }
18.   });
19. }
21. initLookupTables();

复制代码

SIMD优化的灰度处理惩罚

在欣赏器支持SIMD（单指令多数据）时，利用SMD加速了灰度计算。SIMD允许一次操纵多个数据元素，因此可以明显提高性能。
processGrayscaleSIMD方法利用SIMD操纵来并行处理惩罚图像中的多个像素。具体步骤为:
1.加载权重：将算法选择的RGB权重通过SIMD.Float32x4.splat()方法加载到向量中。
2.处理惩罚图像数据：利用SIMD.Float32x4来加载多个像素的数据（每4个像素），举行加权计算，终极得到灰度值。
3.生存结果：将计算后的灰度值存回到图像数据中。
假如欣赏器不支持SIMD，则回退到标准的灰度处理惩罚方法（见下文）。

1. // 使用 SIMD 优化的灰度处理（如果浏览器支持）
2. function processGrayscaleSIMD(imageData, algorithm = 'weighted') {
3.   const data = imageData.data;
4.   const len = data.length;
5.   const [r, g, b] = weights[algorithm];
6.   
7.   // 使用 SIMD 优化
8.   if (typeof SIMD !== 'undefined' && SIMD.Float32x4) {
9.     const rWeight = SIMD.Float32x4.splat(r);
10.     const gWeight = SIMD.Float32x4.splat(g);
11.     const bWeight = SIMD.Float32x4.splat(b);
12.    
13.     for (let i = 0; i < len; i += 16) {
14.       const rgba0 = SIMD.Float32x4.load(data, i);
15.       const rgba1 = SIMD.Float32x4.load(data, i + 4);
16.       const rgba2 = SIMD.Float32x4.load(data, i + 8);
17.       const rgba3 = SIMD.Float32x4.load(data, i + 12);
18.       
19.       const gray0 = SIMD.Float32x4.add(
20.         SIMD.Float32x4.mul(rgba0, rWeight),
21.         SIMD.Float32x4.add(
22.           SIMD.Float32x4.mul(rgba1, gWeight),
23.           SIMD.Float32x4.mul(rgba2, bWeight)
24.         )
25.       );
26.       
27.       SIMD.Float32x4.store(data, i, gray0);
28.       SIMD.Float32x4.store(data, i + 4, gray0);
29.       SIMD.Float32x4.store(data, i + 8, gray0);
30.     }
31.     return imageData;
32.   }
33.   
34.   return processGrayscaleStandard(imageData, algorithm);
35. }

复制代码

标准灰度处理惩罚（查找表优化）

本方法为标准灰度处理惩罚方法，通过查找表加速了每个像素的灰度值计算。具体步骤如下：
1.查找表选择：根据所选的算法（如加权法、平均值法等），确定利用的查找表的偏移量。
2.遍历图像数据中的每个像素，提取RGB值。
3.查找灰度值：利用查找表中的预计算结果来得到每个像素的灰度值。
4.更新像素值：将计算得到的灰度值赋给RGB通道，保持好Alpha通道不变。

1. // 标准灰度处理（使用查找表优化）
2. function processGrayscaleStandard(imageData, algorithm = 'weighted') {
3.   const data = imageData.data;
4.   const len = data.length;
5.   const tableOffset = algorithm === 'weighted' ? 0 : (algorithm === 'average' ? 256 : 512);
6.   
7.   // 使用 Uint32Array 视图加速访问
8.   const pixels = new Uint32Array(data.buffer);
9.   const pixelCount = len >> 2;
10.   
11.   for (let i = 0; i < pixelCount; i++) {
12.     const offset = i << 2;
13.     const r = data[offset];
14.     const g = data[offset + 1];
15.     const b = data[offset + 2];
16.    
17.     // 使用查找表计算灰度值
18.     const gray = (
19.       grayLookupTable[tableOffset + r] +
20.       grayLookupTable[tableOffset + g + 1] +
21.       grayLookupTable[tableOffset + b + 2]
22.     ) | 0;
23.    
24.     // 一次性设置 RGB 值（保持 Alpha 不变）
25.     pixels[i] = (data[offset + 3] << 24) | // Alpha
26.                 (gray << 16) |             // Red
27.                 (gray << 8) |              // Green
28.                 gray;                      // Blue
29.   }
30.   
31.   return imageData;
32. }

复制代码

亮度和对比度调整

最后便是对于亮度和对比度的调整。adjustBrightnessContrast函数应用了预计算的亮度和对比度查找表。具体步骤如下：
1.计算调整因子：利用对比度因子公式来计算处理惩罚图像的对比度。
2.亮度调整：根据传入的亮度值调整每个像素的亮度。
3.对比度调整：根据对比度公式对每个像素举行调整。
4.限制范围：确保调整后的像素值在0到255的有效范围内。
5.批量更新像素值：利用unit32Array加速图像数据更新。

1. // 优化的亮度和对比度处理
2. function adjustBrightnessContrast(imageData, brightness, contrast) {
3.   const data = imageData.data;
4.   const len = data.length;
5.   const factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
6.   
7.   // 预计算亮度和对比度查找表
8.   const lookupTable = new Uint8Array(256);
9.   for (let i = 0; i < 256; i++) {
10.     let value = i;
11.     // 应用亮度
12.     value += brightness;
13.     // 应用对比度
14.     value = factor * (value - 128) + 128;
15.     // 限制在有效范围内
16.     lookupTable[i] = Math.max(0, Math.min(255, value)) | 0;
17.   }
18.   
19.   // 使用 Uint32Array 视图加速访问
20.   const pixels = new Uint32Array(data.buffer);
21.   const pixelCount = len >> 2;
22.   
23.   for (let i = 0; i < pixelCount; i++) {
24.     const offset = i << 2;
25.     const r = lookupTable[data[offset]];
26.     const g = lookupTable[data[offset + 1]];
27.     const b = lookupTable[data[offset + 2]];
28.    
29.     pixels[i] = (data[offset + 3] << 24) | // Alpha
30.                 (r << 16) |                // Red
31.                 (g << 8) |                 // Green
32.                 b;                         // Blue
33.   }
34.   
35.   return imageData;
36. }

复制代码

Worker与主线程通讯

1. // 接收主线程消息
2. self.onmessage = function(e) {
3.   const { imageData, algorithm, brightness, contrast } = e.data;
4.   
5.   // 使用优化后的灰度处理
6.   let processedData = processGrayscaleSIMD(imageData, algorithm);
7.   
8.   // 使用优化后的亮度和对比度处理
9.   if (brightness !== 0 || contrast !== 0) {
10.     processedData = adjustBrightnessContrast(processedData, brightness, contrast);
11.   }
12.   
13.   // 返回处理后的数据
14.   self.postMessage(processedData);
15. }

复制代码

完备代码

• 在项目根目次下新建workers文件夹，并增长grayscale.worker.js文件
  

1. // 处理惩罚图片转灰度的 Worker// 预计算灰度值查找表
2. const grayLookupTable = new Uint8Array(256 * 3);
3. const weights = {
4.   weighted: [0.2126, 0.7152, 0.0722],
5.   average: [0.3333, 0.3333, 0.3334],
6.   luminosity: [0.299, 0.587, 0.114]
7. };
9. // 初始化查找表
10. function initLookupTables() {
11.   Object.keys(weights).forEach(method => {
12.     const [r, g, b] = weights[method];
13.     for (let i = 0; i < 256; i++) {
14.       grayLookupTable[i * 3] = i * r;
15.       grayLookupTable[i * 3 + 1] = i * g;
16.       grayLookupTable[i * 3 + 2] = i * b;
17.     }
18.   });
19. }
21. initLookupTables();
22. // 使用 SIMD 优化的灰度处理（如果浏览器支持）
23. function processGrayscaleSIMD(imageData, algorithm = 'weighted') {
24.   const data = imageData.data;
25.   const len = data.length;
26.   const [r, g, b] = weights[algorithm];
27.   
28.   // 使用 SIMD 优化
29.   if (typeof SIMD !== 'undefined' && SIMD.Float32x4) {
30.     const rWeight = SIMD.Float32x4.splat(r);
31.     const gWeight = SIMD.Float32x4.splat(g);
32.     const bWeight = SIMD.Float32x4.splat(b);
33.    
34.     for (let i = 0; i < len; i += 16) {
35.       const rgba0 = SIMD.Float32x4.load(data, i);
36.       const rgba1 = SIMD.Float32x4.load(data, i + 4);
37.       const rgba2 = SIMD.Float32x4.load(data, i + 8);
38.       const rgba3 = SIMD.Float32x4.load(data, i + 12);
39.       
40.       const gray0 = SIMD.Float32x4.add(
41.         SIMD.Float32x4.mul(rgba0, rWeight),
42.         SIMD.Float32x4.add(
43.           SIMD.Float32x4.mul(rgba1, gWeight),
44.           SIMD.Float32x4.mul(rgba2, bWeight)
45.         )
46.       );
47.       
48.       SIMD.Float32x4.store(data, i, gray0);
49.       SIMD.Float32x4.store(data, i + 4, gray0);
50.       SIMD.Float32x4.store(data, i + 8, gray0);
51.     }
52.     return imageData;
53.   }
54.   
55.   return processGrayscaleStandard(imageData, algorithm);
56. }
57. // 标准灰度处理（使用查找表优化）
58. function processGrayscaleStandard(imageData, algorithm = 'weighted') {
59.   const data = imageData.data;
60.   const len = data.length;
61.   const tableOffset = algorithm === 'weighted' ? 0 : (algorithm === 'average' ? 256 : 512);
62.   
63.   // 使用 Uint32Array 视图加速访问
64.   const pixels = new Uint32Array(data.buffer);
65.   const pixelCount = len >> 2;
66.   
67.   for (let i = 0; i < pixelCount; i++) {
68.     const offset = i << 2;
69.     const r = data[offset];
70.     const g = data[offset + 1];
71.     const b = data[offset + 2];
72.    
73.     // 使用查找表计算灰度值
74.     const gray = (
75.       grayLookupTable[tableOffset + r] +
76.       grayLookupTable[tableOffset + g + 1] +
77.       grayLookupTable[tableOffset + b + 2]
78.     ) | 0;
79.    
80.     // 一次性设置 RGB 值（保持 Alpha 不变）
81.     pixels[i] = (data[offset + 3] << 24) | // Alpha
82.                 (gray << 16) |             // Red
83.                 (gray << 8) |              // Green
84.                 gray;                      // Blue
85.   }
86.   
87.   return imageData;
88. }
89. // 优化的亮度和对比度处理
90. function adjustBrightnessContrast(imageData, brightness, contrast) {
91.   const data = imageData.data;
92.   const len = data.length;
93.   const factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
94.   
95.   // 预计算亮度和对比度查找表
96.   const lookupTable = new Uint8Array(256);
97.   for (let i = 0; i < 256; i++) {
98.     let value = i;
99.     // 应用亮度
100.     value += brightness;
101.     // 应用对比度
102.     value = factor * (value - 128) + 128;
103.     // 限制在有效范围内
104.     lookupTable[i] = Math.max(0, Math.min(255, value)) | 0;
105.   }
106.   
107.   // 使用 Uint32Array 视图加速访问
108.   const pixels = new Uint32Array(data.buffer);
109.   const pixelCount = len >> 2;
110.   
111.   for (let i = 0; i < pixelCount; i++) {
112.     const offset = i << 2;
113.     const r = lookupTable[data[offset]];
114.     const g = lookupTable[data[offset + 1]];
115.     const b = lookupTable[data[offset + 2]];
116.    
117.     pixels[i] = (data[offset + 3] << 24) | // Alpha
118.                 (r << 16) |                // Red
119.                 (g << 8) |                 // Green
120.                 b;                         // Blue
121.   }
122.   
123.   return imageData;
124. }
125. // 接收主线程消息
126. self.onmessage = function(e) {
127.   const { imageData, algorithm, brightness, contrast } = e.data;
128.   
129.   // 使用优化后的灰度处理
130.   let processedData = processGrayscaleSIMD(imageData, algorithm);
131.   
132.   // 使用优化后的亮度和对比度处理
133.   if (brightness !== 0 || contrast !== 0) {
134.     processedData = adjustBrightnessContrast(processedData, brightness, contrast);
135.   }
136.   
137.   // 返回处理后的数据
138.   self.postMessage(processedData);
139. }

复制代码

• 新建vue组件，并引用worker文件，绘制转灰度组件的UI
  

1. <template>
2.   <div class="app-container">
3.     <header class="app-header">
4.       <h1>图片转灰度</h1>
5.       <p class="subtitle">专业的图片灰度处理工具，支持多种算法</p>
6.     </header>
8.     <main class="main-content">
9.       <!-- 添加标签页 -->
10.       <el-tabs v-model="activeTab" class="image-tabs">
11.         <el-tab-pane label="单张处理" name="single">
12.           <!-- 单张图片处理区域 -->
13.           <div class="upload-section" v-if="!singleImage">
14.             <el-upload
15.               class="upload-drop-zone"
16.               drag
17.               :auto-upload="false"
18.               accept="image/*"
19.               :show-file-list="false"
20.               :multiple="false"
21.               @change="handleSingleFileChange"
22.             >
23.               <el-icon class="upload-icon"><upload-filled /></el-icon>
24.               <div class="upload-text">
25.                 <h3>将图片拖到此处，或点击上传</h3>
26.                 <p>支持 PNG、JPG、WebP 等常见格式</p>
27.               </div>
28.             </el-upload>
29.           </div>
31.           <div v-else class="process-section single-mode">
32.             <div class="image-comparison">
33.               <!-- 原图预览 -->
34.               <div class="image-preview original">
35.                 <h3>原图</h3>
36.                 <div class="image-container">
37.                   <img :src="singleImage.originalPreview" :alt="singleImage.file.name" />
38.                 </div>
39.               </div>
41.               <!-- 灰度图预览 -->
42.               <div class="image-preview processed">
43.                 <h3>灰度效果</h3>
44.                 <div class="image-container">
45.                   <img
46.                     v-if="singleImage.processedPreview"
47.                     :src="singleImage.processedPreview"
48.                     :alt="singleImage.file.name + '(灰度)'"
49.                   />
50.                   <div v-else class="placeholder">
51.                     <el-icon><picture-rounded /></el-icon>
52.                     <span>待处理</span>
53.                   </div>
54.                 </div>
55.               </div>
56.             </div>
57.           </div>
58.         </el-tab-pane>
60.         <el-tab-pane label="批量处理" name="batch">
61.           <!-- 批量处理区域 -->
62.           <div class="upload-section" v-if="!images.length">
63.             <el-upload
64.               class="upload-drop-zone"
65.               drag
66.               :auto-upload="false"
67.               accept="image/*"
68.               :show-file-list="false"
69.               :multiple="true"
70.               @change="handleBatchFileChange"
71.             >
72.               <el-icon class="upload-icon"><upload-filled /></el-icon>
73.               <div class="upload-text">
74.                 <h3>将图片拖到此处，或点击上传</h3>
75.                 <p>支持批量上传多张图片，PNG、JPG、WebP 等常见格式</p>
76.               </div>
77.             </el-upload>
78.           </div>
80.           <div v-else class="process-section batch-mode">
81.             <!-- 图片列表 -->
82.             <div class="images-list">
83.               <el-scrollbar height="600px">
84.                 <div v-for="(image, index) in images" :key="index" class="image-item">
85.                   <div class="image-comparison">
86.                     <!-- 原图预览 -->
87.                     <div class="image-preview original">
88.                       <h3>原图</h3>
89.                       <div class="image-container">
90.                         <img :src="image.originalPreview" :alt="image.file.name" />
91.                       </div>
92.                     </div>
94.                     <!-- 灰度图预览 -->
95.                     <div class="image-preview processed">
96.                       <h3>灰度效果</h3>
97.                       <div class="image-container">
98.                         <img
99.                           v-if="image.processedPreview"
100.                           :src="image.processedPreview"
101.                           :alt="image.file.name + '(灰度)'"
102.                         />
103.                         <div v-else class="placeholder">
104.                           <el-icon><picture-rounded /></el-icon>
105.                           <span>待处理</span>
106.                         </div>
107.                       </div>
108.                     </div>
109.                   </div>
110.                   
111.                   <!-- 单张图片的转换按钮 -->
112.                   <!-- <div class="image-actions">
113.                     <el-button
114.                       type="primary"
115.                       @click="processSingleImageInBatch(image)"
116.                       :loading="image.processing"
117.                       :disabled="!!image.processedPreview"
118.                     >
119.                       {{ image.processing ? '转换中...' : '开始转换' }}
120.                       转换此图
121.                     </el-button>
122.                   </div> -->
123.                 </div>
124.               </el-scrollbar>
125.             </div>
126.           </div>
127.         </el-tab-pane>
128.       </el-tabs>
130.       <!-- 控制面板 -->
131.       <div class="control-panel">
132.         <el-form :model="settings" label-position="top">
133.           <!-- 算法选择 -->
134.           <el-form-item label="灰度算法">
135.             <el-select v-model="settings.algorithm" class="algorithm-select">
136.               <el-option
137.                 v-for="algo in algorithms"
138.                 :key="algo.value"
139.                 :label="algo.label"
140.                 :value="algo.value"
141.               />
142.             </el-select>
143.           </el-form-item>
145.           <!-- 亮度调节 -->
146.           <el-form-item label="亮度调节">
147.             <el-slider
148.               v-model="settings.brightness"
149.               :min="-100"
150.               :max="100"
151.               :format-tooltip="(val) => `${val > 0 ? '+' : ''}${val}%`"
152.             />
153.           </el-form-item>
155.           <!-- 对比度调节 -->
156.           <el-form-item label="对比度">
157.             <el-slider
158.               v-model="settings.contrast"
159.               :min="-100"
160.               :max="100"
161.               :format-tooltip="(val) => `${val > 0 ? '+' : ''}${val}%`"
162.             />
163.           </el-form-item>
164.         </el-form>
166.         <!-- 操作按钮 -->
167.         <div class="action-buttons">
168.           <template v-if="activeTab === 'single'">
169.             <el-button
170.               type="primary"
171.               @click="processSingleImage"
172.               :loading="processing"
173.               :disabled="!singleImage"
174.             >
175.               {{ processing ? '转换中...' : '开始转换' }}
176.             </el-button>
177.             <el-button @click="resetSingleImage">重新选择</el-button>
178.             <el-button
179.               type="success"
180.               @click="downloadSingleImage"
181.               :disabled="!singleImage?.processedPreview"
182.             >
183.               下载图片
184.             </el-button>
185.           </template>
186.           <template v-else>
187.             <el-button
188.               type="primary"
189.               @click="processAllImages"
190.               :loading="batchProcessing"
191.               :disabled="!hasUnprocessedImages"
192.             >
193.               {{ batchProcessing ? '批量转换中...' : '批量转换' }}
194.             </el-button>
195.             <el-button @click="resetImages">重新选择</el-button>
196.             <el-button
197.               type="success"
198.               @click="downloadAllImages"
199.               :disabled="!hasProcessedImages"
200.             >
201.               打包下载
202.             </el-button>
203.           </template>
204.         </div>
205.       </div>
206.     </main>
207.   </div>
208. </template>
210. <script setup>
211. import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
212. import { ElMessage } from 'element-plus'
213. import { UploadFilled, PictureRounded } from '@element-plus/icons-vue'
215. // Web Worker 实例
216. let worker = null
218. // 状态变量
219. const images = ref([])
220. const processing = ref(false)
222. // 灰度算法选项
223. const algorithms = [
224.   { label: '加权平均法（推荐）', value: 'weighted' },
225.   { label: '平均值法', value: 'average' },
226.   { label: '亮度法', value: 'luminosity' }
227. ]
229. // 处理设置
230. const settings = ref({
231.   algorithm: 'weighted',
232.   brightness: 0,
233.   contrast: 0
234. })
236. // 计算属性：是否有已处理的图片
237. const hasProcessedImages = computed(() => {
238.   return images.value.some(img => img.processedPreview)
239. })
241. // 新增状态变量
242. const activeTab = ref('single')
243. const singleImage = ref(null)
245. // 添加批量处理状态
246. const batchProcessing = ref(false)
248. // 计算是否有未处理的图片
249. const hasUnprocessedImages = computed(() => {
250.   return images.value.some(img => !img.processedPreview)
251. })
253. // 初始化 Web Worker
254. onMounted(() => {
255.   worker = new Worker(new URL('@/workers/grayscale.worker.js', import.meta.url))
256.   
257.   worker.onmessage = (e) => {
258.     const canvas = document.createElement('canvas')
259.     const ctx = canvas.getContext('2d')
260.    
261.     canvas.width = e.data.width
262.     canvas.height = e.data.height
263.     ctx.putImageData(e.data, 0, 0)
264.    
265.     processedPreview.value = canvas.toDataURL('image/png')
266.     processing.value = false
267.    
268.     ElMessage.success('转换完成')
269.   }
270.   
271.   worker.onerror = (error) => {
272.     processing.value = false
273.     ElMessage.error('处理失败：' + error.message)
274.     console.error(error)
275.   }
276. })
278. // 清理 Worker
279. onUnmounted(() => {
280.   resetSingleImage()
281.   resetImages()
282.   if (worker) {
283.     worker.terminate()
284.   }
285. })
287. // 处理单张文件上传
288. const handleSingleFileChange = (file) => {
289.   const fileObj = file.raw
290.   if (!fileObj || !fileObj.type.startsWith('image/')) {
291.     ElMessage.error('请上传图片文件')
292.     return
293.   }
294.   
295.   singleImage.value = {
296.     file: fileObj,
297.     originalPreview: URL.createObjectURL(fileObj),
298.     processedPreview: ''
299.   }
300. }
302. // 处理批量文件上传
303. const handleBatchFileChange = (file) => {
304.   const files = Array.isArray(file) ? file : [file]
305.   
306.   files.forEach(f => {
307.     const fileObj = f.raw
308.     if (!fileObj || !fileObj.type.startsWith('image/')) {
309.       ElMessage.error(`${fileObj.name} 不是有效的图片文件`)
310.       return
311.     }
312.    
313.     images.value.push({
314.       file: fileObj,
315.       originalPreview: URL.createObjectURL(fileObj),
316.       processedPreview: '',
317.       processing: false
318.     })
319.   })
320. }
322. // 处理单张图片（单图模式）
323. const processSingleImage = async () => {
324.   if (!singleImage.value || processing.value) return
325.   
326.   processing.value = true
327.   try {
328.     await processImage(singleImage.value)
329.     ElMessage.success('转换完成')
330.   } catch (error) {
331.     ElMessage.error('处理失败，请重试')
332.     console.error(error)
333.   } finally {
334.     processing.value = false
335.   }
336. }
338. // 处理批量模式中的单张图片
339. const processSingleImageInBatch = async (image) => {
340.   if (image.processing || image.processedPreview) return
341.   
342.   image.processing = true
343.   try {
344.     await processImage(image)
345.     ElMessage.success('转换完成')
346.   } catch (error) {
347.     ElMessage.error('处理失败，请重试')
348.     console.error(error)
349.   } finally {
350.     image.processing = false
351.   }
352. }
354. // 重置单图状态
355. const resetSingleImage = () => {
356.   if (singleImage.value) {
357.     URL.revokeObjectURL(singleImage.value.originalPreview)
358.   }
359.   singleImage.value = null
360. }
362. // 下载单张处理后的图片
363. const downloadSingleImage = () => {
364.   if (!singleImage.value?.processedPreview) return
365.   
366.   const link = document.createElement('a')
367.   const fileName = singleImage.value.file.name.split('.')[0]
368.   link.download = `${fileName}_grayscale.png`
369.   link.href = singleImage.value.processedPreview
370.   link.click()
371. }
373. // 处理文件上传
374. const handleFileChange = (file) => {
375.   const files = Array.isArray(file) ? file : [file]
376.   
377.   files.forEach(f => {
378.     const fileObj = f.raw
379.     if (!fileObj || !fileObj.type.startsWith('image/')) {
380.       ElMessage.error(`${fileObj.name} 不是有效的图片文件`)
381.       return
382.     }
383.    
384.     images.value.push({
385.       file: fileObj,
386.       originalPreview: URL.createObjectURL(fileObj),
387.       processedPreview: ''
388.     })
389.   })
390. }
392. // 批量处理图片
393. const processAllImages = async () => {
394.   if (!images.value.length || batchProcessing.value) return
395.   
396.   batchProcessing.value = true
397.   
398.   try {
399.     const unprocessedImages = images.value.filter(img => !img.processedPreview)
400.     for (const image of unprocessedImages) {
401.       image.processing = true
402.       await processImage(image)
403.       image.processing = false
404.     }
405.     ElMessage.success('所有图片处理完成')
406.   } catch (error) {
407.     ElMessage.error('处理过程中出现错误')
408.     console.error(error)
409.   } finally {
410.     batchProcessing.value = false
411.   }
412. }
414. // 处理单张图片
415. const processImage = (image) => {
416.   return new Promise((resolve, reject) => {
417.     const canvas = document.createElement('canvas')
418.     const ctx = canvas.getContext('2d')
419.     const img = new Image()
420.    
421.     img.onload = () => {
422.       canvas.width = img.width
423.       canvas.height = img.height
424.       ctx.drawImage(img, 0, 0)
425.       
426.       const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
427.       
428.       worker.onmessage = (e) => {
429.         const resultCanvas = document.createElement('canvas')
430.         const resultCtx = resultCanvas.getContext('2d')
431.         
432.         resultCanvas.width = e.data.width
433.         resultCanvas.height = e.data.height
434.         resultCtx.putImageData(e.data, 0, 0)
435.         
436.         image.processedPreview = resultCanvas.toDataURL('image/png')
437.         resolve()
438.       }
440.       console.log('imageData',imageData);
441.       
442.       
443.       worker.postMessage({
444.         imageData,
445.         algorithm: settings.value.algorithm,
446.         brightness: settings.value.brightness,
447.         contrast: settings.value.contrast
448.       })
449.     }
450.    
451.     img.onerror = reject
452.     img.src = image.originalPreview
453.   })
454. }
456. // 打包下载所有处理后的图片
457. const downloadAllImages = async () => {
458.   try {
459.     const JSZip = (await import('jszip')).default
460.     const zip = new JSZip()
461.    
462.     images.value.forEach((image, index) => {
463.       if (image.processedPreview) {
464.         const base64Data = image.processedPreview.split(',')[1]
465.         const fileName = `${image.file.name.split('.')[0]}_grayscale.png`
466.         zip.file(fileName, base64Data, { base64: true })
467.       }
468.     })
469.    
470.     const content = await zip.generateAsync({ type: 'blob' })
471.     const link = document.createElement('a')
472.     link.href = URL.createObjectURL(content)
473.     link.download = 'grayscale_images.zip'
474.     link.click()
475.    
476.     ElMessage.success('打包下载开始')
477.   } catch (error) {
478.     ElMessage.error('下载失败')
479.     console.error(error)
480.   }
481. }
483. // 重置状态
484. const resetImages = () => {
485.   images.value.forEach(image => {
486.     URL.revokeObjectURL(image.originalPreview)
487.   })
488.   images.value = []
489.   settings.value = {
490.     algorithm: 'weighted',
491.     brightness: 0,
492.     contrast: 0
493.   }
494. }
496. // 添加对设置变化的监听，自动重新处理图片
497. watch(
498.   () => settings.value,
499.   () => {
500.     if (images.value.length && hasProcessedImages.value) {
501.       processAllImages()
502.     }
503.   },
504.   { deep: true }
505. )
506. </script>
508. <style scoped>
509. .app-container {
510.   max-width: 1200px;
511.   margin: 0 auto;
512.   padding: 2rem;
513. }
515. .app-header {
516.   text-align: center;
517.   margin-bottom: 3rem;
518. }
520. .app-header h1 {
521.   font-size: 2.5rem;
522.   font-weight: 600;
523.   color: var(--el-text-color-primary);
524.   margin-bottom: 0.5rem;
525. }
527. .subtitle {
528.   color: var(--el-text-color-secondary);
529.   font-size: 1.1rem;
530. }
532. .upload-section {
533.   background: var(--el-bg-color);
534.   border-radius: 12px;
535.   padding: 2rem;
536.   box-shadow: var(--el-box-shadow-light);
537. }
539. .upload-drop-zone {
540.   border: 2px dashed var(--el-border-color);
541.   border-radius: 8px;
542.   padding: 3rem 1rem;
543.   transition: all 0.3s ease;
544. }
546. .upload-drop-zone:hover {
547.   border-color: var(--el-color-primary);
548.   background: rgba(64, 158, 255, 0.04);
549. }
551. .upload-icon {
552.   font-size: 3rem;
553.   color: var(--el-text-color-secondary);
554.   margin-bottom: 1rem;
555. }
557. .process-section {
558.   display: grid;
559.   grid-template-columns: 1fr;
560.   gap: 2rem;
561.   margin-top: 2rem;
562. }
564. .image-comparison {
565.   display: grid;
566.   grid-template-columns: 1fr 1fr;
567.   gap: 1rem;
568.   margin-bottom: 1rem;
569. }
571. .image-preview {
572.   background: var(--el-bg-color);
573.   border-radius: 12px;
574.   padding: 1rem;
575.   box-shadow: var(--el-box-shadow-light);
576. }
578. .image-preview h3 {
579.   text-align: center;
580.   margin-bottom: 1rem;
581.   color: var(--el-text-color-primary);
582. }
584. .image-container {
585.   aspect-ratio: 16/9;
586.   display: flex;
587.   align-items: center;
588.   justify-content: center;
589.   background: var(--el-fill-color-lighter);
590.   border-radius: 8px;
591.   overflow: hidden;
592. }
594. .image-container img {
595.   max-width: 100%;
596.   max-height: 100%;
597.   object-fit: contain;
598. }
600. .placeholder {
601.   display: flex;
602.   flex-direction: column;
603.   align-items: center;
604.   gap: 0.5rem;
605.   color: var(--el-text-color-secondary);
606. }
608. .control-panel {
609.   background: var(--el-bg-color);
610.   border-radius: 12px;
611.   padding: 2rem;
612.   box-shadow: var(--el-box-shadow-light);
613.   margin-top: 2rem;
614. }
616. .algorithm-select {
617.   width: 100%;
618. }
620. .action-buttons {
621.   display: flex;
622.   gap: 1rem;
623.   justify-content: center;
624.   margin-top: 2rem;
625.   padding-top: 1rem;
626.   border-top: 1px solid var(--el-border-color-lighter);
627. }
629. .action-buttons .el-button {
630.   min-width: 100px;
631. }
633. /* :deep(.el-button--primary) {
634.   background: var(--el-color-primary-gradient);
635.   border: none;
636. } */
638. .images-list {
639.   width: 100%;
640. }
642. .image-item {
643.   margin-bottom: 2rem;
644.   padding-bottom: 2rem;
645.   border-bottom: 1px solid var(--el-border-color-lighter);
646. }
648. .image-item:last-child {
649.   margin-bottom: 0;
650.   padding-bottom: 0;
651.   border-bottom: none;
652. }
654. /* 新增样式 */
655. .image-tabs {
656.   margin-bottom: 2rem;
657. }
659. .single-mode {
660.   display: flex;
661.   flex-direction: column;
662.   gap: 2rem;
663. }
665. .batch-mode {
666.   display: flex;
667.   flex-direction: column;
668.   gap: 2rem;
669. }
671. :deep(.el-tabs__nav-wrap::after) {
672.   height: 1px;
673.   background-color: var(--el-border-color-lighter);
674. }
676. :deep(.el-tabs__item) {
677.   font-size: 1.1rem;
678.   padding: 0 2rem;
679. }
681. :deep(.el-tabs__item.is-active) {
682.   font-weight: 600;
683. }
685. .main-content {
686.   max-width: 1200px;
687.   margin: 0 auto;
688. }
690. :deep(.el-tabs__nav) {
691.   margin-bottom: 1rem;
692. }
693. </style>

复制代码

结果截图

注

   转眼间2024年已经已往了，从2024年3月份开始写下第一篇博客开始，到如今也写了90篇博客了。在接下来的一年里，我会继续保持着分享技能、记录成长的习惯，也会在后面逐步加入一些更加深入的技能总结（努力每个月更新一篇干货吧）。
感谢阅读！盼望大家一起在IT之路上一路狂奔~

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。