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

vue pc端项目el-upload上传图片时加水印

html代码:

<a-uploadclass="avatar-uploader"list-type="picture-card":file-list="uploadFileList":custom-request="uploadDoneHandle":before-upload="beforeUpload":remove="removeHandle"v-decorator="['path', { rules: formValidateRules.path }]"@preview="previewHandle"@change="uploadChangeHandle"
><div v-if="uploadFileList.length < 1"><a-icon :type="uploadLoading ? 'loading' : 'plus'" /></div>
</a-upload>

画布这时就需要在beforeUploadHandle这个方法中去生成水印,然后通过后端上传接口,把图片传给后端,然后再接收后端返回的数据
下面是beforeUploadHandle方法

 beforeUpload (file) {return new Promise(resolve => {const reader = new FileReader()reader.readAsDataURL(file) // file转base64reader.onload = e => {const canvas = document.createElement('canvas')const img = new Image()img.src = e.target.resultimg.onload = () => {//图片加载后再添加水印,否则可能报错let width = img.widthlet height = img.heightcanvas.width = widthcanvas.height = heightconst ctx = canvas.getContext('2d') // 绘制2d图形ctx.drawImage(img, 0, 0, width, height)var basePx = canvas.width//字体大小  照片添加水印var fontSize = basePx / 20 //水印文字尺寸ctx.shadowColor = 'rgba(0, 0, 0,1)'ctx.shadowOffsetX = 3 //水印文字阴影ctx.shadowOffsetY = 3ctx.shadowBlur = 5ctx.rotate((-20 * Math.PI) / 180) //水印文字倾斜ctx.font = fontSize + 'px 微软雅黑'ctx.fillStyle = 'rgba(255,255,255,0.6)' //水印透明度var watermark =sessionStorage.getItem('id') +'|' +sessionStorage.getItem('name') +'|' +sessionStorage.getItem('orgName') //水印文字内容var watermarkSplit = watermark.split('|')let w = 1 //横向绘制次数let h = 4 //纵向绘制次数'//水印的总绘制次数let num = Math.round(w * h)for (let i = 0; i < num; i++) {if (i < w) {ctx.fillText(watermarkSplit[0],(width / 3) * i,height / 2 - 2.7 * fontSize)ctx.fillText(watermarkSplit[1],(width / 3) * i,height / 2 - 1.5 * fontSize)ctx.fillText(watermarkSplit[2],(width / 3) * i,height / 2 - 0.5 * fontSize)} else if (i >= w && i < w * 2) {ctx.fillText(watermarkSplit[0],(width / 3) * (i - w),height - 2.7 * fontSize)ctx.fillText(watermarkSplit[1],(width / 3) * (i - w),height - 1.5 * fontSize)ctx.fillText(watermarkSplit[2],(width / 3) * (i - w),height - 0.5 * fontSize)} else if (i >= w * 2 && i < w * 3) {ctx.fillText(watermarkSplit[0],(width / 3) * (i - w * 2),height * 1.5 - 2.7 * fontSize)ctx.fillText(watermarkSplit[1],(width / 3) * (i - w * 2),height * 1.5 - 1.5 * fontSize)ctx.fillText(watermarkSplit[2],(width / 3) * (i - w * 2),height * 1.5 - 0.5 * fontSize)}}var dataBase64 = canvas.toDataURL(file.type) // 输出压缩后的base64// base64转fileconst arr = dataBase64.split(',')const mime = arr[0].match(/:(.*?);/)[1]const bstr = atob(arr[1])let n = bstr.lengthconst u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}const files = new File([new Blob([u8arr], { type: mime })],file.name,{ type: file.type })files.uid = file.uidresolve(files)}}})/* const { result } = fileCheckForImage(file)return result */},

相关文章:

vue pc端项目el-upload上传图片时加水印

html代码&#xff1a; <a-uploadclass"avatar-uploader"list-type"picture-card":file-list"uploadFileList":custom-request"uploadDoneHandle":before-upload"beforeUpload":remove"removeHandle"v-decorat…...

ubuntu中redis+mysql安装使用

pip -V 回车&#xff08;大写V&#xff09;&#xff1a;python包库安装路径 python -m site: python查找路径 1、redis ubuntu安装redis System has not been booted with systemd as init system (PID 1). Cant operate&#xff1b;该问题是systemctl start redis报错&#…...

若依-plus-vue启动显示Redis连接错误

用的Redis是windows版本&#xff0c;6.2.6 报错的主要信息如下&#xff1a; Failed to instantiate [org.redisson.api.RedissonClient]: Factory method redisson threw exception; nested exception is org.redisson.client.RedisConnectionException: Unable to connect t…...

【C++11智能指针】

c智能指针 手动管理内存很容易造成内存泄漏&#xff0c;现代c的智能指针可以在很大程度上帮我们缓解这个问题&#xff0c;降低我们的手动管理内存的心智负担&#xff0c;智能指针有好几种&#xff0c;比如shared_ptr、unique_ptr还有weak_ptr 共享指针shared_ptr 共享指针会…...

如何实现Excel中多级数据联动

摘要&#xff1a;本文由葡萄城技术团队于CSDN原创并首发。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 前言 在类Excel表格应用中&#xff0c;常用的需求场景是根据单元格之间的数据联动&…...

使用Pytest集成Allure生成漂亮的图形测试报告

目录 前言 依赖包安装 Pytest Allure Pytest Adaptor 改造基于Pytest的测试用例 生成测试报告 运行测试 生成测试报告 打开测试报告 资料获取方法 前言 之前写过一篇生成测试报告的博客&#xff0c;但是其实Allure首先是一个可以独立运行的测试报告生成框架&#xff…...

opencv基础49-图像轮廓02-矩特征cv2.moments()->(形状分析、物体检测、图像识别、匹配)

矩特征&#xff08;Moments Features&#xff09;是用于图像分析和模式识别的一种特征表示方法&#xff0c;用来描述图像的形状、几何特征和统计信息。矩特征可以用于识别图像中的对象、检测形状以及进行图像分类等任务。 矩特征通过计算图像像素的高阶矩来提取特征。这些矩可以…...

什么是CSS Grid布局?什么是Flexbox布局?它们两者有什么不同?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ CSS Grid布局⭐ Flexbox布局⭐ 不同之处⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web…...

Centos中pip install mysqlclient失败

pip install mysqlclient 错误详情如下 pip install mysqlclient Looking in indexes: http://mirrors.tencentyun.com/pypi/simple Collecting mysqlclient Using cached http://mirrors.tencentyun.com/pypi/packages/de/9c/b176826e8994551ce826404dab97e305a4bb76c8b0a4e0…...

arcgis更改图层字段名脚本

话不多说&#xff0c;上脚本源码&#xff0c;复制黏贴即可 #-*- coding:utf-8 -*- __author__ lumen import arcpy #输入图层 InputFeature arcpy.GetParameterAsText(0) #原始字段 oldField arcpy.GetParameterAsText(1) # 获取原始字段类型 oldFieldType desc arcpy.…...

Android 13 MTK平台添加自定义按键,以及CTS问题解决

添加自定义按键流程 一般来说上层添加以下几处修改 驱动层的键值上报,让驱动处理好即可 frameworks / base/core/java/android/view/KeyEvent.java public static final int KEYCODE_DEMO_APP_4 = 304;/** add by songhui for fingerprint Key code */+ public static fina…...

深入了解 Postman Test 校验的使用方法

Postman 是一个广泛使用的 API 开发工具&#xff0c;它允许开发人员测试 API 的各个方面&#xff0c;包括请求、响应、身份验证等等&#xff0c;其中最常用的功能之一就是 Test 校验。那今天就一起来看看 Postman 的 Test 校验该如何使用。 Test 校验是什么&#xff1f; Test…...

岛屿的最大面积(力扣)递归 JAVA

给你一个大小为 m x n 的二进制矩阵 grid 。 岛屿 是由一些相邻的 1 (代表土地) 构成的组合&#xff0c;这里的「相邻」要求两个 1 必须在 水平或者竖直的四个方向上 相邻。你可以假设 grid 的四个边缘都被 0&#xff08;代表水&#xff09;包围着。 岛屿的面积是岛上值为 1 的…...

MySQL入门学习教程(一)

mysql简介 1、什么是数据库 &#xff1f; 数据库&#xff08;Database&#xff09;是按照数据结构来组织、存储和管理数据的仓库&#xff0c;它产生于距今六十多年前&#xff0c;随着信息技术和市场的发展&#xff0c;特别是二十世纪九十年代以后&#xff0c;数据管理不再仅仅…...

【CTF-web】修改请求头(XFF)

题目链接&#xff1a;https://ctf.bugku.com/challenges/detail/id/79.html 随意输入后可以看到需要本地管理员登录&#xff0c;得知这是一道需要修改XFF头的题。 XFF即X-Forwarded-For&#xff0c;该请求标头是一个事实上的用于标识通过代理服务器连接到 web 服务器的客户端的…...

springboot mongodb 配置多数据源

我想要的效果是&#xff0c;一个类统一管理多数据源&#xff0c;我传个参数进去&#xff0c;它就能返回我对应的mongotemplate 但是根据"mongbodb 多数据源"的关键词&#xff0c;找不到我想要的效果。 网上大多都是明确知道自己是几个数据源&#xff0c;然后每个数…...

Python3 安装、环境变量配置、PyCharm新建Python项目

一、安装包下载 Pyhton官网下载>>最新稳定版的安装包&#xff1a; 找到合适的版本进行下载&#xff1a; 如果下载较慢&#xff0c;此处提供一个3.10.11的稳定版本的安装包&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/16GnWjkGFuSfWfaI9UVX8qA?pwd4u5o 提取…...

用python来爬取某鱼的商品信息(2/2)

目录 上一篇文章 本章内容 设置浏览器为运行结束后不关闭&#xff08;可选&#xff09; 定位到搜索框的xpath地址 执行动作 获取cookie 保存为json文件 修改cookie的sameSite值并且导入cookie 导入cookie&#xff08;出错&#xff09; 导入cookie&#xff08;修改后&…...

【Fegin技术专题】「原生态」打开Fegin之RPC技术的开端,你会使用原生态的Fegin吗?(上)

前提介绍 Feign是SpringCloud中服务消费端的调用框架&#xff0c;通常与ribbon&#xff0c;hystrix等组合使用。由于遗留原因&#xff0c;某些项目中&#xff0c;整个系统并不是SpringCloud项目&#xff0c;甚至不是Spring项目&#xff0c;而使用者关注的重点仅仅是简化http调…...

React Native Vector Icons的使用

介绍 React Native Vector Icons是一个用于在React Native应用中使用矢量图标的库。它提供了许多常见的图标集&#xff0c;如FontAwesome、Ionicons等。 使用 首先&#xff0c;你需要在你的React Native项目中安装React Native Vector Icons库。可以使用以下命令进行安装&…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

Monorepo架构: Nx Cloud 扩展能力与缓存加速

借助 Nx Cloud 实现项目协同与加速构建 1 &#xff09; 缓存工作原理分析 在了解了本地缓存和远程缓存之后&#xff0c;我们来探究缓存是如何工作的。以计算文件的哈希串为例&#xff0c;若后续运行任务时文件哈希串未变&#xff0c;系统会直接使用对应的输出和制品文件。 2 …...

土建施工员考试:建筑施工技术重点知识有哪些?

《管理实务》是土建施工员考试中侧重实操应用与管理能力的科目&#xff0c;核心考查施工组织、质量安全、进度成本等现场管理要点。以下是结合考试大纲与高频考点整理的重点内容&#xff0c;附学习方向和应试技巧&#xff1a; 一、施工组织与进度管理 核心目标&#xff1a; 规…...