Edge 浏览器插件开发：图片切割插件
Edge 浏览器插件开发：图片切割插件在图片处理领域，按比例切割图片是一个常见需求。本文将带你开发一个 Edge 浏览器插件，用于将用户上传的图片分割成 4 个部门并自动下载到本地。同时，本文介绍如何利用 cursor 辅助工具来更高效地实现和调试插件功能。
先看效果：
https://i-blog.csdnimg.cn/direct/69eb9488d4684fd8a86ae35505b0dc26.png
https://i-blog.csdnimg.cn/direct/e2b00aed042b441a815c2b38b9ae889a.png
https://i-blog.csdnimg.cn/direct/973f7b4e74fc48a8957f769903b1ae7b.png
点击分割图片后：
https://i-blog.csdnimg.cn/direct/9adac58c8f0f480cad4c0c5125c6b638.png
https://i-blog.csdnimg.cn/direct/e7e2ac5fe4264514b25794a722961404.png
功能概述
插件的主要功能包括：
[*]用户上传并预览图片。
[*]将图片平均分割成 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;
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;
}
});
});
运行与测试
1. 加载插件
在 Edge 浏览器中，访问 edge://extensions/，启用“开发者模式”，选择“加载已解压的扩展程序”并选择项目文件夹。
2. 测试流程
[*]上传一张图片，确认图片是否成功显示在预览地区。
[*]点击“分割图片”按钮，观察插件是否顺利完成图片分割和下载。
3. cursor 调试优势
[*]进度及时更新：cursor 资助我们及时跟踪每一步的状态，如“图片加载中”、“开始分割图片”等，让用户直观地相识操作进度。
[*]错误捕捉与提示：利用 cursor 定位和反馈错误信息，确保用户在出现非常时能够清楚知道缘故原由。
总结与扩展思绪
通过本插件，我们相识了图片分割处理的基本流程，以及如何借助 cursor 工具在插件开发中高效管理流程。插件在 Edge 和 Chrome 浏览器上均可运行，并支持进一步扩展，例如添加用户自界说切割比例、支持差异的文件格式和 UI 优化。
借助 cursor，你可以让插件的事件流更可控、流程更顺畅。这为进一步优化插件功能和用户体验提供了良好的基础。如果你有其他想法或改进建议，欢迎一起讨论！
参考网址：https://mp.weixin.qq.com/s/KZt5-3OxCtlwuTKhplzGCg
完备代码网址：https://github.com/yyq2024/split_image
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]