首页 > 其他分享 >前端全局页面添加水印

前端全局页面添加水印

时间:2023-04-27 10:33:09浏览次数:51  
标签:relevant watermark 水印 utm blog 125055703 全局 页面

// 下载npm包
npm install watermark-package -S

使用

         import watermark from "watermark-package";

          // 添加水印
          watermark.setWaterMark({
            w_texts: [data.userName, data.account],
            w_options: {
              w_width: 240,
              w_height: 140,
              w_top: '0px',
              w_left: '0px',
              w_rotateDeg: 25,
              w_font: '1.2rem Vedana',
              w_color: '#666',
              w_opacity: '0.2',
              w_zIndex: '100000',
            }
          })
          // 移除水印
          // watermark.removeWatermark()    

参考:https://blog.csdn.net/weixin_45032067/article/details/125055703?spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-7-125055703-blog-126570259.235%5Ev28%5Epc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-7-125055703-blog-126570259.235%5Ev28%5Epc_relevant_default&utm_relevant_index=11

标签:relevant,watermark,水印,utm,blog,125055703,全局,页面
From: https://www.cnblogs.com/Console-LIJIE/p/17358218.html

相关文章

  • 前端生成二维码及把页面转为图片保存到本地
    前端生成二维码及把页面转为图片保存到本地Bayi·于2021-12-2317:08:37发布847收藏3文章标签:前端javascript生成二维码页面转图片vue版权以vue项目为例,其他类型项目其实也是一样的所需components:QRCodehtml2canvasnpminstallqrcodejs2--savenpm......
  • 无界微前端方案官方示例,main-vue 项目打包之后 访问index.html页面空包,控制台报资源错
    报错信息: 修改方案: publicPath:“./”修改为如上配置即可。......
  • Django笔记三十一之全局异常处理
    本文首发于公众号:Hunter后端原文链接:Django笔记三十一之全局异常处理这一篇笔记介绍Django的全局异常处理。当我们在处理一个request请求时,会尽可能的对接口数据的格式,内部调用的函数做一些异常处理,但可能还是会有一些意想不到的漏网之鱼,造成程序的异常导致不能正常运行,......
  • 关于idea使用Tomcat打开jsp文件页面失败的问题的解决
    问题描述在idea里面使用Tomcat打开jsp文件频繁报错,检查相关路径也没有任何问题,而且用来测试的jsp文件还是最简单的形式,困扰了大概5分钟左右问题解决经过查询百度可知,这次不是路径的问题,而是需要将我们在web文件夹里面创建的jsp文件复制到target文件夹里面保持与target文件夹里......
  • vue-router4 配置懒加载 页面加载时展示loading
     懒加载写法{path:"/",name:"index",component:()=>import("../views/Home.vue"),}创建Loading组件并引入到顶层组件中使用store控制loading组件是否展示包装懒加载写法constlazyLoad=(componentPath)=>{//注意:componentPath不......
  • OkHttp实现全局过期token自动刷新
    原文地址www.cnblogs.com遇到问题:当前开发的App遇到一个问题:当请求某个接口时,由于token已经失效,所以接口会报错。但是产品经理希望app能够马上刷新token,然后重复请求刚才那个接口,这个过程对用户来说是无感的。也就是静默自动登录,然后继续请求:请求A接口-》服......
  • 在毫秒量级上做到“更快”!DataTester 助力飞书提升页面秒开率
    更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群 用户体验是决定互联网产品能否长久生存的基础,每一个基于产品功能、使用、外观的微小体验,都将极大关系到用户留存影响。本文将讲述火山引擎A/B测试(DataTester)助力企业协作平台飞书进行用......
  • 访问页面中嵌入的表格
       如上图,点击ExporttoExcel就会下载一个Exce文件,但是当我们查看元素时,,并没有excel的url。查看网络的文档时,也没有excel的url这是我们清空网络的页面,重新点击页面的ExporttoExcel按钮,就会出现三个响应文件,并下载了一个excel文件。逐个分析,    如果我们......
  • Vue监听页面放大缩小事件
    Vue监听页面放大缩小事件 ,使用window.addEventListener,methods中方法ChangeWin(){letratio=this.getRatio();letPwidth=window.screen.width*this.getRatio()/100;letPHeight=window.screen.height*this.getRatio()/100;//1920*1080......
  • uniapp页面中的按钮使用分享功能
    https://www.codenong.com/cs109827730/......