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 相关文章推荐
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
VUE递归树形实现多级列表
Jul 15 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
PHP实现分页的一个示例
2006/10/09 PHP
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
PHP中基本符号及使用方法
2010/03/23 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
JavaScript 继承详解(一)
2009/07/13 Javascript
Prototype Selector对象学习
2009/07/23 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
Python 爬虫的工具列表大全
2016/01/31 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
班组长安全职责
2014/01/05 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
初婚未育证明样本
2014/10/24 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
Pandas 数据编码的十种方法
2022/04/20 Python
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript