参考资料

1. HTML 表单详解
2. HTML 视频(Videos)播放
3. HTML id 属性详解
4. HTML 表格高度和宽度
5. HTML 文本格式化
6. HTML 背景颜色
7. HTML 布局
8. Html转PHP代码有哪些

隐形水印嵌入技术详解

隐形水印嵌入技术详解（含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