边缘计算：纯前端如何实现图片裁剪、压缩、转换与智能分类，支持离线与同步

九幽归墟2024-10-14 10:28

在数字化时代，图像处理技术的需求不断增加。无论是社交媒体、电子商务还是医疗影像，如何高效、智能地处理和分类图像成为了一个重要课题。边缘计算作为一种新兴技术，能够将计算任务移至用户设备本地，从而实现更快的处理速度和更低的网络延迟。

本文将探讨如何利用纯前端技术实现图像裁剪、压缩和格式转换，以及智能分类。这一过程不仅提高了用户体验，还在离线环境中保持了数据处理的连续性。同时，文章将介绍如何在离线模式下安全地存储和同步数据，确保在网络恢复时能及时上传。

目录

  1. 什么是边缘计算？
  2. 为什么前端需要边缘计算？
  3. 前端在边缘节点中的应用场景
  4. 边缘计算-纯前端离线图像处理案例

一、什么是边缘计算？

边缘计算是将计算和数据存储从中央服务器移至更靠近用户端的设备或节点上进行处理的一种架构方式。边缘计算本质上通过减少与中央服务器的通信，降低延迟，提升用户体验。在前端应用中，边缘计算通常涉及使用本地设备（如用户的浏览器、智能手机或附近的边缘服务器）处理数据或执行部分计算任务。

二、为什么前端需要边缘计算？

  1. 降低延迟: 靠近用户的边缘节点可以显著减少延迟，提高网页响应速度。
  2. 减少服务器压力: 通过将一些计算任务（如渲染、数据处理）分配给边缘节点，可以降低主服务器的负载，改善应用的整体性能。
  3. 提升用户体验: 更快的响应速度和更高的可用性，能够显著改善用户体验，尤其是在大促或高并发活动中。
  4. 区域化内容定制: 边缘节点可以基于用户的地理位置、语言、时区等因素，动态渲染本地化内容。

三、前端在边缘节点中的应用场景

  1. 离线计算和处理 ：利用浏览器内存（如localStorage、IndexedDB）或本地文件存储，用户即使处于离线状态，应用仍能执行某些任务，并在恢复网络连接时同步数据。

  2. 边缘缓存：通过内容分发网络（CDN）将资源缓存在离用户更近的边缘节点上，使得静态资源（如图片、CSS、JS文件）能够快速加载，从而减少请求延迟。

  3. Web Worker：在浏览器中使用Web Worker可以实现多线程处理，允许将计算密集型任务放在后台运行，从而不会阻塞主线程，提升应用的响应速度。

  4. 渐进式Web应用（PWA） ：PWA可以在用户的设备上缓存数据和应用功能，使其能够在离线或网络不稳定的环境中依然提供良好的用户体验。

  5. 浏览器中的机器学习 ：随着TensorFlow.js等库的发展，开发者能够在前端执行机器学习推理任务，从而在用户设备上实时进行图像识别、语音处理等操作，减少对中央服务器的依赖。

  6. 边缘AI推理：使用边缘设备处理AI模型推理工作，如图像处理、对象识别、图片裁剪、压缩、格式转换等，将复杂计算任务分担到用户设备，减少服务器压力。

  7. A/B 测试和个性化内容: 基于边缘节点的实时渲染，针对不同用户提供个性化内容或执行 A/B 测试，减少后端负载的同时提升用户体验。

  8. 实时数据处理和渲染: 将实时数据的处理和渲染部分转移到边缘节点。例如，在金融应用中，边缘节点可以快速渲染股票价格的变化，减少延迟。

四、边缘计算-纯前端离线图像处理案例

用户上传图片时，浏览器可以在前端（或通过边缘节点）先对图片进行处理（将图片的裁剪、压缩和格式转换任务、图像处理、对象识别），再将处理后的数据上传到服务器，可以减少网络带宽占用，加速处理时间。

这些功能在很多云服务上都有提供，使用方便简单，服务稳定，但缺点就是贵，下面我们简单实现一遍。

方案概述：

  1. 裁剪（Cropping） ：对图片的大小进行调整，提取出感兴趣的部分。
  2. 压缩（Compression） ：减小图片体积，减少上传和存储的空间。
  3. 格式转换（Format Conversion） ：将图片转换为更适合的格式（如从 PNG 转为 JPEG 或 WebP），提高加载效率。
  4. Web Worker：通过 Web Worker 处理这些任务，避免阻塞主线程。
  5. 图像处理（TensorFlow.js）：AI模型处理图像分类。
  6. 离线处理（navigator.onLine）：检查网络状态，监听网络是否恢复，数据同步。
  7. 数据存储（localforage） ：基于IndexedDB，支持离线数据存储。

技术栈：

  • 前端框架：React
  • 图像处理库：canvas + browser-image-compression + WebP 格式转换工具。

实现步骤：

先实现最基本的功能，实现上传图片的裁剪、压缩、格式转换。

1. 创建 Web Worker 文件（imageWorker.js）

js 复制代码 
self.onmessage = async function(event) {
  const { imageData, options } = event.data;

  try {
    // 裁剪图片
    const croppedImage = cropImage(imageData, options.crop);

    // 压缩图片
    const compressedImage = await compressImage(croppedImage, options.compress);

    // 格式转换
    const convertedImage = await convertImageFormat(compressedImage, options.format);

    self.postMessage({ success: true, result: convertedImage });
  } catch (error) {
    self.postMessage({ success: false, error: error.message });
  }
};

// 裁剪图片函数
function cropImage(imageData, cropOptions) {
  const canvas = new OffscreenCanvas(cropOptions.width, cropOptions.height);
  const ctx = canvas.getContext('2d');
  
  // 在 canvas 中裁剪图片
  ctx.drawImage(
    imageData,
    cropOptions.x, cropOptions.y,
    cropOptions.width, cropOptions.height,
    0, 0, cropOptions.width, cropOptions.height
  );
  
  return canvas.transferToImageBitmap();
}

// 压缩图片函数
async function compressImage(imageBitmap, compressOptions) {
  const canvas = new OffscreenCanvas(imageBitmap.width, imageBitmap.height);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(imageBitmap, 0, 0);

  const blob = await canvas.convertToBlob({
    type: compressOptions.type || 'image/jpeg',
    quality: compressOptions.quality || 0.7
  });

  return blob;
}

// 格式转换函数
async function convertImageFormat(imageBlob, format) {
  if (format === 'webp') {
    const image = await createImageBitmap(imageBlob);
    const canvas = new OffscreenCanvas(image.width, image.height);
    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0);

    // 转换为 WebP 格式
    const webpBlob = await canvas.convertToBlob({
      type: 'image/webp',
      quality: 0.7
    });
    return webpBlob;
  }
  return imageBlob;
}

2. 前端 Web Worker

在 React 组件中，通过 Web Worker 将图片处理任务发送到后台执行。

tsx 复制代码 
import React, { useState, useEffect } from "react";

const ImageProcessor = () => {
  const [worker, setWorker] = useState(null);
  const [image, setImage] = useState(null);
  const [processedImage, setProcessedImage] = useState(null);

  useEffect(() => {
    // 初始化 Web Worker
    const imgWorker = new Worker(new URL("./imageWorker.js", import.meta.url));
    imgWorker.onmessage = (event) => {
      const { success, result, error } = event.data;
      if (success) {
        setProcessedImage(URL.createObjectURL(result));
      } else {
        console.error("Image processing error:", error);
      }
    };
    setWorker(imgWorker);

    return () => {
      imgWorker.terminate();
    };
  }, []);

  const handleImageUpload = (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.src = e.target.result;
      img.onload = () => {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        const imageData = canvas;

        // 向 Web Worker 发送图片处理任务
        worker.postMessage({
          imageData,
          options: {
            crop: { x: 0, y: 0, width: img.width / 2, height: img.height / 2 },  // 裁剪图片
            compress: { type: "image/jpeg", quality: 0.8 },  // 压缩图片
            format: "webp",  // 转换为 WebP 格式
          },
        });
        setImage(URL.createObjectURL(file));  // 显示原始图片
      };
    };
    reader.readAsDataURL(file);
  };

  return (
    <div>
      <h1>Image Processor</h1>
      <input type="file" accept="image/*" onChange={handleImageUpload} />
      {image && <img src={image} alt="Original" width="300" />}
      {processedImage && (
        <>
          <h2>Processed Image:</h2>
          <img src={processedImage} alt="Processed" width="300" />
        </>
      )}
    </div>
  );
};

export default ImageProcessor;

3. 将处理后的数据同步到服务器

在前端处理完成后，可以通过 fetch API 将处理后的图片上传到服务器。

ts 复制代码 
const uploadToServer = async (blob) => {
  const formData = new FormData();
  formData.append("file", blob, "processed-image.webp");

  try {
    const response = await fetch("https://example.com/upload", {
      method: "POST",
      body: formData,
    });
    if (response.ok) {
      console.log("Image uploaded successfully!");
    }
  } catch (error) {
    console.error("Error uploading image:", error);
  }
};

// 将处理后的图片上传
worker.onmessage = (event) => {
  const { success, result, error } = event.data;
  if (success) {
    uploadToServer(result);  // 将处理后的 Blob 上传到服务器
  } else {
    console.error("Image processing error:", error);
  }
};

4. 离线检测

为了支持 离线检测 和数据同步功能，可以引入以下步骤：

  1. 离线检测 ：通过监听 navigator.onLine 来判断当前网络状态。
  2. 本地存储 ：当网络断开时，使用浏览器的 IndexedDB 或 localStorage 存储处理后的图片数据。
  3. 数据同步：当网络恢复时，自动将离线存储的数据上传到服务器。
4.1. 网络状态监听

使用 navigator.onLine 和事件监听器检测网络状态的变化。

ts 复制代码 
useEffect(() => {
  // 监听在线/离线事件
  const handleOnline = () => {
    syncOfflineData(); // 网络恢复后同步数据
  };

  const handleOffline = () => {
    console.log("当前处于离线模式");
  };

  window.addEventListener("online", handleOnline);
  window.addEventListener("offline", handleOffline);

  return () => {
    window.removeEventListener("online", handleOnline);
    window.removeEventListener("offline", handleOffline);
  };
}, []);
4.2. 存储离线数据（IndexedDB 或 localStorage）

当图片处理完成但处于离线状态时，将图片数据（Blob 格式）存储到 IndexedDB，待网络恢复后同步上传。

这里我们使用 localforage 库（基于 IndexedDB），它对浏览器存储提供了更简单的接口。

安装依赖：

bash 复制代码 
npm install localforage

存储离线数据：

ts 复制代码 
import localforage from "localforage";

// 初始化 localforage
localforage.config({
  name: 'imageProcessor',
  storeName: 'processedImages',
});

// 存储处理后的图像数据
const saveToLocalStorage = async (imageBlob) => {
  const timestamp = new Date().toISOString();
  try {
    await localforage.setItem(timestamp, imageBlob);
    console.log("图像已保存到本地存储");
  } catch (error) {
    console.error("保存图像失败:", error);
  }
};

修改 Web Worker 消息处理逻辑：

ts 复制代码 
worker.onmessage = (event) => {
  const { success, result, error } = event.data;
  if (success) {
    if (navigator.onLine) {
      uploadToServer(result);  // 在线时上传到服务器
    } else {
      saveToLocalStorage(result);  // 离线时保存到本地存储
    }
  } else {
    console.error("Image processing error:", error);
  }
};
4.3. 网络恢复后同步数据

当网络恢复时，读取 localforage 中保存的图片，并将其上传到服务器。

ts 复制代码 
// 当网络恢复时，同步离线存储的数据
const syncOfflineData = async () => {
  try {
    const keys = await localforage.keys();
    for (const key of keys) {
      const imageBlob = await localforage.getItem(key);
      await uploadToServer(imageBlob);  // 上传到服务器
      await localforage.removeItem(key);  // 上传后删除本地存储的记录
    }
    console.log("所有离线数据已同步到服务器");
  } catch (error) {
    console.error("同步离线数据失败:", error);
  }
};
4.4. 上传到服务器函数
ts 复制代码 
const uploadToServer = async (blob) => {
  const formData = new FormData();
  formData.append("file", blob, "processed-image.webp");

  try {
    const response = await fetch("https://example.com/upload", {
      method: "POST",
      body: formData,
    });
    if (response.ok) {
      console.log("图像成功上传到服务器！");
    }
  } catch (error) {
    console.error("图像上传失败:", error);
  }
};

5. 图像识别和分类

这部分工作一般由后端实现，但也能将它前置，我们可通过已有的模型 + TensorFlow.js + Web Worker，执行 AI 模型推理，从而实现图像分类。

5.1. 创建 Web Worker 文件（aiWorker.js）

相关模型文件最好下载放到CDN上

js 复制代码 
self.importScripts('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs');

let model;

self.onmessage = async function(event) {
  const { imageData } = event.data;

  // 加载 MobileNet 模型
  // 更好的方式是下载在本地
  if (!model) {
    model = await tf.loadLayersModel('https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json');
  }

  // 处理图像数据
  const tensor = tf.browser.fromPixels(imageData)
    .resizeNearestNeighbor([224, 224])  // MobileNet 模型需要 224x224 的输入
    .toFloat()
    .expandDims()
    .div(tf.scalar(255));  // 归一化到 [0, 1]

  // 进行推理
  const predictions = await model.predict(tensor).data();

  // 将推理结果发送回主线程
  self.postMessage({ predictions });
};
5.2. 显示预测结果

我们需要将推理结果转换成人类可读的标签。MobileNet 模型输出的是每个类别的概率值，我们可以使用预定义的标签集来映射这些值。

类别标签集文件 （imagenet_classes.js）：这个文件可以存储 ImageNet 数据集的标签。

js 复制代码 
// 从后端读取标签数据，格式如下
export const IMAGENET_CLASSES = {
  0: "tench, Tinca tinca",
  1: "goldfish, Carassius auratus",
  2: "great white shark, white shark, man-eater, man-eating shark, Carcharodon carcharias",
  // 继续添加其他类别标签...
  999: "toilet tissue, toilet paper, bathroom tissue"
};
5.3. 在前端展示预测结果

在 ImageClassifier.js 中，我们可以用 ImageNet 的标签集来解析 MobileNet 输出的类别。

tsx 复制代码 
import React, { useState, useEffect } from "react";
import { IMAGENET_CLASSES } from "./imagenet_classes";  // 引入类别标签集

const ImageClassifier = () => {
  const [worker, setWorker] = useState(null);
  const [predictions, setPredictions] = useState(null);
  const [image, setImage] = useState(null);
  const [isOffline, setIsOffline] = useState(!navigator.onLine);

  useEffect(() => {
    // 创建Web Worker
    const aiWorker = new Worker(new URL("./aiWorker.js", import.meta.url));
    aiWorker.onmessage = (event) => {
      const { predictions } = event.data;
      const top5Predictions = Array.from(predictions)
        .map((p, i) => ({ probability: p, className: IMAGENET_CLASSES[i] }))
        .sort((a, b) => b.probability - a.probability)
        .slice(0, 5);  // 获取概率最大的前5个结果
      setPredictions(top5Predictions);

      if (isOffline) {
        savePredictionOffline(top5Predictions);
      } else {
        syncPrediction(top5Predictions);
      }
    };
    setWorker(aiWorker);

    ...

    return () => {
      aiWorker.terminate();
      ...
    };
  }, [isOffline]);

  const handleOnline = () => {
    setIsOffline(false);
    syncOfflineData();  // 网络恢复后同步数据
  };

  const handleOffline = () => {
    setIsOffline(true);
  };

  const handleImageUpload = (event) => {
    ...
    img.onload = () => {
        ...

        // 将图片发送给 Web Worker 进行推理
        worker.postMessage({ imageData });
        ...
    };
    ...
  };

  return (
    <div>
      <h1>AI Image Classifier</h1>
      <input type="file" accept="image/*" onChange={handleImageUpload} />
      {image && <img src={image} alt="Uploaded" width="300" />}
      {predictions && (
        <ul>
          {predictions.map((prediction, index) => (
            <li key={index}>
              {prediction.className}: {(prediction.probability * 100).toFixed(2)}%
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default ImageClassifier;

通过使用 Web Worker 和 TensorFlow.js 加载 MobileNet 模型，我们可以在前端实现一个图像分类应用。即使在离线状态下，应用也能够正常处理图像推理任务，并在网络恢复时同步推理结果。

上面就是简单的案例实现，TensorFlow.js可以完成某些简单的工作，虽然减轻了服务端的压力，但缺点也比较明显，只能实现简单的计算工作，至于更复杂的操作，需要利用服务中心强大的计算能力。

相关推荐
坠金4 分钟前
神经网络的常用layer
人工智能·深度学习·神经网络
jun77889520 分钟前
NLP自然语言处理中的Attention机制原理揭秘
人工智能·自然语言处理
长命百岁️21 分钟前
【想法】NLP的基石-Word Embedding
人工智能·自然语言处理·embedding
Zilliz Planet23 分钟前
GenAI 生态系统现状：不止大语言模型和向量数据库
数据库·人工智能·语言模型·自然语言处理
余～1853816280024 分钟前
矩阵系统源码搭建，OEM贴牌技术
网络·人工智能·线性代数·算法·矩阵
健忘的派大星1 小时前
什么是RAG，有哪些RAG引擎？看完这一篇你就知道了！！
人工智能·ai·语言模型·langchain·llm·agi·rag
weixin_466202781 小时前
第29周：实现mnist手写数字识别(Tensorflow实战第一周)
人工智能·python·tensorflow
安科瑞武陈燕WX172696036551 小时前
智慧用电监控装置：引领0.4kV安全用电新时代
大数据·人工智能·安全
梓羽玩Python1 小时前
推荐一款基于快手Kolors模型开发的虚拟试衣浏览器插件！妥妥的安排上！
人工智能·python·github
云空2 小时前
《基于 Excel 和 CSV 文件数据的迁移学习应用》
人工智能·excel·迁移学习
热门推荐
01Windows10安装PCL1.14.0及点云配准02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）03【经验分享】Ubuntu22.04安装微信(linux官方版)04前端vue3实现本地及在线文件预览（含pdf/txt/mp3/mp4/docx/xlsx/pptx）05制冷毛细管的计算方法介绍06RAG 实践- Ollama+RagFlow 部署本地知识库07ECharts 地图实战分析：实现一个完整的地图下钻功能08Coze扣子平台完整体验和实践（附国内和国际版对比）09苍穹外卖面试总结10基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测