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使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
详解Vue3使用axios的配置教程
Apr 29 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开发过程中常用函数收藏
2009/12/14 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
Ajax的概述与实现过程
2016/11/18 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
Python列表删除的三种方法代码分享
2017/10/31 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
Django框架视图介绍与使用详解
2019/07/18 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
在keras里实现自定义上采样层
2020/06/28 Python
车间操作工岗位职责
2013/12/19 职场文书
银行职员思想汇报
2013/12/31 职场文书
捐书倡议书
2014/08/29 职场文书
个性与发展自我评价
2015/03/06 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
初一英语教学反思
2016/02/15 职场文书
详解Redis瘦身指南
2021/05/26 Redis