隐形水印嵌入技术详解

参考资料

1. HTML开发者工具禁用技术实现
2. 不同浏览器的禁用方法
3. HTML 数学符号
4. HTML 标题
5. 如何在Electron应用中禁用开发者工具？
6. HTML 表格背景
7. html链接标签详细说明以及案例
8. Html转义工具有哪些

隐形水印嵌入技术详解

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

1. 图片水印技术

1.1 频域水印（DCT变换）

<!-- 客户端JavaScript实现DCT水印 --><script>// 使用canvas处理图像function embedDCTWatermark(imageData, watermarkText) {  const blockSize = 8;  const strength = 5; // 水印强度    // 转换为灰度图像并分块  for(let y=0; y<imageData.height; y+=blockSize) {    for(let x=0; x<imageData.width; x+=blockSize) {      // 对每个8x8块进行DCT变换      // 在中频系数嵌入水印信息      // 逆DCT变换回空域    }  }  return watermarkedData;}</script>

1.2 LSB水印（最低有效位）

<!-- 使用canvas的像素操作 --><canvas id="watermarkCanvas"></canvas><script>function embedLSBWatermark(image, watermark) {  const canvas = document.getElementById('watermarkCanvas');  const ctx = canvas.getContext('2d');  ctx.drawImage(image, 0, 0);    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);  const data = imageData.data;    // 将水印转换为二进制  const binaryWatermark = stringToBinary(watermark);  let wmIndex = 0;    // 在RGB通道的LSB嵌入  for(let i=0; i<data.length; i+=4) {    if(wmIndex < binaryWatermark.length) {      // 红色通道LSB      data[i] = (data[i] & 0xFE) | parseInt(binaryWatermark.charAt(wmIndex++));    }    // 可继续嵌入到绿色和蓝色通道  }    ctx.putImageData(imageData, 0, 0);  return canvas.toDataURL();}</script>

2. 文本水印技术

2.1 不可见Unicode字符

<!-- 在文本中插入零宽度字符 --><script>function embedTextWatermark(originalText, userId) {  // 将用户ID转换为零宽度Unicode序列  const zeroWidthChars = ['\u200B', '\u200C', '\u200D', '\uFEFF'];  let watermarkedText = originalText;  let binaryId = userId.toString(2);    // 每2位用一个零宽度字符表示  for(let i=0; i<binaryId.length; i+=2) {    const bits = binaryId.substr(i, 2);    const zIndex = parseInt(bits, 2);    watermarkedText += zeroWidthChars[zIndex];  }    return watermarkedText;}</script>

2.2 CSS微调水印

<style>.watermarked {  letter-spacing: 0.1px; /* 正常间距 */} .watermarked::after {  content: "\200B\200C\200D"; /* 零宽度字符 */  font-size: 0;}</style> <script>function applyTextWatermark(elementId, watermark) {  const element = document.getElementById(elementId);  element.classList.add('watermarked');    // 通过伪元素添加不可见水印  const style = document.createElement('style');  style.textContent = `#${elementId}::after {     content: "${stringToUnicode(watermark)}";  }`;  document.head.appendChild(style);}</script>

3. 水印检测代码

<script>// 检测图片LSB水印function detectLSBWatermark(imageData) {  let binary = '';  const data = imageData.data;    for(let i=0; i<data.length; i+=4) {    // 提取红色通道LSB    binary += (data[i] & 1).toString();    if(binary.length % 8 === 0) {      const char = binaryToChar(binary.substr(-8));      if(char === '\0') break; // 假设以null字符结束    }  }    return binaryToString(binary);} // 检测文本零宽度水印function detectTextWatermark(text) {  const zeroWidthRegex = /[\u200B-\u200D\uFEFF]+/g;  const matches = text.match(zeroWidthRegex);    if(!matches) return null;    let binary = '';  matches