前端网站隐形水印的实现+zero-width-detection

关注

原创 2022-04-07 15:51:46 2.2k 阅读 AI 写同款· GEO 优化 ›

前端实现水印效果的多种方案本文介绍了几种前端水印方案，大家可以根据具体项目选择适合的方法来实现水印效果。在这个示例中，我们创建了一个Canvas元素，并使用JavaScript来绘制水印。你可以根据需要配置水印的文本、字体、颜色等属性，并使用库提供的方法进行初始化和加载。这种方法适用于需要在整个页面或特定元素上添加水印的情况，且不需要通过Canvas来绘制水印。在这个示例中，我们使用SVG（可缩放矢量图形）来创建水印。使用CSS来添加重复水印的方法是将水印图片作为背景图片，并使用。在这个示例中，我们创建了一个包含水印的容器元素。阅读详情

1.将字符串转成二进制
函数：

// 每个字符转为二进制,用空格分隔
    const textToBinary = username => (
      username
      .split('')
      // charCodeAt 将字符转成相应的 Unicode 码值
      .map(char => char.charCodeAt(0).toString(2))
      .join(' ')
    );

textToBinary(“教师节快乐”)
在这里插入图片描述
2.将0,1转为零度字符串：

1 转换为 \u200b 零宽度字符（zero-width space）
0 转换为 \u200c 零宽度断字符（zero-width non-joiner）
其他（空格）转换为 \u200d 零宽度连字符 (zero-width joiner)
最后使用 \ufeff 零宽度非断空格符 (zero width no-break space) 作为分隔符

const binaryToZeroWidth = binary => (
  binary.split('').map((binaryNum) => {
    const num = parseInt(binaryNum, 10);
    if (num === 1) {
      return '\u200b'; // \u200b 零宽度字符（zero-width space）
    } else if(num===0) {
      return '\u200c'; // \u200c 零宽度断字符（zero-width non-joiner）
    }
    return '\u200d'; // \u200d 零宽度连字符 (zero-width joiner)

  }).join('\ufeff') // \ufeff 零宽度非断空格符 (zero width no-break space)
);

3.最终程序：

const encode = username => {
  const binaryUsername = textToBinary(username);
  const zeroWidthUsername = binaryToZeroWidth(binaryUsername);
  return zeroWidthUsername;
};

4.转化

在这里插入图片描述
直接复制可以用unicod查看

5.解密

const zeroWidthToBinary = string => (
  string.split('\ufeff').map((char) => { // \ufeff 零宽度非断空格符 (zero width no-break space)
    if (char === '\u200b') { // \u200b 零宽度字符（zero-width space）
      return '1';
    } else if(char === '\u200c') { // \u200c 零宽度断字符（zero-width non-joiner）
      return '0';
    }
    return ' ';
  }).join('')
);

const binaryToText = string => (
  // fromCharCode 二进制转化
  string.split(' ').map(num => String.fromCharCode(parseInt(num, 2))).join('')
);

const decode = zeroWidthUsername => {
  const binaryUsername = zeroWidthToBinary(zeroWidthUsername);
  const textUsername = binaryToText(binaryUsername);
  return textUsername;
};

参考：
https://github.com/umpox/zero-width-detection

python 将视频的图片转为字符

# coding: utf8
import cv2 as cv
import os
import time
# 替换字符列表
ascii_char = list(r"$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\|()1{}[]?-_+~<>i!lI;:,\"^`'. ")
char_len = len(ascii_char)
# 加载视频
cap = cv.VideoCapture('video.mp4')
while True:
    # 读取视频每一帧
    hasFrame, frame = cap.read()
    if not hasFrame:
        break
    # 视频长宽
    width = frame.shape[0]
    height = frame.shape[1]
    # 转灰度图
    img_gray = cv.cvtColor(frame, cv.COLOR_BGR2GRAY)
    # 缩小图片并调整长宽比
    img_resize = cv.resize(img_gray, (int(width / 10), int(height / 10)))

    text = ''
    # 遍历图片中的像素
    for row in img_resize:
        for pixel in row:
            # 根据像素值，选取对应的字符
            text += ascii_char[int(pixel / 256 * char_len)]
        text += '\n'
    # 清屏
    os.system('cls')  # mac是'clear'
    # 输出生成的字符方阵
    print(text)
    # 适当暂停一下
    time.sleep(0.03)