前端水印文档记录

最新推荐文章于 2024-06-14 11:29:32 发布
最新推荐文章于 2024-06-14 11:29:32 发布
阅读量218 收藏
点赞数
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42359718/article/details/124136640
版权

基本操作

 function __canvasWM({
                container = document.body,
                width = '300px',
                height = '200px',
                textAlign = 'center',
                textBaseline = 'middle',
                font = "20px Microsoft Yahei",
                fillStyle = 'rgba(184, 184, 184, 0.6)',
                content = '水印',
                rotate = '45',
                zIndex = 10000
              } = {}) {
                const args = arguments[0];
                const canvas = document.createElement('canvas');
        
                canvas.setAttribute('width', width);
                canvas.setAttribute('height', height);
                const ctx = canvas.getContext("2d");
        
                ctx.textAlign = textAlign;
                ctx.textBaseline = textBaseline;
                ctx.font = font;
                ctx.fillStyle = fillStyle;
                ctx.rotate(Math.PI / 180 * rotate);
                ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);
        
                const base64Url = canvas.toDataURL();
                const __wm = document.querySelector('.__wm');
        
                const watermarkDiv = __wm || document.createElement("div");
                const styleStr = `
                  position:fixed;
                  top:0;
                  left:0;
                  bottom:0;
                  right:0;
                  width:100%;
                  height:100%;
                  z-index:${zIndex};
                  pointer-events:none;
                  background-repeat:repeat;
                  background-image:url('${base64Url}')`;
        
                watermarkDiv.setAttribute('style', styleStr);
                watermarkDiv.classList.add('__wm');
        
                if (!__wm) {
                  container.insertBefore(watermarkDiv, container.firstChild);
                }
                
                if (typeof module != 'undefined' && module.exports) {  //CMD
                    module.exports = __canvasWM;
                } else if (typeof define == 'function' && define.amd) { // AMD
                    define(function () {
                      return __canvasWM;
                    });
                } else {
                    window.__canvasWM = __canvasWM;
                }
              }
                
            // 调用
            __canvasWM({
              content: '水印123'})

避免元素被删

MutationObserver是变动观察器，字面上就可以理解这是用来观察节点变化的。Mutation Observer API 用来监视 DOM 变动，DOM 的任何变动，比如子节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。
但是MutationObserver只能监测到诸如属性改变、子结点变化等，对于自己本身被删除，是没有办法监听的，这里可以通过监测父结点来达到要求。监测代码的实现：

const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
if (MutationObserver) {
  let mo = new MutationObserver(function () {
    const __wm = document.querySelector('.__wm');
    // 只在__wm元素变动才重新调用 __canvasWM
    if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
      // 避免一直触发
      mo.disconnect();
      mo = null;
    __canvasWM(JSON.parse(JSON.stringify(args)));
    }
  });
 
  mo.observe(container, {
    attributes: true,
    subtree: true,
    childList: true
  })
}
 
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="info" onclick="alert(1)">
                123
        </div>
        <script>
           (function () {
              function __canvasWM({
                container = document.body,
                width = '300px',
                height = '200px',
                textAlign = 'center',
                textBaseline = 'middle',
                font = "20px Microsoft Yahei",
                fillStyle = 'rgba(184, 184, 184, 0.6)',
                content = '水印',
                rotate = '45',
                zIndex = 10000
              } = {}) {
                const args = arguments[0];
                const canvas = document.createElement('canvas');
        
                canvas.setAttribute('width', width);
                canvas.setAttribute('height', height);
                const ctx = canvas.getContext("2d");
        
                ctx.textAlign = textAlign;
                ctx.textBaseline = textBaseline;
                ctx.font = font;
                ctx.fillStyle = fillStyle;
                ctx.rotate(Math.PI / 180 * rotate);
                ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);
        
                const base64Url = canvas.toDataURL();
                const __wm = document.querySelector('.__wm');
        
                const watermarkDiv = __wm || document.createElement("div");
                const styleStr = `
                  position:fixed;
                  top:0;
                  left:0;
                  bottom:0;
                  right:0;
                  width:100%;
                  height:100%;
                  z-index:${zIndex};
                  pointer-events:none;
                  background-repeat:repeat;
                  background-image:url('${base64Url}')`;
        
                watermarkDiv.setAttribute('style', styleStr);
                watermarkDiv.classList.add('__wm');
        
                if (!__wm) {
                  container.style.position = 'relative';
                  container.insertBefore(watermarkDiv, container.firstChild);
                }
                
                const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
                if (MutationObserver) {
                  let mo = new MutationObserver(function () {
                    const __wm = document.querySelector('.__wm');
                    // 只在__wm元素变动才重新调用 __canvasWM
                    if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
                      // 避免一直触发
                      mo.disconnect();
                      mo = null;
                    __canvasWM(JSON.parse(JSON.stringify(args)));
                    }
                  });
        
                  mo.observe(container, {
                    attributes: true,
                    subtree: true,
                    childList: true
                  })
                }
        
              }
        
              if (typeof module != 'undefined' && module.exports) {  //CMD
                module.exports = __canvasWM;
              } else if (typeof define == 'function' && define.amd) { // AMD
                define(function () {
                  return __canvasWM;
                });
              } else {
                window.__canvasWM = __canvasWM;
              }
            })();
        
            // 调用
            __canvasWM({
              content: '水印123'
            });
        </script>
    </body>
</html>
东湖高新第一会所掌门人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS前端基于canvas给图片添加水印
01-18
前两天给个人网站添加了一个小功能，就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。 canvas元素其实就是一个画布，我们可以很方便地绘制一些文字、线条、图形等，它也可以将一个img标签里渲染的图片画在画布上。 在上传文件到后端的时候，使用input标签读取用户本地文件后得到的其实是一个Blob对象（更精确的说是File对象，特殊的Blob对象）；而在页面上展示一个图片使用的是img标签；绘制功能用canvas实现。添加水印的功能需要在img标签、ca
canvas添加页面水印
qq_41317414的博客
04-20 617
canvas添加水印，原生javaScript
通过canvas给图片添加水印
lay7889的博客
07-08 1694
通过canvas给图片添加水印
canvas 生成水印图片 加水印 剪切复制
web修理工
11-09 1094
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
canvas实现水印效果
老白干的zone
07-17 3951
canvas两种实现水印效果
前端添加水印的vue组件
12-15
这是一个添加水印的vue组件，支持传入富文本和标签。只需要传入你想添加的水印内容，会自动去计算水印的数量和大小。其他的完全不用你去关心。 ...另外如需在线预览文档，我同样也上传了相应的资源
黎明加水印小程序源码黎明加水印小程序源码 功能：支持从聊天记录选择文件、相机拍摄、直接选择文件 · 支持白底、 黑底 的隐形
03-14
黎明加水印小程序源码是一款专门用于添加水印的小程序应用，主要针对前端开发领域。其核心功能包括从多种来源获取图像并添加水印，同时提供了隐形水印的选项，增加了安全性和隐蔽性。 1. **文件选择方式**： - 从...
润普档案管理解决方案 (2).pdf
05-30
在档案安全管理策略中，系统采用 6 角色 7 级别的权限控制体系，包括文件夹和单个文档的权限控制，严格控制每一份档案的访问、查看标题、展现、打印、下载、修改、删除等。这使得档案的安全变得更加可靠和严格。 ...
前端必备的截屏取色小工具Faststone Capture
05-27
对于前端开发者而言，能够快速捕获网页元素的界面状态，便于记录问题或分享设计稿，是极为便利的。 其次，该软件的屏幕拾色器功能是前端设计中的得力助手。在网页设计中，颜色搭配至关重要。通过Faststone Capture...
discuz论坛开发文档
01-13
- **Fonts**：水印功能所需的字体文件。 - **Icons**：帖子主题图片。 - **Magics**：道具功能所需的图片。 - **Rank**：买家/卖家等级图片。 - **Secode**：验证码功能所需的图片。 - **Smilies**：表情图片...
使用Canvas实现页面水印
weixin_50543490的博客
06-08 1508
使用Canvas实现页面水印
利用html5canvas给图片增加文字水印
weixin_33924220的博客
10-12 631
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><canvas id='myCanva...
canvas实现给照片添加水印
最新发布
m0_56104994的博客
06-14 232
手动实现图片加水印
利用canvas给图片添加水印
weixin_52901235的博客
03-10 907
前两天给个人网站添加了一个小功能，就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。canvas元素其实就是一个画布，我们可以很方便地绘制一些文字、线条、图形等，它也可以将一个img标签里渲染的图片画在画布上。我们在上传文件到后端的时候，使用input标签读取用户本地文件后得到的其实是一个Blob对象（更精确的说是File对象，特殊的Blob对象）；利用canvas给图
canvas实现滚动条缩放图片的demo
我在明天的盼望
06-07 2983
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body style="background: black;"> canvas id="myCanvas" style="display: block;border: 10px solid #aaa;margin: 0 auto
canvas页面添加水印
weixin_43205185的博客
11-12 219
基于element的页面表格添加水印 'use strict' let watermark = {} /** 1、str: 水印文字（固定） 2、container：添加水印的容器（固定） 3、height：水印的高度（动态） 4、index：表格的序号（动态，可不传） 5、type：复杂逻辑下的状态值（动态，可不传） */ let setWatermark = (str, container, height, index = 0, type) => { let id = '1.23
canvas实现水印
qq_58355643的博客
10-26 514
canvas实现水印
Canvas实现添加水印
看陌生的风景的博客
07-23 665
function addWaterMarker(str) { var can = document.createElement('canvas'); var body = document.body; body.appendChild(can); can.width = 300; can.height = 3...
中文Word文档数字水印算法研究与实现
"这篇资源是大连理工大学康守权硕士的学位论文，研究的是基于中文Word文档的数字水印算法，旨在解决知识产权保护问题。论文探讨了数字水印技术在文本内容保护上的应用，特别是针对中文文档。" 正文: 随着信息技术的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值