西里网
隐形水印嵌入技术详解
关注作者
腾讯云
开发者社区
文档
建议反馈
控制台
登录/注册
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
搜索
搜索
关闭
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
西里网
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页
>
专栏
>
隐形水印嵌入技术详解
隐形水印嵌入技术详解
西里网
关注
发布于 2025-07-10 15:21:43
发布于 2025-07-10 15:21:43
174
0
0
代码可运行
举报
文章被收录于专栏:
西里网CSDN博客
西里网CSDN博客
运行总次数:0
代码可运行
参考资料
HTML 文本对齐方式
HTML 符号实体
HTML 用于联系信息的
HTML 用于著作标题的
HTML 有序列表
HTML 注释
HTML 表格表头单元格
HTML 数学符号
隐形水印嵌入技术详解(含HTML代码示例)
1. 图片水印技术
1.1 频域水印(DCT变换)
代码语言:
javascript
代码
运行次数:0
运行
复制
<!-- 客户端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水印(最低有效位)
代码语言:
javascript
代码
运行次数:0
运行
复制
<!-- 使用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字符
代码语言:
javascript
代码
运行次数:0
运行
复制
<!-- 在文本中插入零宽度字符 -->
<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微调水印
代码语言:
javascript
代码
运行次数:0
运行
复制
<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. 水印检测代码
代码语言:
javascript
代码
运行次数:0
运行
复制
<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
本文参与
腾讯云自媒体同步曝光计划
,分享自作者个人站点/博客。
原始发表:2025-07-10,如有侵权请联系
cloudcommunity@tencent.com
删除
前往查看
script
二进制
html
canvas
data
本文分享自
作者个人站点/博客
前往查看
如有侵权,请联系
cloudcommunity@tencent.com
删除。
本文参与
腾讯云自媒体同步曝光计划
,欢迎热爱写作的你一起参与!
script
二进制
html
canvas
data
评论
登录
后参与评论
0 条评论
热度
最新
推荐阅读
目录
参考资料
隐形水印嵌入技术详解(含HTML代码示例)
1. 图片水印技术
1.1 频域水印(DCT变换)
1.2 LSB水印(最低有效位)
2. 文本水印技术
2.1 不可见Unicode字符
2.2 CSS微调水印
3. 水印检测代码
领券
问题归档
专栏文章
快讯文章归档
关键词归档
开发者手册归档
开发者手册 Section 归档
0
0
0
推荐