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 */},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/41057.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

案例21 基于Spring Boot+Redis实现图书信息按书号存储案例

1. 案例需求 基于Spring BootRedis实现图书信息按书号存储和取出功能&#xff0c;数据存储至Redis。 2. 创建Spring Boot项目 创建Spring Boot项目&#xff0c;项目名称为springboot-redis02。 3. 选择依赖 ​ pom.xml文件内容如下所示&#xff1a; <?xml version&quo…

浏览器控制台调试代码和JavaScript控制台方法介绍

浏览器控制台调试代码和JavaScript控制台方法介绍 浏览器控制台调试代码 浏览器控制台&#xff08;Console&#xff09;是浏览器提供的一个开发工具&#xff0c;用于在浏览器中执行和调试 JavaScript 代码。它提供了一个交互式环境&#xff0c;可以输入 JavaScript 代码&#…

Qt:隐式内存共享

隐式内存共享 Many C classes in Qt use implicit data sharing to maximize resource usage and minimize copying. Implicitly shared classes are both safe and efficient when passed as arguments, because only a pointer to the data is passed around, and the data i…

C语言:每日一练(选择+编程)

目录 选择题&#xff1a; 题一&#xff1a; 题二&#xff1a; 题三&#xff1a; 题四&#xff1a; 题五&#xff1a; 编程题&#xff1a; 题一&#xff1a;打印1到最大的n位数 示例1 思路一&#xff1a; 题二&#xff1a;计算日期到天数转换 示例1 思路一&#xf…

【JVM】如何判定一个对象已死以及“标记-清除”、“标记-复制”、“标记-整理”三种垃圾收集算法

文章目录 0、如何判定一个对象的生死&#xff1f;1、上文提到的引用又是什么1、强引用&#xff1a;2、软引用&#xff1a;3、弱引用&#xff1a;4、虚引用&#xff1a; 2、垃圾收集算法1、标记-清除2、标记-复制优化&#xff1a;&#x1f447; 3、标记-整理 0、如何判定一个对象…

Java面向对象程序设计——知识、概念、定义及作用(简答)

​专栏&#xff1a;《Java面向对象程序设计》学习笔记 问题是依据考纲整理的&#xff0c;稍微做了一些补充。大部分答案由GPT生成&#xff0c;部分内容摘选自书本。 内容太多了&#xff0c;目前懒得浓缩精炼了&#xff0c;以后再说吧。 如果有大佬可以帮忙精简一些文字、补充…

R语言实现神经网络(1)

#R语言实现神经网络 library(neuralnet) library(caret) library(MASS) library(vcd) data(shuttle) str(shuttle)#因变量use; table1<-structable(windmagn~use,shuttle) mosaic(table1,shadingT) mosaic(use~errorvis,shuttle) prop.table(table(shuttle$use,shuttle$stab…

计算机网络-物理层(二)- 传输方式

计算机网络-物理层&#xff08;二&#xff09;- 传输方式 串型传输与并行传输 串行传输:是指数据是一个比特一个比特依次发送的&#xff0c;因此在发送端和接收端之间&#xff0c;只需要一条数据传输线路即可 并行传输:是指一次发送n个比特而不是一个比特&#xff0c;因此发送…

【Uniapp】base64图片资源转为本地图片,解决canvas不支持base64问题

通过接口获取到base64类型的二维码&#xff0c;把二维码放到canvas里生成海报 遇到的问题&#xff1a; 在微信小程序开发工具中能够正常显示海报&#xff0c;到真机上测试就无法显示二维码 原因&#xff1a; 因为canvas不支持base64&#xff0c;其次在使用小程序 canvas 的 dr…

异常堆栈缺失与OmitStackTraceInFastThrow

目录 现象原因OmitStackTraceInFastThrow源码层面分析OmitStackTraceInFastThrow阈值是多少源码源代码解释 现象 异常没有堆栈信息。只有短短的异常类信息&#xff0c;例如java.lang.NullPointerException。 完整的异常堆栈示例&#xff1a; java.lang.NullPointerException…

爬虫逆向实战(十六)--某建筑市场平台

一、数据接口分析 主页地址&#xff1a;某建筑市场平台 1、抓包 通过抓包可以发现数据接口是list 2、判断是否有加密参数 请求参数是否加密&#xff1f; 无请求头是否加密&#xff1f; 无响应是否加密&#xff1f; 通过查看“响应”模块可以发现&#xff0c;返回的响应是…

MAUI+Blazor:windows 打包踩坑

文章目录 前言MSIX安装文件如何发布选择Windows平台旁加载自定义签名版本号安装 总结 前言 最近打算研究一下MAUIBlazor&#xff0c;争取在今年年底之前彻底搞懂MAUIBlazor的安装模式&#xff0c; MSIX安装文件 Windows 4种安装程序格式MSI&#xff0c;EXE、AppX和MSIX优缺点…

Java常用API---快速达到Java工作水准系列(1)

目录 1.集合 2.包装类 3.日期处理以及格式化 4.字符串处理类 5.数组 5.BigDecimal 6.Math 1.集合 毋庸置疑&#xff0c;集合在实际项目的使用概率几乎是百分之百。无论是用于数据存储和管理、去重和查找亦或是数据检索和遍历&#xff0c;都离不开集合的使用。任何一个项…

Spring Cloud Gateway系例—参数配置(CORS 配置、SSL、元数据)

一、CORS 配置 你可以配置网关来控制全局或每个路由的 CORS 行为。两者都提供同样的可能性。 1. Global CORS 配置 “global” CORS配置是对 Spring Framework CorsConfiguration 的URL模式的映射。下面的例子配置了 CORS。 Example 77. application.yml spring:cloud:gat…

【【STM32----I2C通信协议】】

STM32----I2C通信协议 我们会发现I2C有两根通信线&#xff1a; SCL和SDA 同步 半双工 带数据应答 支持总线挂载多设备&#xff08;一主多从&#xff0c;多主多从&#xff09; 硬件电路 所有I2C设备的SCL连在一起&#xff0c;SDA连在一起 设备的SCL和SDA均要配置成开漏输出模式 …

5.Vue_Element

文章目录 1 Ajax1.1 Ajax介绍1.1.1 Ajax概述1.1.2 Ajax作用1.1.3 同步异步 1.2 Axios1.2.1 Axios的基本使用1.2.2 Axios请求方法的别名 2 前端工程化2.1 前端工程化特点2.2 Vue项目开发流程 3 Vue组件库Element3.1 Element介绍 1 Ajax 1.1 Ajax介绍 1.1.1 Ajax概述 Ajax: 全…

【Unity游戏开发】基于前缀树的红点系统构思与客户端方案

一、前言 前段时间负责了项目中红点系统的实现,和大家分享一下初期是设计思路 红点系统客户端业务的一般实现过程与方式: 数据管理:首先要在客户端建立一个数据管理系统,用于存储和管理各个业务模块的红点状态。可以是一个中央数据管理器或模块化的数据管理系统,具体根据游…

VUE中babel.config.js配置按需引入

VUE中babel.config.js配置 vue/cli-plugin-babel/preset是一款 babel 插件&#xff0c;它会在编译过程中将 import 引入自动转换为按需引入的方式。 module.exports {presets: [vue/cli-plugin-babel/preset],plugins: [[import, {libraryName: element-ui,libraryDirectory…

系统架构设计师---多媒体技术及其应用

概念 媒体:承载信息的载体。 多媒体:数字、文字、声音、图形、图像和动画等各种媒体的有机组合,并与先进的计 算机、通信和广播电视技术相结合,形成一个可组织、存储、操纵和控制多媒体信息的集成环境和 交互系统。 多媒体技术:以数字化为基础,能够对多…

召集令:CloudQuery 社区有奖征文活动来啦!

CloudQuery 社区第一期征文活动来袭&#xff01;&#xff01;&#xff01;只要你对 CloudQuery 产品感兴趣&#xff0c;或者是希望了解 CQ &#xff0c;都可以来参加&#xff0c;在本期活动中&#xff0c;我们也为大家准备了多种主题供你选择&#xff0c;CQ 使用案例、版本对比…