当前位置: 首页 > news >正文

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

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

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

先看效果:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
点击分割图片后:
在这里插入图片描述
在这里插入图片描述

功能概述

插件的主要功能包括:

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

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


使用 cursor 辅助工具

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


开发步骤

1. 创建项目结构

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

  • manifest.json:插件的配置文件。
  • popup.html:插件的用户界面。
  • popup.js:实现插件的核心逻辑和 cursor 功能。
  • icons 目录:存储插件的图标文件(如 icon16.pngicon48.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;}});
});

运行与测试

1. 加载插件

在 Edge 浏览器中,访问 edge://extensions/,启用“开发者模式”,选择“加载已解压的扩展程序”并选择项目文件夹。

2. 测试流程
  1. 上传一张图片,确认图片是否成功显示在预览区域。
  2. 点击“分割图片”按钮,观察插件是否顺利完成图片分割和下载。
3. cursor 调试优势
  • 进度实时更新cursor 帮助我们实时跟踪每一步的状态,如“图片加载中”、“开始分割图片”等,让用户直观地了解操作进度。
  • 错误捕捉与提示:利用 cursor 定位和反馈错误信息,确保用户在出现异常时能够清楚知道原因。

总结与扩展思路

通过本插件,我们了解了图片分割处理的基本流程,以及如何借助 cursor 工具在插件开发中高效管理流程。插件在 Edge 和 Chrome 浏览器上均可运行,并支持进一步扩展,例如添加用户自定义切割比例、支持不同的文件格式和 UI 优化。

借助 cursor,你可以让插件的事件流更可控、流程更顺畅。这为进一步优化插件功能和用户体验提供了良好的基础。如果你有其他想法或改进建议,欢迎一起讨论!


参考网址:https://mp.weixin.qq.com/s/KZt5-3OxCtlwuTKhplzGCg
完整代码网址:https://github.com/yyq2024/split_image

相关文章:

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

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

银河麒麟v10 xrdp安装

为了解决科技被卡脖子的问题&#xff0c;国家正在大力推进软硬件系统的信创替代&#xff0c;对于一些平时对Linux操作系统不太熟练的用户来讲提出了更高的挑战和要求。本文以银河麒麟v10 24.03为例带领大家配置kylin v10的远程桌面。 最近公司为了配置信创开发新购了几台银河麒…...

Leetcode 删除有序数组中的重复项 Ⅱ

使用双指针来解决此问题&#xff0c;关键词“有序”数组&#xff0c;一个 index 指针用于构建新数组&#xff0c;一个 i 指针用于遍历整个数组 以下是代码的中文解释以及算法思想&#xff1a; 算法思想 这道题要求对一个有序数组进行去重&#xff0c;使得每个元素最多出现两…...

大模型学习笔记------什么是大模型

大模型学习笔记------什么是大模型 1、大模型定义2、大模型发展历程3、大模型的核心特点4、大模型的应用领域5、大模型面临的挑战6、结束语 近两年大模型超级火&#xff0c;并且相关产品迎来爆发式增长。在工作中&#xff0c;也常常接触到大模型&#xff0c;并且已经开始进行相…...

【unique_str 源码学习】

文章目录 &#xff11;&#xff0e;删除器定义2. operator->() 运算符重载3. add_lvalue_reference<element_type>::type 使用 基本原理这篇博主写的很详细 https://yngzmiao.blog.csdn.net/article/details/105725663 &#xff11;&#xff0e;删除器定义 deleter_…...

flask第一个应用

文章目录 安装一、编程第一步二、引入配置三、代码解析 安装 python环境安装的过程就不重复赘述了&#xff0c;flask安装使用命令pip install Flask即可&#xff0c;使用命令pip show Flask查看flask版本信息 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供…...

华为OD机试真题(Python/JS/C/C++)- 考点 - 细节

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题 点这里。 本专栏收录于《华为OD机试真题&#xff08;Python/JS/C/C&#xff09;》。...

【C++刷题】力扣-#628-三个数的最大乘积

题目描述 给你一个整型数组 nums &#xff0c;在数组中找出由三个数组成的最大乘积&#xff0c;并输出这个乘积。 示例 示例 1 输入&#xff1a;nums [1,2,3] 输出&#xff1a;6示例 2 输入&#xff1a;nums [1,2,3,4] 输出&#xff1a;24示例 3 输入&#xff1a;nums […...

Java项目实战II基于Java+Spring Boot+MySQL的工程教育认证的计算机课程管理平台(源码+数据库+文档)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 随着工程教…...

基于微信小程序实现信阳毛尖茶叶商城系统设计与实现

作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验&#xff0c;被多个学校常年聘为校外企业导师&#xff0c;指导学生毕业设计并参与学生毕业答辩指导&#xff0c;…...

设计一个灵活的RPC架构

RPC架构 RPC本质上就是一个远程调用&#xff0c;需要通过网络来传输数据。传输协议可以有多种选择&#xff0c;但考虑到可靠性&#xff0c;一般默认采用TCP协议。为了屏蔽网络传输的复杂性&#xff0c;需要封装一个单独的数据传输模块用来收发二进制数据&#xff0c;这个单独模…...

大数据计算里的Broadcast Hash Join/Shuffle Hash Join/Sort Merge Join

文章目录 Broadcast Hash Join场景 Shuffle Hash Join场景 Sort Merge Join场景 Broadcast Hash Join 场景 大表和小小表&#xff0c;直接把B表加载到内存&#xff0c;然后读块1内容和内存中数据匹配 Shuffle Hash Join 场景 大表和小表JOIN &#xff0c;小表分块后能加载…...

Java - 手写识别; 如何用spring ai和大模型做手写识别教程

识别后的文字 利用大模型提升Java手写识别&#xff1a;更简单、更高效 在Java场景中&#xff0c;我们经常需要处理手写识别的问题。过去&#xff0c;这类需求主要依赖于OCR技术&#xff0c;但其效果并不总是稳定。随着大模型的发展&#xff0c;使用大模型进行java手写识别成为…...

【Linux】用户权限管理:创建受限用户并配置特定目录访问权限

本文详细介绍了如何在 Linux 系统中创建一个名为 agent 的新用户&#xff0c;并限制其在特定目录下的权限。通过使用 useradd 命令创建用户&#xff0c;并使用 usermod 命令将新用户添加到现有用户组中&#xff0c;确保其具有适当的权限。接着&#xff0c;通过 chown 和 chmod …...

pgsql表分区和表分片设计

在设计 PostgreSQL 表分区和表分片时&#xff0c;主要目标是提高查询性能、可扩展性和数据管理的效率。以下是一些关键的设计步骤和策略&#xff1a; 1. 分区策略 水平分片&#xff1a;选择按日期进行水平分片&#xff0c;每天一个分片。这种策略适用于具有时间序列数据的场景…...

灵动AI ——视频创作新引擎 开启视觉奇幻之旅

灵动AI视频官网地址&#xff1a;https://aigc.genceai.com/ 灵动AI 科技与艺术的完美融合之作。它代表着当下最前沿的影像技术&#xff0c;为我们带来前所未有的视觉盛宴。...

AI设计、作图、画画工具哪个好用?看完这篇你就知道怎么选了

Stable Diffusion Stable Diffusion 是由 Stability AI 推出的开源 AI 文本到图像生成模型&#xff0c;以其开放性和灵活性在 AI 视觉工具领域广受欢迎。与 DALL-E 或 Midjourney 等只能依赖云计算的工具不同&#xff0c;Stable Diffusion 支持本地运行&#xff0c;也广泛兼容多…...

【python ASR】win11-从0到1使用funasr实现本地离线音频转文本

文章目录 前言一、前提条件安装环境Python 安装安装依赖,使用工业预训练模型最后安装 - torch1. 安装前查看显卡支持的最高CUDA的版本&#xff0c;以便下载torch 对应的版本的安装包。torch 中的CUDA版本要低于显卡最高的CUDA版本。2. 前往网站下载[Pytorch](https://pytorch.o…...

myqld二进制安装和破解数据库密码(linux)

安装和基本配置 1.首先把下载下来的mysql安装包放到本地这里下载的是5.7版本为演示 1&#xff09;解压 tar xf mysql-5.7.20-linux-glibc2.12-x86_64.tar.gz -C /usr/local -把安装包解压到/usr/local cd /usr/local …...

防重方案-订单防重方案笔记

订单防重设计 订单重复提交概念解决方案前端防重机制后端防重机制利用Token机制基于数据库的唯一索引 Token机制方案介绍 其他 订单重复提交概念 重复提交指&#xff0c;连点按钮进行重复提交操作&#xff0c;不包括刷新后的重新下单&#xff0c;重新下单已非同一订单的概念。…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...