"use strict";
// tslint:disable-next-line: only-arrow-functions
const setWatermark: (str: any) => any = function(str: any) {
const id: string = "1.23452384164.123412415";
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id) as any);
}
const can: any = document.createElement("canvas");
can.width = 160;
can.height = 180;
const cans: any = can.getContext("2d");
cans.rotate(-20 * Math.PI / 180);
cans.font = "16px Vedana";
cans.fillStyle = "rgba(200, 200, 200, 0.40)";
cans.textAlign = "left";
cans.textBaseline = "Middle";
cans.fillText(str, can.width / 16, can.height / 2);
const div = document.createElement("div");
div.id = id;
div.style.pointerEvents = "none";
div.style.top = "70px";
div.style.left = "240px";
div.style.position = "fixed";
div.style.zIndex = "100";
div.style.width = document.documentElement.clientWidth - 10 + "px";
div.style.height = document.documentElement.clientHeight - 100 + "px";
div.style.background = "url(" + can.toDataURL("image/png") + ") left top repeat";
document.body.appendChild(div);
return id;
};
const watermark = {
// 该方法只允许调用一次
set: (str: any) => {
let id = setWatermark(str);
setInterval(() => {
if (document.getElementById(id) === null) {
id = setWatermark(str);
}
}, 500);
window.onresize = () => {
setWatermark(str);
};
}
};
export default watermark;

vue 页面添加水印 ts的更多相关文章

  1. js vue 页面添加水印

    vue 微信页面添加水印 this.$nextTick(function() {                                   watermark({ watermark_txt ...

  2. iframe嵌套vue页面打开新窗口

    iframe嵌套vue页面时目录结构为下图: 此时出口文件指向index.html, 所以只需要用a标签动态拼接href, 并设置属性 target="_blank" ,即可在if ...

  3. 如何在vue中使用ts

    注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? ...

  4. python 全栈开发,Day92(编程式的导航,vue页面布局,marked包的使用)

    昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象 通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂 ...

  5. 由于开发需求需要在附件查看页面添加水印,于是网上看到一位大牛写了一个js加水印的方法觉得很实用,也很方便,记录一下,哈哈

    大牛的博客链接:https://www.cnblogs.com/daixinyu/p/6715398.html 提供给大家学习 我优化了几点 1,我把水印的样式单独提出来,这样会提高渲染水印的性能 2 ...

  6. Vue页面骨架屏(一)

    在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loading图效果,而一些大公司会配置一套服务端渲染的架构来解决这个问题.考虑到ssr所要解决的一系列问题 ...

  7. Vue页面间传值,以及客户端数据存储

    初学Vue,遇到了页面传值的问题,大概网上学习了解了一下,在此跟大家分享一下学习心得,欢迎批评指正. 一.参数传值 如果是简单的页面传值,比如传一个id到详情页等等,推荐使用参数传值. 这里页面是通过 ...

  8. URL不变的情况下,最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新

    原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/a ...

  9. vue页面顺序规范

    // html模板<template>    <div>因联vue页面规范</div></template><script>   // 模块 ...

随机推荐

  1. 利用三层交换机实现VLAN间路由(计算机网络中速率、带宽、吞吐量的概念)

    1.速率 速率是指计算机网络中的主机在数字信道上,单位时间内从一端传送到另一端的数据量,即数据传输率,也称数据率或比特率.比特(bit)是数据量的最小单位,s(秒)是时间的最小单位.所以速率单位为bi ...

  2. HTML5-autio、video视频音频

    完整版视屏web播放器: 基本autio和ideo介绍 <!DOCTYPE html> <html lang="en"> <head> < ...

  3. 微信小程序开发项目过程中的一个要注意事项

    在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:‘<’.‘>’.‘&’.‘空格’等,微信小程序同样支持对转义字符的处理, decode属性默认为false,不会解析我们的 ...

  4. EasyUI:Cannot read property 'width' of null

    最近在使用EasyUI DataGrid来做前端的报表开发,遇到了这个报错: Uncaught TypeError: Cannot read property 'width' of null 在网上查 ...

  5. 安装Kubernetes V1.16.2

    安装Kubernetes V1.16.2 准备硬件环境 利用VirtualBox准备两台Linux虚拟机(K8S集群2台起步),系统用CentOS(我用的是的CentOS-7-x86_64-DVD-1 ...

  6. JVM(Java虚拟机)详解(JDK7)

    1.Java内存区域 运行时数据区域: Java 虚拟机在执行Java程序时,定义了若干种程序运行期间会使用到的运行时数据区,其中有一些会随着虚拟机启动而创建,随着虚拟机退出而销毁.另外一些则是与线程 ...

  7. java_第一年_JavaWeb(9)

    JavaBean是一个遵循某种特定写法的Java类,有以下特点: 必需具有一个无参的构造函数 属性必需私有化 私有化的属性必需通过public类型的方法暴露给其它程序,其方法命名也有一定的规范 范例: ...

  8. Codeforce 1175 D. Array Splitting

    新鲜热乎的题 Codeforce 1175 D. 题意:给出一个长度为$n$的序列$a$,你需要把它划分为$k$段,每一个元素都需要刚好在其中一段中.分好之后,要计算$\sum_{i=1}^{n} ( ...

  9. sql插入语句笔记

    使用INSERT插入数据行 [一次插入一行数据] 全写: INSERT  INTO  renshi  (name, sex, age ,tel) VALUES  ('胡大姐','女','35','13 ...

  10. linux系统安装MongoDB文档

    mongodb文档数据库的安装: wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.0.4.tgz tar -zx ...