Edge 浏览器插件开发：图片切割插件

news2024/11/7 7:52:47

Edge 浏览器插件开发：图片切割插件

在图片处理领域，按比例切割图片是一个常见需求。本文将带你开发一个 Edge 浏览器插件，用于将用户上传的图片分割成 4 个部分并自动下载到本地。同时，本文介绍如何使用 cursor 辅助工具来更高效地实现和调试插件功能。

先看效果：
在这里插入图片描述

点击分割图片后：

功能概述

插件的主要功能包括：

用户上传并预览图片。
将图片平均分割成 4 份。
自动下载分割的图片到本地默认文件夹。

通过 cursor 辅助工具，我们可以高效地管理代码中的事件和操作流，确保插件在多个步骤中流畅运行，并能够在图片加载、分割和下载的每个关键步骤中实时监控进程状态。

使用 cursor 辅助工具

在插件开发中，cursor 工具可以帮助我们实现多步事件的顺序执行和状态管理。下面的代码将展示如何在 popup.js 中利用 cursor 来管理图片处理流程。

开发步骤

1. 创建项目结构

在项目目录下创建以下文件：

manifest.json：插件的配置文件。
popup.html：插件的用户界面。
popup.js：实现插件的核心逻辑和 cursor 功能。
icons 目录：存储插件的图标文件（如 icon16.png、icon48.png 等）。

2. 配置 `manifest.json`

manifest.json 是插件的核心配置文件，声明了插件的基础信息和权限。该插件需要 downloads 权限来下载图片到本地。代码如下：

{
  "manifest_version": 3,
  "name": "图片分割工具",
  "version": "1.0",
  "description": "将图片平均分割成4份并下载",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "permissions": ["downloads"]
}

3. 设计用户界面 `popup.html`

在 popup.html 中设计用户界面，包括文件选择器、图片预览、分割按钮和状态显示区域：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body { width: 300px; padding: 10px; font-family: Arial, sans-serif; }
    #preview { max-width: 100%; margin: 10px 0; border: 1px solid #ccc; }
    .button { width: 100%; padding: 8px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; }
    .button:disabled { background-color: #cccccc; }
    #status { margin-top: 10px; color: #333; background-color: #f0f0f0; border-radius: 4px; padding: 5px; }
  </style>
</head>
<body>
  <input type="file" id="imageInput" accept="image/*">
  <img id="preview" style="display: none;">
  <button id="splitButton" class="button" disabled>分割图片</button>
  <div id="status">请选择一张图片</div>
  <script src="popup.js"></script>
</body>
</html>

4. 实现核心逻辑 `popup.js`

popup.js 中使用 cursor 工具来管理图片处理步骤，包括加载、分割、和自动下载。

// 使用 cursor 工具在多步流程中跟踪状态和事件
import cursor from 'cursor';

document.addEventListener('DOMContentLoaded', function() {
  const imageInput = document.getElementById('imageInput');
  const preview = document.getElementById('preview');
  const splitButton = document.getElementById('splitButton');
  const status = document.getElementById('status');
  let originalImage = null;
  let originalFileName = '';

  const showStatus = cursor.create({
    defaultStatus: '请选择一张图片',
    updateStatus: function(message) {
      status.textContent = message;
      console.log(message);
    }
  });

  imageInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
      originalFileName = file.name.replace(/\.[^/.]+$/, '');
      showStatus.updateStatus('正在加载图片...');
      
      const reader = new FileReader();
      reader.onload = function(event) {
        preview.src = event.target.result;
        preview.style.display = 'block';
        originalImage = new Image();
        originalImage.src = event.target.result;
        originalImage.onload = function() {
          splitButton.disabled = false;
          showStatus.updateStatus(`图片已加载，尺寸: ${originalImage.width}x${originalImage.height}`);
        };
      };
      reader.readAsDataURL(file);
    }
  });

  splitButton.addEventListener('click', async function() {
    try {
      if (!originalImage) {
        showStatus.updateStatus('请先选择图片');
        return;
      }

      splitButton.disabled = true;
      showStatus.updateStatus('开始分割图片...');

      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const partWidth = Math.floor(originalImage.width / 2);
      const partHeight = Math.floor(originalImage.height / 2);
      
      canvas.width = partWidth;
      canvas.height = partHeight;

      for (let row = 0; row < 2; row++) {
        for (let col = 0; col < 2; col++) {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(
            originalImage,
            col * partWidth, row * partHeight,
            partWidth, partHeight,
            0, 0,
            partWidth, partHeight
          );

          const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
          const url = URL.createObjectURL(blob);
          
          try {
            await chrome.downloads.download({
              url: url,
              filename: `${originalFileName}_split_${row+1}x${col+1}.png`,
              saveAs: false
            });
            showStatus.updateStatus(`已完成 ${row * 2 + col + 1}/4 张图片`);
          } catch (error) {
            console.error('下载失败:', error);
            showStatus.updateStatus(`下载失败: ${error.message}`);
          } finally {
            URL.revokeObjectURL(url);
          }
        }
      }

      showStatus.updateStatus('所有图片分割完成！');
    } catch (error) {
      console.error('处理过程出错:', error);
      showStatus.updateStatus(`处理出错: ${error.message}`);
    } finally {
      splitButton.disabled = false;
    }
  });
});