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 23 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
vue $router和$route的区别详解
Dec 02 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
SSM VUE Axios详解
Oct 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
实用函数2
2007/11/08 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
php防止sql注入的方法详解
2017/02/20 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
Python基于pillow判断图片完整性的方法
2016/09/18 Python
Python函数参数操作详解
2018/08/03 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
.NET初级开发工程师面试题
2014/04/18 面试题
社团文化节策划书
2014/02/01 职场文书
运动会广播稿20字
2014/02/18 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
自查自纠整改报告
2014/11/06 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
python 离散点图画法的实现
2022/04/01 Python