前端上传图片添加水印

在最近 haoyo择校功能中，需要上传各个高校的招生计划图片；为申明版权，故需要在上传图片时添加水印。

技术栈：

vue2.x+element-ui+more...

实现思路：

利用 element-ui 的 upload 组件，监听http-request事件，获取到上传的文件信息。
将获取到的文件信息file, 转为base64格式。
将base64格式的图片转为canvas格式，并获取到canvas的图片对象。
给canvas图层添加水印。
将canvas图层转为图片格式（.jpg, .png….）。
将图片转为文件格式去上传。

代码示例：

入口方法

beforeUpload(file) {console.log(file)return new Promise((resolve, reject) => {//把文件转换为base64this.fileByBase64(file, async (base64) => {   // 1.调用方法1： 把文件转换为base64字符串// 把文件转换为Canvaslet tempCanvas = await this.imgToCanvas(base64) // 2. 调用方法2：把base64转换为Canvas// 把水印写入const canvas = this.addWatermark(tempCanvas, '考研公众号：HaoYo') //3.调用方法3： 写入水印到Canvas// canvas转成imgconst img = this.convasToImg(canvas, file.type) //4. 调用方法4：把Canvas转换为image文件//被canvas转换为文件let newFile = this.base64ToFile(img.src, file.name) //5.调用方法5：被image转换为File文件resolve(newFile)})})
},

文件转base64

/*** 文件转base64* @param  file 文件流* @param  callback 回调函数*/
fileByBase64(file, callback){let reader = new FileReader();// 传入一个参数对象即可得到基于该参数对象的文本内容reader.readAsDataURL(file);reader.onload = function (e) {// target.result 该属性表示目标对象的DataURLcallback(e.target.result)};
},

Base64转成canvas

/*** Base64转成canvas* @param  base64*/
async imgToCanvas(base64) {// 创建img元素const img = document.createElement('img')img.setAttribute('src', base64)await new Promise((resolve) => (img.onload = resolve))// 创建canvas DOM元素，并设置其宽高和图片一样const canvas = document.createElement('canvas')console.log(img.height)console.log(img.width)canvas.width = img.widthcanvas.height = img.height// 坐标(0,0) 表示从此处开始绘制，相当于偏移。canvas.getContext('2d').drawImage(img, 0, 0)return canvas
},

给canvas添加水印

/*** canvas添加水印* @param  canvas 对象* @param text 水印文字*/
addWatermark(canvas, text) {const ctx = canvas.getContext('2d')ctx.fillStyle = '#aaa'ctx.textBaseline = 'middle'ctx.font = (ctx.canvas.width / 20) + 'px Arial'ctx.textAlign = 'center'ctx.textBaseline = 'middle'// ctx.rotate(45);// ctx.rotate((45 * Math.PI) / 180);ctx.fillText(text, canvas.width / 2, canvas.height / 2)return canvas
},

canvas转成img

/*** canvas转成img* @param {canvas对象} canvas*/
convasToImg(canvas, type) {// 新建Image对象，可以理解为DOMlet image = new Image()// canvas.toDataURL 返回的是一串Base64编码的URL// 指定格式 PNGimage.src = canvas.toDataURL(type)return image
},

将img图片转为file类型的文件(用于上传)

/*** @param urlData  base64* @param fileName 文件名称* @returns {File}*/
base64ToFile(urlData, fileName) {let arr = urlData.split(',');let mime = arr[0].match(/:(.*?);/)[1];let bytes = atob(arr[1]); // 解码base64let n = bytes.lengthlet ia = new Uint8Array(n);while (n--) {ia[n] = bytes.charCodeAt(n);}return new File([ia], fileName, { type: mime });
},

最后图片，就开开心心的被加上水印了呀～

created_at：zhanghaoran’s blog 2022-04-27

原文地址：https://blog.zhanghaoran.ren/article/html/QianDuanShangChuanTuPianTianJiaShuiYin.html

前端上传图片添加水印相关推荐

php 上传图片添加水印,上传图片添加水印？该怎么解决
上传图片添加水印??? 上传图片添加水印??? 搞了个上传图片的函数(经过测试可以上传图片,这个没有问题) 现在想上传图片时添加水印图片(一个小gif) 上传图片时,网页提示函数imagecopyme ...
微信小程序---腾讯云cos的使用---前端上传图片+后端生成临时密钥
0. 腾讯云cos介绍: - 第一阶段:文件服务器,将文件存储在某个服务器(目录结构的划分). - 第二阶段:- 文件存储,将文件存储在某个服务器(目录结构的划分).- 对象存储,优化存储和操作优化( ...
前端上传图片至服务器，然后前端通过url访问图片
后端需挂载图片路径,前端上传图片时直接上传至挂载路径. 添加虚拟路径访问,例如图片都存放在linux服务器的/root/avatar/目录下,访问时想设置avatar代替目录,若web端口为10000 ...
ue编辑器拖拽上传图片_为百度UE编辑器上传图片添加水印功能
前些日子把phpcms的内置编辑器改成了百度UE编辑器,非常好用,但是有个地方不是很满意,就是没法给上传的图片加水印了,经过一番研究终于实现了出来,分享给大家 UEditor编辑器上传图片是自动提取的 ...
前端上传图片到七牛云
前端如何上传图片到七牛云流程: 1.七牛云后台的对象存储功能 2.node.js后台生成七牛云的token 3.前端利用element UI/ice 的upload组件 4.文件名和token作为参 ...
前端上传图片到阿里云（pc端和uniapp小程序）
1.pc端直接传文件官方文档JavaScript客户端签名直传如果前端是原生的html写的话,就去官网下载示例来看,把文件里面的配置修改成子阿里云的配置就好 ![在这里插入图片描述](https: ...
前端上传图片到oss对象存储
后台不想把所有东西都放在服务器,也出于用户安全考虑让前端把用户上传头像时上传到oss对象存储中,后台去取前端再通过接口获取url显示上传的头像废话不说,下面直接贴代码这里使用vue+ant de ...
JAVA 实现上传图片添加水印(详细版)
水印工具类 import javax.imageio.ImageIO; import java.awt.AlphaComposite; import java.awt.Color; import ja ...
vue上传图片加水印；js上传图片添加水印；vue给图片添加水印；canvas图片添加水印；canvas画布导出图片
uni-app微信小程序图片加水印,点击看这篇需求场景: 要求上传图片,并给图片添加水印.传给后端的也是有水印的图片. 逻辑步骤: 通过input上传图片,拿到图片的信息和base64,将图片绘制到 ...

前端上传图片添加水印

技术栈：

实现思路：

代码示例：

前端上传图片添加水印相关推荐

最新文章

热门文章