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 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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中遇到的时区问题解决方法
2015/07/23 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
php上传大文件设置方法
2016/04/14 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python实现新浪博客备份的方法
2016/04/27 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
同时安装Python2 & Python3 cmd下版本自由选择的方法
2017/12/09 Python
Python 查看文件的读写权限方法
2018/01/23 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
python实现按日期归档文件
2021/01/30 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
医学类导师推荐信范文
2013/11/19 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
社区食品安全实施方案
2014/03/28 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
安全隐患整改报告
2014/11/06 职场文书
创业计划书之水果店
2019/07/18 职场文书
asyncio异步编程之Task对象详解
2022/03/13 Python
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技