"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. 关于Nuget包安装之后再卸载,找不到dll的问题

    场景: 在nuget上安装了FFTW.NET,自动的安装一堆其依赖的dll,那些dll都是donet自带的.再卸载这些dll的时候,项目可以生成成功,就是跑不起来.提示如下: 解决方案: 经过排查发现 ...

  2. [Codeforces 464E] The Classic Problem(可持久化线段树)

    [Codeforces 464E] The Classic Problem(可持久化线段树) 题面 给出一个带权无向图,每条边的边权是\(2^{x_i}(x_i<10^5)\),求s到t的最短路 ...

  3. HDU 1255 覆盖的面积 ( 扫描线 + 离散 求矩阵大于k次面积并 )

    覆盖的面积 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  4. http响应代码解释

    200:成功响应 302:找到,但是请求的资源在另外一个不同的url中. 400:错误请求.这个请求不能被服务器所理解,客户端必须修改请求. 401:未认证,这个请求需要用户认证. 404:未找到.服 ...

  5. axios 利用new FileReader() 下载文件获取返回的错误信息

    this.axios({           method: "post",           url: url,           data: data,           ...

  6. vue 中使用 watch 出现了如下的报错

    vue 中使用 watch 出现了如下的报错 报错: Method "watch" has type "object" in the component def ...

  7. Oracle连接远程数据库

    我用的事navicat连接工具 方法一: 找到  工具---->环境,OCI环境 选择中间那个(我的是这个,我不确定是不是都一样,可以都试试),选好之后关闭navicat,重新运行navicat ...

  8. 2018-8-10-win10-uwp-MetroLog-入门

    title author date CreateTime categories win10 uwp MetroLog 入门 lindexi 2018-08-10 19:16:53 +0800 2018 ...

  9. vue,一路走来(9)--聊天窗口

    闲暇时间,介绍一下我做一个聊天窗口的心得.如图: 首先要考虑的是得判断出是自己的信息还是对方发来的信息,给出如图的布局,切换不同的类. <li class="clearfix" ...

  10. 一、简单的图片上传并预览功能input[file]

    一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...