位置: IT常识 - 正文

vue - vue中实现对图片添加水印和截图的功能(vue能实现什么)

编辑:rootadmin
vue - vue中实现对图片添加水印和截图的功能 文章目录1,添加水印2,图片截图3,上传多个图片同时并添加上水印1,添加水印

推荐整理分享vue - vue中实现对图片添加水印和截图的功能(vue能实现什么),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue有哪些方法,vue功能实现,vue中的...,vue中的...,vue中key,vue实用技巧,vue功能实现,vue如何用,内容如对您有帮助,希望把文章链接给更多的朋友!

选择上传一张图片,使用cavans对其添加水印; 我这里使用的是vantUI的uploader组件上传图片,当然也可以使用原生的input type='file'来上传图片,然后拿到资源句柄;

效果图如下: 水印是在左下角

代码如下:

大家主要看afterRead(file) 方法即可,其中需要注意的是:

1,形参file是拿到的图片的base64格式和其他的一些信息; 2,添加水印主要使用this.base64AddWaterMaker()这个方法进行操作,返回的是一个promise可以使用await进行接收也可以直接在then里面拿到返回的base64图片文件; 3,canvas.getContext(‘2d’)创建了一个2d的画布,而ctx.drawImage()像是一个画笔,开始绘制图像; 4,img.onload()方法是一个异步加载的方法; 5,toDataURL()方法把图形转变成base64编码格式的png;

<template> <div> <p>用户选择一张图片进行添加水印并截图</p> <!-- <van-uploader :after-read="afterRead" />--> <van-uploader :after-read="afterRead"> <van-button icon="plus" type="primary" size="small">上传文件</van-button></van-uploader> <van-button type="primary" size="small" class="del" @click="delImg">删除图片</van-button> <van-button type="primary" size="small" class="del" @click="screenShot">图片截图</van-button> <van-button type="primary" size="small" class="del" @click="jumpTo">跳转静态路由</van-button> <div class="preview" v-if="true"> <div class="perview-box"> <img :src="imgBase64" alt="" id="img" /> </div> </div> </div></template><script>// 引入截图所需要的依赖 下载地址为:https://blog-static.cnblogs.com/files/lyt520/html2canvas.min.jsimport html2canvas from '../../plugins/html2canvas.js';export default { components: {}, data() { return { // 图片的base编码 imgBase64: '', // 水印配置项 waterMakeConfig: { font: 'microsoft yahei', //字体 //水印文本内容 textArray: ['风-温迪', '2022/9/1 10:13'], }, }; }, // 计算属性 computed: {}, // 监听属性 watch: {}, created() {}, mounted() {}, methods: { // 图片上传完成的操作 afterRead(file) { // 下面是给图片添加水印 try { this.base64AddWaterMaker(file.content, this.waterMakeConfig).then((res) => { 这里可以把添加水印后的文件传给后端,我这里只是举例并没有做 console.log("res",res); }); } catch (error) { console.log('error:', error); } }, // 给图片添加水印 base64AddWaterMaker(base64Img, waterMakeConfig) { // 保留this指向 后面会用到的 let _this = this; return new Promise((resolve, reject) => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const img = new Image(); img.crossOrigin = 'Anonymous'; // 图片加载的过程中允许出现跨域 // 先有src属性才会触发 onload函数 img.src = base64Img; // 异步加载 img.onload = function () { // 注意img.onload方法是异步的 canvas.width = img.width; canvas.height = img.height; ctx.font = `40px Georgia`; // 给文字添加颜色 // ctx.fillStyle = 'red'; // 添加渐变颜色的水印 var gradient = ctx.createLinearGradient(0, 0, 200, 0); gradient.addColorStop(0, 'blue'); gradient.addColorStop(1, 'red'); ctx.fillStyle = gradient; // 以左上角为坐标原点 开始绘制图像 ctx.drawImage(img, 0, 0, img.width, img.height); ctx.fillText(waterMakeConfig.textArray[0], img.width * 0.05, img.height * 0.8); //在图片上添加字体 ctx.fillText(waterMakeConfig.textArray[1], img.width * 0.05, img.height * 0.85); let resultBase64 = canvas.toDataURL('image/png'); // 返回的图片文件也是base64格式的 if (!resultBase64) { reject(); } else { _this.imgBase64 = resultBase64; resolve(resultBase64); } }; }); }, // 删除图片 delImg() { this.imgBase64 = null; }, // 测试动态路由 点击跳转动态路由页面 并传参 jumpTo() { this.$router.push({ path: '/routers/123' }); }, // 图片截图 使用了html2canvas插件 screenShot() { if(!this.imgBase64){ return alert("请先上传一张图片!") } // 获取截取的元素 这里直接获取img const imgEl = document.getElementById('img'); html2canvas(imgEl, { scale: window.devicePixelRat, //设备像素比 backgroundColor: null, //设置截图的背景色 allowTaint: false, //允许跨域(图片跨域相关) useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题 taintTest: true, //是否在渲染前测试图片 }).then((canvas) => { // 导出图像 let url = canvas.toDataURL('image/png', 1.0); var saveLink = document.createElement('a'); // 创建a链接 saveLink.href = url; saveLink.download = 'downLoad.png'; // 下载的图片名称 saveLink.click(); }); }, },};</script><style lang="scss" src="./cavans.scss" scoped></style>2,图片截图vue - vue中实现对图片添加水印和截图的功能(vue能实现什么)

1, 图片截图功能需要引入一个插件,插件下载地址为:

https://blog-static.cnblogs.com/files/lyt520/html2canvas.min.js

2,下载完成后放到一个指定的位置 然后引入:

3, 然后在 methods里面 新增一个screenShot()方法即可完成截图功能

代码如下:

// 图片截图 使用了html2canvas插件 screenShot() { if(!this.imgBase64){ return alert("请先上传一张图片!") } // 获取截取的元素 这里直接获取img const imgEl = document.getElementById('img'); html2canvas(imgEl, { scale: window.devicePixelRat, //设备像素比 backgroundColor: null, //设置截图的背景色 allowTaint: false, //允许跨域(图片跨域相关) useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题 taintTest: true, //是否在渲染前测试图片 }).then((canvas) => { // 导出图像 let url = canvas.toDataURL('image/png', 1.0); var saveLink = document.createElement('a'); // 创建a链接 saveLink.href = url; saveLink.download = 'downLoad.png'; // 下载的图片名称 saveLink.click(); }); },3,上传多个图片同时并添加上水印

如果你的业务需求是上传多个图片,同时要求添加水印;可以预览;我们也可以使用vant的uploader组件的 v-model="fileList"属性进行操作;

实现效果如下: 实现代码如下:

注意: 一个afterReadImg()方法就可以实现了,原理主要是监听(this.$watch)fileList的长度变化,如果新增了一张或多张,那就同步的把每一张都添加水印,并添加一个新的属性 watermark: true, //水印标识;这是判断是否添加水印的标识,新增的图片肯定没有此属性,就可以添加水印了;

在循环的最后面要调用unWatch()方法解除监听,否则会引起无限监听循环;因为我们this.fileList = templateList改变了响应式属性fileList;

<template> <div> <p>请选择图片</p> <van-uploader v-model="fileList" :after-read="afterReadImg" multiple /> </div></template><script>export default { components: {}, data() { return { // 水印配置项 waterMakeConfig: { font: "microsoft yahei", //字体 //水印文本内容 textArray: ["风-温迪", "2022/9/1 10:13"], }, // 图片列表 fileList: [], }; }, methods: { // 上传多个文件 async afterReadImg(files) { // 开始启动监听 let unWatch = this.$watch( () => this.fileList, async (newValue, oldValue) => { if (newValue.length == 0) { return; } let templateList = []; //存储临时文件列表 for (let index = 0; index < newValue.length; index++) { // 说明没有添加水印 if (!newValue[index].watermark) { // 开始加水印 let base64 = await this.base64AddWaterMaker( newValue[index].content, this.waterMakeConfig ); // 把base64转为文件类型 用于后续上传到后端 let file = this.convertBase64UrlToBlob(base64); templateList.push({ file, url: base64, // 图片的base64 watermark: true, //水印标识 }); } else { // 已经添加水印的会自动排在最前面 templateList.push(newValue[index]); console.log("已经添加过水印"); } } unWatch(); // 此处一点要解除监听 否则会引起无线循环监听 this.fileList = templateList; // 重新赋值 }, { immediate: true } ); }, // 给图片添加水印 base64AddWaterMaker(base64Img, waterMakeConfig) { // 保留this指向 后面会用到的 let _this = this; return new Promise((resolve, reject) => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); const img = new Image(); img.crossOrigin = "Anonymous"; // 图片加载的过程中允许出现跨域 // 先有src属性才会触发 onload函数 img.src = base64Img; // 异步加载 img.onload = function () { // 注意img.onload方法是异步的 canvas.width = img.width; canvas.height = img.height; ctx.font = `40px Georgia`; // 给文字添加颜色 // ctx.fillStyle = 'red'; // 添加渐变颜色的水印 var gradient = ctx.createLinearGradient(0, 0, 200, 0); gradient.addColorStop(0, "blue"); gradient.addColorStop(1, "red"); ctx.fillStyle = gradient; // 以左上角为坐标原点 开始绘制图像 ctx.drawImage(img, 0, 0, img.width, img.height); ctx.fillText( waterMakeConfig.textArray[0], img.width * 0.05, img.height * 0.8 ); //在图片上添加字体 ctx.fillText( waterMakeConfig.textArray[1], img.width * 0.05, img.height * 0.85 ); let resultBase64 = canvas.toDataURL("image/png"); // 返回的图片文件也是base64格式的 if (!resultBase64) { reject(); } else { // _this.imgBase64 = resultBase64; resolve(resultBase64); } }; }); }, /** * 将以base64的图片url数据转换为Blob 并进行上传 * @param urlData 用url方式表示的base64图片数据 */ convertBase64UrlToBlob(urlData, filename) { console.log(222); if (urlData == "" || !urlData) { return console.warn("base64的图片不存在"); } // 以base64的图片url数据转换为Blob var arr = urlData.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } let bold = new Blob([u8arr], { type: mime }); return bold; }, },};</script><style lang="scss" src="./cavans.scss" scoped></style>

css代码如下:

.container{ width: 402px; height: 300px; background:#ccc; border: 1px solid red; margin: 0 auto; }// 预览的盒子.perview-box{ width: 402px; height: 400px; border: 1px solid; margin-top: 10px; #img{ display: inline-block; width: 400px; }}.del{ margin-left: 20px;}
本文链接地址:https://www.jiuchutong.com/zhishi/292383.html 转载请保留说明!

上一篇:微信小程序自定义导航栏,实现不同用户角色登陆后显示不同的tabbar(避坑版)(微信小程序自定义函数)

下一篇:威尔士中部水仙花中的蓝山雀 (© Philip Jones/Alamy)(威尔士黄水仙)

  • 个税退付手续费是单位所得吗
  • 中税协是什么意思
  • 纳税申报操作视频
  • 应纳税所得额是利润总额吗
  • 印花税税源明细表怎么填
  • 水利建设专项基金的税率
  • 卫生清理费计入什么科目
  • 社保基数与工资不符
  • 小企业会计准则以前年度损益调整
  • 建立明细账的注意事项
  • 税务机关对企业实施特别纳税调整,涉及企业向境外
  • 资本公积是企业所得税吗
  • 非营利性科研机构接受企业基础研究收入免征企业所得税
  • 软件开发减免的流转税是否缴纳所得税
  • 名义股东转让股份侵权
  • 加工费的计提工资账务处理
  • 房地产土地增值税计税依据
  • 主营业务成本计算公式是什么
  • 经营利润所得税费用的计算公式
  • 固定资产转为投资性房地产折旧
  • 应交税费个人所得税
  • 出租房屋房产税怎么算
  • 差额征税的小微企业免税销售额
  • 应付职工薪酬借方和贷方
  • 小企业会计准则和企业会计准则的区别
  • 应收账款转让的会计处理
  • 借方和贷方是什么意思银行存款
  • 公司接受承兑汇票的风险
  • 固定资产转投资性房地产是会计政策变更吗
  • 事业单位福利发放时间
  • 民间非营利组织有哪些
  • 私募证券投资如何交易
  • window11如何打开任务管理器
  • 增值税电子发票有什么用
  • 发票认证平台上不去
  • php访问mysql数据库函数
  • 融资租入固定资产是什么意思
  • 收到现金股利或债券利息时会计分录
  • 带壳的栗子 (© Kai Keisuke/Shutterstock)
  • 4月满月是几号
  • antdesign vue pro
  • 税务没给核印花税,企业用交吗
  • 黑色金属冶炼压延品的税收编码是多少
  • 销售退回的处理方法
  • php会员到期功能
  • 怎样在网上领取
  • 未缴纳的出资款怎样清算
  • 房屋维修费属于什么税收分类编码
  • 11月资产负债表
  • 织梦怎么添加相关
  • 自产产品用于职工福利
  • 应收账款未计提坏账能直接核销
  • 货款去零头分录
  • 向投资者分配现金股利的会计分录?
  • 一张凭证上可以写多个摘要吗
  • 用于研发样品出口收汇国际收支申报
  • 主营业务成本可以设明细科目吗
  • 展览门票收入按什么征税
  • 小规模红冲发票收入正数税额负数
  • 会计凭证编制程序和用途
  • mysql数据库高可用方案
  • 你所不知道的童话动画版免费观看
  • mac如何切换界面 快捷键
  • pptp和l2tp哪个比较安全
  • redhat6.9安装图解
  • 番茄花园论坛
  • centos7.6桌面版安装教程
  • win7系统笔记本摄像头在哪里打开
  • win8删除软件在哪里
  • win8怎么设置桌面
  • linux设置静态
  • python数据结构教程
  • jquery 表格 排序
  • js异步实现原理
  • jquery console.log
  • javascript操作网页
  • 使用筷子就餐会不会传染乙肝病毒
  • c#string stringbuilder
  • 一般纳税人企业所得税怎么算
  • 所有的酒店真的有摄像头吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设