首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >隐形水印嵌入技术详解

隐形水印嵌入技术详解

作者头像
西里网
发布2025-07-10 15:21:43
发布2025-07-10 15:21:43
17400
代码可运行
举报
文章被收录于专栏:西里网CSDN博客西里网CSDN博客
运行总次数:0
代码可运行
参考资料

  1. HTML 文本对齐方式
  2. HTML 符号实体
  3. HTML 用于联系信息的
  4. HTML 用于著作标题的
  5. HTML 有序列表
  6. HTML 注释
  7. HTML 表格表头单元格
  8. HTML 数学符号

隐形水印嵌入技术详解(含HTML代码示例)

1. 图片水印技术

1.1 频域水印(DCT变换)
代码语言:javascript
代码运行次数:0
运行
复制
  1. <!-- 客户端JavaScript实现DCT水印 -->
  2. <script>
  3. // 使用canvas处理图像
  4. function embedDCTWatermark(imageData, watermarkText) {
  5. const blockSize = 8;
  6. const strength = 5; // 水印强度
  7. // 转换为灰度图像并分块
  8. for(let y=0; y<imageData.height; y+=blockSize) {
  9. for(let x=0; x<imageData.width; x+=blockSize) {
  10. // 对每个8x8块进行DCT变换
  11. // 在中频系数嵌入水印信息
  12. // 逆DCT变换回空域
  13. }
  14. }
  15. return watermarkedData;
  16. }
  17. </script>
1.2 LSB水印(最低有效位)
代码语言:javascript
代码运行次数:0
运行
复制
  1. <!-- 使用canvas的像素操作 -->
  2. <canvas id="watermarkCanvas"></canvas>
  3. <script>
  4. function embedLSBWatermark(image, watermark) {
  5. const canvas = document.getElementById('watermarkCanvas');
  6. const ctx = canvas.getContext('2d');
  7. ctx.drawImage(image, 0, 0);
  8. const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  9. const data = imageData.data;
  10. // 将水印转换为二进制
  11. const binaryWatermark = stringToBinary(watermark);
  12. let wmIndex = 0;
  13. // 在RGB通道的LSB嵌入
  14. for(let i=0; i<data.length; i+=4) {
  15. if(wmIndex < binaryWatermark.length) {
  16. // 红色通道LSB
  17. data[i] = (data[i] & 0xFE) | parseInt(binaryWatermark.charAt(wmIndex++));
  18. }
  19. // 可继续嵌入到绿色和蓝色通道
  20. }
  21. ctx.putImageData(imageData, 0, 0);
  22. return canvas.toDataURL();
  23. }
  24. </script>

2. 文本水印技术

2.1 不可见Unicode字符
代码语言:javascript
代码运行次数:0
运行
复制
  1. <!-- 在文本中插入零宽度字符 -->
  2. <script>
  3. function embedTextWatermark(originalText, userId) {
  4. // 将用户ID转换为零宽度Unicode序列
  5. const zeroWidthChars = ['\u200B', '\u200C', '\u200D', '\uFEFF'];
  6. let watermarkedText = originalText;
  7. let binaryId = userId.toString(2);
  8. // 每2位用一个零宽度字符表示
  9. for(let i=0; i<binaryId.length; i+=2) {
  10. const bits = binaryId.substr(i, 2);
  11. const zIndex = parseInt(bits, 2);
  12. watermarkedText += zeroWidthChars[zIndex];
  13. }
  14. return watermarkedText;
  15. }
  16. </script>
2.2 CSS微调水印
代码语言:javascript
代码运行次数:0
运行
复制
  1. <style>
  2. .watermarked {
  3. letter-spacing: 0.1px; /* 正常间距 */
  4. }
  5. .watermarked::after {
  6. content: "\200B\200C\200D"; /* 零宽度字符 */
  7. font-size: 0;
  8. }
  9. </style>
  10. <script>
  11. function applyTextWatermark(elementId, watermark) {
  12. const element = document.getElementById(elementId);
  13. element.classList.add('watermarked');
  14. // 通过伪元素添加不可见水印
  15. const style = document.createElement('style');
  16. style.textContent = `#${elementId}::after {
  17. content: "${stringToUnicode(watermark)}";
  18. }`;
  19. document.head.appendChild(style);
  20. }
  21. </script>

3. 水印检测代码

代码语言:javascript
代码运行次数:0
运行
复制
  1. <script>
  2. // 检测图片LSB水印
  3. function detectLSBWatermark(imageData) {
  4. let binary = '';
  5. const data = imageData.data;
  6. for(let i=0; i<data.length; i+=4) {
  7. // 提取红色通道LSB
  8. binary += (data[i] & 1).toString();
  9. if(binary.length % 8 === 0) {
  10. const char = binaryToChar(binary.substr(-8));
  11. if(char === '\0') break; // 假设以null字符结束
  12. }
  13. }
  14. return binaryToString(binary);
  15. }
  16. // 检测文本零宽度水印
  17. function detectTextWatermark(text) {
  18. const zeroWidthRegex = /[\u200B-\u200D\uFEFF]+/g;
  19. const matches = text.match(zeroWidthRegex);
  20. if(!matches) return null;
  21. let binary = '';
  22. matches
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-07-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 参考资料
  • 隐形水印嵌入技术详解(含HTML代码示例)
    • 1. 图片水印技术
      • 1.1 频域水印(DCT变换)
      • 1.2 LSB水印(最低有效位)
    • 2. 文本水印技术
      • 2.1 不可见Unicode字符
      • 2.2 CSS微调水印
    • 3. 水印检测代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档