vue 使用class创建和清除水印的示例代码


Posted in Vue.js onDecember 25, 2020

页面添加水印的方法有很多,以下举例使用class定义的方法进行水印内容渲染:

1、新建文件:WatermarkClass.js

export default class WatermarkClass {
  constructor({id="watermarkID", str = "", fontSize = 18, width = 400, height = 400, fillStyle="#333333", opacity = 1 }) {
    this.id = id;
    this.str = str;
    this.fontSize = fontSize;
    this.width = width;
    this.height = height;
    this.fillStyle = fillStyle
    this.opacity = opacity;

  }

  // 绘制水印
  draw() {
   if (document.getElementById(this.id) !== null) {
    document.body.removeChild(document.getElementById(this.id));
   }

   const canvas = document.createElement("canvas");
   // 设置canvas画布大小
   canvas.width = this.width;
   canvas.height = this.height;

   const ctx = canvas.getContext("2d");
   ctx.rotate(-(15 * Math.PI) / 180); // 水印旋转角度
   ctx.font = `${this.fontSize}px Vedana`;
   ctx.fillStyle = this.fillStyle;
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
   this.str.split(",").forEach((item, index) => {
    ctx.fillText(item, canvas.width / 2, canvas.height / 2 + (index * this.fontSize + 10)); // 水印在画布的位置x,y轴
   });

   const div = document.createElement("div");
   div.id = this.id;
   div.style.pointerEvents = "none";
   div.style.top = "30px";
   div.style.left = "10px";
   div.style.opacity = this.opacity;
   div.style.position = "fixed";
   div.style.zIndex = "999999";
   div.style.width = `${document.documentElement.clientWidth}px`;
   div.style.height = `${document.documentElement.clientHeight}px`;
   div.style.background = `url(${canvas.toDataURL("image/png")}) left top repeat`;
   document.body.appendChild(div);
  }

  setOptions({fontSize = 18, width = 300, height = 300, opacity = 1, str = ""}) {
   this.fontSize = fontSize;
   this.width = width;
   this.height = height;
   this.fillStyle = fillStyle
   this.opacity = opacity;
   this.str = str;
   this.draw();
  }

  // 绘制
  render() {
   this.draw();
   window.onresize = () => {
    this.draw();
   };
  }

  // 移除水印
  removeWatermark() {
   if (document.getElementById(this.id) !== null) {
    document.body.removeChild(document.getElementById(this.id));
   }
  }
 }

2、在页面种引入使用:

import watermarkClass from "@/libs/watermarkClass";
export default {
 name: "App",
 mounted: function () {
  this.initWatermark()
 },
 methods: {
  initWatermark() {
   // 方法一
   let watermark = new watermarkClass({
    id: "watermarkID",
    str: "紫藤萝-watermarkClass",
    fontSize: 20,
    width: 300,
    height: 200,
    fillStyle: "#dddddd",
    opacity: 0.4,
   });
   watermark.render();
   // 5秒后,清除水印
   setTimeout(() => {
    watermark.removeWatermark();
   }, 5000);
  }
 },
};

以上就是vue 使用class创建和清除水印的示例代码的详细内容,更多关于vue 创建和清除水印的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue在图片上传的时候压缩图片
Nov 18 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 #Vue.js
vue3使用vue-count-to组件的实现
Dec 25 #Vue.js
vue+openlayers绘制省市边界线
Dec 24 #Vue.js
vue项目中openlayers绘制行政区划
Dec 24 #Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 #Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 #Vue.js
vue绑定class的三种方法
Dec 24 #Vue.js
You might like
Protoss热键控制
2020/03/14 星际争霸
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
js获取ip和地区
2017/03/10 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
Django视图和URL配置详解
2018/01/31 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
python3 pygame实现接小球游戏
2019/05/14 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
法学专业自我鉴定
2014/02/05 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
Python中Selenium对Cookie的操作方法
2021/07/09 Python
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL
Redis基本数据类型List常用操作命令
2022/06/01 Redis
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang