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

基于ueditor编辑器的功能开发之给编辑器图片增加水印功能

news 来源：原创 2025/9/18 13:49:48

用户需求，双击编辑器中的图片的时候，出现弹框，用户可以选择水印缩放倍数、距离以及水印所放置的方位（当然有很多水印插件，位置大小透明度用户都能够自定义，但是用户需求如此，就自己写了）

编辑器内部已经实现了一个方法，点击图片的时候，图片四周会出现8个点点，用于拖动图片大小，找到百度编辑器注册的事件，这个事件构建了图片点击时候，8个点的html结构以及给点位注册了各种事件，点击图片之后页面会出现他们构建的dom结构，我们在此基础上去修改源码

然后再init方法中，对图片蒙版点击双击事件，打开vue的图片编辑弹框，代码如下

弹框打开，我们利用canvas绘制图片和图片水印功能，广播通信中已经将流媒体地址拿到，直接绘制需要添加水印的图片

    imgtocanvas(src){// 创建一个图片const img1 = document.createElement('img')img1.src =  srcthis.bgcsrc = srcconst canvas = document.getElementById('mergedCanvas');// 首先清空画布const ctx = canvas.getContext('2d');img1.onload = (e)=>{console.log(e,img1.naturalWidth,img1.naturalHeight,img1,'当前图片元素的信息')this.canvasWidth = img1.naturalWidththis.canvasHeight = img1.naturalHeightcanvas.width = this.canvasWidthcanvas.height =  this.canvasHeightctx.drawImage(img1, 0, 0);}},

绘制后，点击方位键绘制水印小图片

    handelDreation(item){// // 获取canvas画布this.currentDreation = itemconst canvas = document.getElementById('mergedCanvas');let canvasWidth = canvas.getAttribute('width') * 1let canvasHeigth = canvas.getAttribute('height') * 1const ctx = canvas.getContext('2d');const img1 = document.getElementById('img1');ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);// 重新绘制一下背景图ctx.drawImage(img1, 0, 0);let img2 = document.querySelector('.active-img') //需要绘制的水印图片console.log(img2.naturalWidth,img2.naturalHeight,canvasWidth,canvasHeigth,'图片原始尺寸')let dx = 0 //绘制横坐标let dy = 0 //绘制y坐标let dw = img2.naturalWidth / this.ruleForm.imgscale //绘制图像宽度let dh = img2.naturalHeight / this.ruleForm.imgscale  //绘制图像宽度// 每次都重新绘制一张画布switch(item.className){case 'icon-left_top': //左上dx = this.ruleForm.distinctdy = this.ruleForm.distinctctx.drawImage(img2, dx, dy,dw,dh);// wrapCanvas.drawImage(0,0,50,50);break;case 'icon-top': //上dx = canvasWidth / 2 - dw / 2dy = this.ruleForm.distinctctx.drawImage(img2, dx, dy,dw,dh);break;case 'icon-fangwei': //右上dx = canvasWidth - dw - this.ruleForm.distinctdy = this.ruleForm.distinctctx.drawImage(img2, dx, dy,dw,dh);break;case 'icon-left1': //左dx = this.ruleForm.distinctdy = canvasHeigth / 2 - dh / 2ctx.drawImage(img2, dx, dy,dw,dh);break;case 'icon-fangwei-01': //居中dx = canvasWidth / 2 - dw / 2dy = canvasHeigth / 2 - dh / 2ctx.drawImage(img2, dx, dy,dw,dh);break;case 'icon-left': //右dx = canvasWidth - dw - this.ruleForm.distinctdy = canvasHeigth / 2 - dh / 2ctx.drawImage(img2, dx, dy,dw,dh);break;case 'icon-left-bottom': //左下dx = this.ruleForm.distinctdy = canvasHeigth  - this.ruleForm.distinct - dhctx.drawImage(img2, dx, dy,dw,dh);break;case 'icon-bottom': //下dx = canvasWidth / 2 - dw / 2dy = canvasHeigth  - this.ruleForm.distinct - dhctx.drawImage(img2, dx, dy,dw,dh);break;case 'icon-right_bottom': //右下dx = canvasWidth - dw - this.ruleForm.distinctdy = canvasHeigth  - this.ruleForm.distinct - dhctx.drawImage(img2, dx, dy,dw,dh);break;}},

基于ueditor编辑器的功能开发之给编辑器图片增加水印功能

用户需求，双击编辑器中的图片的时候，出现弹框，用户可以选择水印缩放倍数、距离以及水印所放置的方位（当然有很多水印插件，位置大小透明度用户都能够自定义，但是用户需求如此，就自己写了&#xf…...

编程日记 2025/9/18 13:49:48

DDR中的DLL

在DDR4内存系统中，DLL（Delay Locked Loop，延迟锁相环）是一个非常重要的组件，用于确保数据信号（DQS）和时钟信号（CK）之间的同步。以下是DLL的作用以及DLL on和DLL off的影响…...

编程日记 2025/9/19 0:30:35

Python学习之jieba

Python学习之jieba jieba是优秀的中文分词第三方库,由于中文文本之间每个汉字都是连续书写的,我们需要通过特定的手段来获得其中的每个词组,这种手段叫做分词,我们可以通过jieba库来完成这个过程。jieba库的分词原理:利用一个中文词库,确定汉字之间的关联频率,汉字向概率大的组…...

编程日记 2025/9/19 0:26:47

快速幂fast_pow

快速幂算法讲解快速幂算法是一种高效计算幂运算的算法，其核心思想是利用指数的二进制分解，把幂运算的时间复杂度从 O(p) 降低到 O(logp)。原理假设要计算 an，将 n 表示成二进制形式：n2k12k2⋯2km，那么 ana…...

编程日记 2025/9/19 0:30:36

Go并发背后的双引擎：CSP通信模型与GMP调度｜Go语言进阶（4）

为什么需要理解CSP与GMP？ 当我们启动一个Go程序时，可能会创建成千上万个goroutine，它们是如何被调度到有限的CPU核心上的？为什么Go能够如此轻松地处理高并发场景？为什么有时候我们的并发程序会出现奇怪的性能瓶颈&…...

编程日记 2025/9/19 0:28:16

42、JavaEE高级主题：WebSocket详解

WebSocket 一、WebSocket协议与实现 WebSocket是一种基于TCP协议的全双工通信协议，能够在客户端和服务器之间建立实时、双向的通信通道。通过WebSocket，客户端和服务器可以在任何时候发送数据，并立即接收到对方的响应。 1.1 WebSocket协议…...

编程日记 2025/9/15 23:57:53

UGUI源代码之Text—实现自定义的字间距属性

以下内容是根据Unity 2020.1.01f版本进行编写的 UGUI源代码之Text—实现自定义的字间距属性 1、目的2、参考3、代码阅读4、准备修改UGUI源代码5、实现自定义Text组件，增加字间距属性6、最终效果 1、目的很多时候，美术在设计的时候是想要使用文本的字间…...

编程日记 2025/9/18 15:54:22

【AI】MCP概念

一文讲透 MCP（附 Apifox MCP Server 内测邀请） 7分钟讲清楚MCP是什么？统一Function calling规范，工作量锐减至1/6，人人手搓Manus！？ | 一键链接千台服务器，几行代码接入海量外部工具…...

编程日记 2025/9/18 13:26:45

HarmonyOS：使用geoLocationManager (位置服务)获取位置信息

一、简介位置服务提供GNSS定位、网络定位（蜂窝基站、WLAN、蓝牙定位技术）、地理编码、逆地理编码、国家码和地理围栏等基本功能。使用位置服务时请打开设备“位置”开关。如果“位置”开关关闭并且代码未设置捕获异常，可能导致应用异常。 …...

编程日记 2025/9/13 15:26:37

深入解析原生鸿蒙中的 RN 日志系统：从入门到精通！

全文目录： 开篇语📖 目录🎯 前言：鸿蒙日志系统究竟有多重要？🛠️ 鸿蒙 RN 日志系统的基础结构📜 1. 日志的作用⚙️ 2. 日志分类 🔧 如何在鸿蒙 RN 中使用日志系统🖋️ 1…...

编程日记 2025/9/10 12:42:28

【前端】【Nuxt3】Nuxt3中usefetch,useAsyncData,$fetch使用与区别

一、Nuxt3 中不同数据获取方式的请求行为对比 （一）总结：请求行为一览 useFetch 和 useAsyncData 是 Nuxt 推荐的数据获取 API，自动集成 SSR 与客户端导航流程。$fetch 是更底层的请求方法，不具备自动触发、缓存等集成…...

编程日记 2025/9/7 14:17:21

【Linux系统】Linux基础指令

l i n u x linux linux 命令是对 L i n u x Linux Linux 系统进行管理的命令。对于 L i n u x Linux Linux 系统来说，无论是中央处理器、内存、磁盘驱动器、键盘、鼠标，还是用户等都是文件， L i n u x Linux Linux 系统管理的命令是它正常运…...

编程日记 2025/9/15 16:38:33

Android中Jetpack设计理念、核心组件和实际价值

一、Jetpack 的定义与定位（基础必答） Jetpack 是 Google 推出的 Android 开发组件集合，旨在： 加速开发：提供标准化、开箱即用的组件消除样板代码：解决传统开发中的重复劳动问题兼容性保障：…...

编程日记 2025/9/15 14:27:24

flutter开发音乐APP（前提准备）

1、项目的一些环境： 2、接口文档： 酷狗音乐 NodeJS 版 API 3、接口数据结构化 Instantly parse JSON in any language | quicktype UI样式借鉴参考： Coffee-Expert/Apple-Music-New-UI: Apple Music Clone on Flutter, with redesigned UI…...

编程日记 2025/9/10 3:30:00

网络协议学习

最近在适配ESP32的网络驱动，借此机会先学习一下网络通信协议。以太网帧、IP包及TCP与UDP的报文格式提问腾讯元宝提示词： TCP窗口是干什么的拥塞窗口是什么的...

编程日记 2025/9/10 4:17:25

示波器直流耦合与交流耦合：何时使用哪种？

直流耦合和交流耦合的基本区别应该在于它们如何处理信号的直流分量和交流分量。直流分量是指信号中的固定电压部分，而交流分量则是信号中变化的电压部分。例如，一个5V的直流电压叠加了一个1V的正弦波交流信号，整个信号会在4V到6V之间波动。如…...

编程日记 2025/9/18 21:51:19

js解除禁止复制、禁止鼠标右键效果

有的网页会禁止复制，甚至禁止鼠标右键，如何解决按F12进入检查模式，在控制台输入下面的js代码 1.解除禁止复制 document.addEventListener(copy,function(event){event.stopImmediatePropagation();},true); 2.解除禁止鼠标右键 document…...

编程日记 2025/9/16 4:53:48

如何把未量化的 70B 大模型加载到笔记本电脑上运行？

并行运行 70B 大模型我们已经看到，量化已经成为在低端 GPU（比如 Colab、Kaggle 等）上加载大型语言模型（LLMs）的最常见方法了，但这会降低准确性并增加幻觉现象。那如果你和你的朋友们把一个大型语言模型分…...

编程日记 2025/9/16 14:04:54

xwiki的权限-页面特殊设置＞用户权限＞组权限

官方文档https://www.xwiki.org/xwiki/bin/view/Documentation/AdminGuide/Access%20Rights/ 他有组权限、用户权限、页面及子页面特别设置。页面特殊设置 > 用户权限 > 组权限 XWiki提供了设置wiki范围内权限、细粒度页面级权限的能力，以及在需要更多控制的…...

编程日记 2025/9/18 17:13:22

Go语言比较递归和循环执行效率

一、概念 1.递归递归是指一个函数在其定义中直接或间接调用自身的编程方法。简单来说，就是函数自己调用自己。递归主要用于将复杂的问题分解为较小的、相同类型的子问题，通过不断缩小问题的规模，直到遇到一个最简单、最基础的情况&#x…...

编程日记 2025/9/16 21:49:34

Windows 图形显示驱动开发-WDDM 2.0功能_供应和回收更改

供应和回收更改对于 Windows 显示驱动程序模型 (WDDM) v2，有关套餐和回收的要求正在放宽。用户模式驱动程序不再需要在内部分配上使用套餐和回收。空闲/挂起的应用程序将使用 Microsoft DirectX 11.1 中引入的 TrimAPI 删除驱动程序内部资源。 API 级别将继…...

编程日记 2025/9/11 7:06:32

MongoDB 新手笔记

MongoDB 新手笔记 1. MongoDB 1.1 概述 MongoDB 是一种文档型数据库（NoSQL），数据以类似 JSON 的 BSON 格式存储，适合处理非结构化或半结构化数据。对比 MySQL： MySQL 是关系型数据库，数据以表格形式存…...

编程日记 2025/9/11 9:50:47

基本方法 print(model) print(type(model))# 模型参数 numEl_list [p.numel() for p in model.parameters()] total_params_mb sum(numEl_list) / 1e6print(fTotal parameters: {total_params_mb:.2f} MB) # sum(numEl_list), numEl_list print(sum(numEl_list)) print(numE…...

编程日记 2025/9/12 9:41:37

Pytorch Dataset问题解决：数据集读取报错DatasetGenerationError或OSError

问题描述在huggingface上下载很大的数据集，用多个parquet文件的格式下载到本地。使用load_dataset加载的时候，进度条加载到一半会报错DatasetGenerationError: An error occurred while generating the dataset；如果加载为IterableDataset&…...

编程日记 2025/9/10 11:21:09

学习OpenCV C++版

OpenCV C 1 数据载入、显示与保存1.1 概念1.2 Mat 类构造与赋值1.3 Mat 类的赋值1.4 Mat 类支持的运算1.5 图像的读取与显示1.6 视频加载与摄像头调用1.7 数据保存参考：《OpenCV4快速入门》作者冯振郭延宁吕跃勇 1 数据载入、显示与保存 1.1 概念 Mat 类 : Ma…...

编程日记 2025/9/11 2:21:04

特权FPGA之PS/2键盘解码

0 故事背景见过这种接口的朋友们，大概都已经成家立业了吧。不过今天我们不讨论这种接口的历史，只讲讲这种接口的设计。（如果还没有成家的朋友也别生气，做自己想做的事情就对了！） 1 时序分析数据帧格式如图…...

编程日记 2025/9/9 16:09:07

SpringBoot 接口限流Lua脚本接合Redis 服务熔断自定义注解接口保护

介绍 Spring Boot 接口限流是防止接口被频繁请求而导致服务器负载过重或服务崩溃的一种策略。通过限流，我们可以控制单位时间内允许的请求次数，确保系统的稳定性。限流可以帮助防止恶意请求、保护系统资源，并优化 API 的可用性，避…...

编程日记 2025/9/18 2:10:02

FPAG_BUFFER学习

在FPGA设计中，缓冲器（Buffer）是信号传输和管理的核心组件，用于处理输入/输出信号、时钟分配以及信号完整性。以下是FPGA中常见缓冲器的详细介绍，分类说明其功能、应用场景和设计注意事项： --- ### **1. 输…...

编程日记 2025/9/12 16:23:13

《认知觉醒》下篇·第六章第一节“清晰：一个观念，重构你的行动力” 总结

《认知觉醒》下篇第六章第一节“清晰：一个观念，重构你的行动力”的核心内容总结： 1. 清晰的力量：行动力的第一性原理定义清晰是对目标、路径和结果的明确认知，是破除拖延与内耗的核心前提。模糊的代价： …...

编程日记 2025/9/15 7:28:31

idea手动创建resources文件夹

有时maven没有构建成功可能造成，resources文件夹不创建的现象此时我们可以手动创建手动创建...

编程日记 2025/9/11 10:11:50

Scala相关知识学习总结6

1、集合计算高级函数说明 - 过滤：遍历集合，提取满足特定条件的元素组成新集合。 - 转化/映射（map）：将集合里的每个元素应用到指定函数进行转换。 - 扁平化：文档未详细阐述其具体含义和操作。 - 扁平化映射&…...

编程日记 2025/9/10 20:54:05

IDEA 调用 Generate 生成 Getter/Setter 快捷键

快捷键不会用？ 快捷键：AltInsert 全选键：CtrlA IDEA 调用 Generate 生成 Getter/Setter 快捷键 - 爱吃西瓜的番茄酱 - 博客园...

编程日记 2025/9/10 22:16:15

【SpringCloud】从入门到精通（下）

网关与路由什么是网关？顾明思议，网关就是网络的关口。数据在网络间传输，从一个网络传输到另一网络时就需要经过网关来做数据的路由和转发以及数据安全的校验。现在前端不能请求各个微服务地址，只能去请求网关网关可以做安全控…...

编程日记 2025/9/10 1:28:18

深入探索 C++23：特性测试与编译器支持

文章目录一、C23 新特性概览（一）语言特性（二）标准库特性二、特性测试程序三、主流编译器支持情况（一）GCC（二）Clang（三）MSVC 四、开发者建议（一&…...

编程日记 2025/9/15 10:35:26

Electron 应用太重？试试 PakePlus 轻装上阵

Electron 作为将 Web 技术带入桌面应用领域的先驱框架，让无数开发者能够使用熟悉的 HTML、CSS 和 JavaScript 构建跨平台应用。然而，随着应用规模的扩大，Electron 应用的性能问题逐渐显现——内存占用高、启动速度慢、安装包体积庞大&#xf…...

编程日记 2025/9/17 17:29:08

驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接

驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接原因描述项目中有使用到 SQL Server 数据库, 在启动项目时, 出现报错信息: 【驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接。错误:“The server selected protocol version…...

编程日记 2025/9/16 10:32:28

Java 设计模式：原型模式详解

Java 设计模式：原型模式详解原型模式（Prototype Pattern）是一种创建型设计模式，它通过复制现有对象来创建新对象，而无需依赖其具体类。这种模式特别适合创建复杂对象或需要频繁创建相似对象的场景。本文将详细介绍原…...

编程日记 2025/9/15 1:38:49

NLP高频面试题（三十七）——大模型训练和推理的显存估计

在训练和推理大型语言模型时，显存（GPU 内存）的需求是一个关键考虑因素。准确估计这些需求有助于选择合适的硬件配置，确保模型高效运行。推理阶段的显存需求在推理过程中，显存主要用于存储模型权重和中间激活值。模型权重的显存需求可以通过以下公式估算： 模型权重…...

编程日记 2025/9/13 3:56:27

PHP 阿里云oss 使用指南

1.介绍把图片放到阿里云上的空间上，可以使用cdn加速。可以在程序里直接调用要使用阿里云 oss sdk ，请先到阿里云下载或用 copmposer 安装相关链接： 安装OSS PHP SDK_对象存储(OSS)-阿里云帮助中心 composer require aliyuncs/oss…...

编程日记 2025/9/16 13:12:14

leetcode_面试题 02.07. 链表相交_java

面试题 02.07. 链表相交https://leetcode.cn/problems/intersection-of-two-linked-lists-lcci/ 1、题目给你两个单链表的头节点 headA 和 headB ，请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点，返回 null 。图示两个链表在节点 c…...

编程日记 2025/9/17 10:50:00

LeetCode 3375.使数组的值全部为 K 的最少操作次数：O(1)空间——排序+一次遍历

【LetMeFly】3375.使数组的值全部为 K 的最少操作次数：O(1)空间——排序一次遍历力扣题目链接：https://leetcode.cn/problems/minimum-operations-to-make-array-values-equal-to-k/ 给你一个整数数组 nums 和一个整数 k 。如果一个数组中所有严格…...

编程日记 2025/9/18 14:22:32

紫光展锐5G SoC T8300：影像升级，「定格」美好世界

影像能力已成为当今衡量智能手机性能的重要标尺之一。随着消费者对手机摄影需求日益提升，手机厂商纷纷在影像硬件和算法上展开激烈竞争，力求为用户带来更加出色的拍摄体验。紫光展锐专为全球主流用户打造的畅享影音和游戏体验的5G SoC——T8300&#x…...

编程日记 2025/9/9 6:07:52

java基础关键字static

static static使用简介static结合类的生命周期1.加载2.链接(1) 验证（Verification）(2) 准备（Preparation）(3) 解析（Resolution） 3. 初始化4.使用5.卸载总结 staic作用总结静态变量静态代码块静态方法静态内…...

编程日记 2025/9/11 8:56:55

大数据学习（105）-大数据组件分析

🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言📝支持一…...

编程日记 2025/9/18 19:37:34

Spark运行

一文读懂Spark：从核心概念到实战编程在大数据处理领域，Spark凭借其高效的计算能力和灵活的架构脱颖而出。今天，就来和大家深入聊聊Spark，帮助初学者快速入门。Spark采用经典的master - slave结构。Driver如同master，…...

编程日记 2025/9/15 23:01:22

在macOS的docker中如何安装及运行ROS2

1、macOS环境及版本 2、docker for macos版本 3、拉取ROS2镜像 docker pull ros:iron 4、查看容器 docker images 5、启动 ROS2 容器 docker run -it --rm ros:iron -it ：以交互模式运行容器。 --rm ：退出时自动删除容器（测试时推荐&am…...

编程日记 2025/9/16 14:48:15

FFmpeg安装和使用

1. 安装与环境配置 Windows # 方法1：官网下载预编译二进制包 https://ffmpeg.org/download.html#build-windows 解压后添加bin目录到系统PATH# 方法2：通过Chocolatey安装 choco install ffmpegmacOS # 使用Homebrew安装 brew install ffmpegLinux # …...

编程日记 2025/9/10 5:21:53

基于多模态大模型的ATM全周期诊疗技术方案

基于多模态大模型的ATM全周期诊疗技术方案 1. 数据预处理模块算法1：多模态数据融合伪代码 def multimodal_fusion(data_dict):# 输入：包含MRI、EEG、实验室指标的字典# 输出：对齐后的张量序列# 模态对齐aligned_data = temporal_alignment(data_dict,sampling_rate...

编程日记 2025/9/16 13:36:18

写时复制Copy-on-Write（COW）

简单理解写时复制读的时候，直接访问原对象。写的时候，对复制原对象，对副本进行写操作，最后将副本替换原对象。写时复制多用于读多写少的场景，因为写操作是用悲观锁进行的，如果写的场景多，…...

编程日记 2025/9/11 8:48:21

S7-1200 PLC热电偶和热电阻模拟量模块

热电偶和热电阻模拟量模块 S7-1200 PLC有专用用于对温度进行采集的热电偶模块SM1231 TC和SM 1231RTD。热电偶模块有4AI和8AI两种，下面以SM1231 TC 4AI为例看一下接线图。该模块一共有4个通道，每个通道有两个接线端子，比如0，0-。…...

编程日记 2025/9/11 12:40:42

相关文章：