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.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 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
德生PL660的电路分析和打磨
2021/03/02 无线电
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
Opacity.js
2007/01/22 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
vue实现图片上传功能
2020/05/28 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
python&MongoDB爬取图书馆借阅记录
2016/02/05 Python
简单实现python进度条脚本
2017/12/18 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
详解python3中zipfile模块用法
2018/06/18 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
python获取交互式ssh shell的方法
2019/02/14 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
详解Python流程控制语句
2020/10/28 Python
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
函授本科毕业自我鉴定
2013/10/09 职场文书
新郎婚宴答谢词
2014/01/19 职场文书
创新比赛获奖感言
2014/02/13 职场文书
工商管理专业自荐信
2014/06/03 职场文书
高中同学会活动方案
2014/08/14 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书