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+vant实现购物车全选和反选功能
Nov 17 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 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 class中public,private,protected的区别以及实例分析
2013/06/18 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
javascript 精粹笔记
2010/05/09 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
Python 调用Java实例详解
2017/06/02 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
python3获取url文件大小示例代码
2019/09/18 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
C++面试题目
2013/06/25 面试题
简历的个人自我评价范文
2014/01/03 职场文书
小学毕业家长寄语
2014/01/19 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
商铺门面租房协议书
2014/10/21 职场文书
红色革命电影观后感
2015/06/18 职场文书