显性水印和不可见数字水印

最新推荐文章于 2024-04-29 09:40:17 发布
最新推荐文章于 2024-04-29 09:40:17 发布
阅读量1.7k 收藏 8
点赞数
分类专栏： Web前端开发 文章标签： canvas html5 css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Crashyi/article/details/114386658
版权

显性水印和不可见数字水印

显性水印(代码见最后)

  1. 获取要绘制的画布所在元素

  2. 获取浏览器的dpr(devicePixelRatio),将画布的宽度和高度乘以dpr, 否则绘制出来的画布会变得模糊

  3. 创建Image元素开始绘制原始图片

  4. 绘制显性水印, 设置水印的样式, 水印位置设置在图片右下角

不可见数字水印
function getBitOffset(color):

获取RGB中某一分量对应的位和偏移量

图片编码
function encodeImg(src):

  1. 获取画布元素的Context

  2. 画布宽高乘以dpr(devicePixelRatio)

  3. 绘制水印, 使用getImageData()方法获得水印的像素信息

  4. 绘制图片, 使用getImageData()方法获得图片的像素信息

  5. 调用mergeData()方法合并像素信息

function mergeData(ctx, newData, color, originalData):

​ 1. 合并原始图片数据和数字水印的rgb数据.

​ 2. 对于规定的某一个RGB分量,

​ 采用将把没有水印信息的像素通过自增方式全改成偶数,

​ 把有水印信息的像素自增全改成奇数这种编码的方式编码图片

  1. 绘制合并后的图片
图片解码
function decodeImg(src,color):
  1. 同encodeImg()方法一样, 使用getImageData()方法获得图片的RGB信息
  2. 调用processData()方法
function processData(ctx, originalData,color):
  1. 解码的方式与编码的方式相反
  2. 将非指定的RGB分量的所有信息置0(像素点置黑)
  3. 对于指定的RGB分量, 将偶数部分(非水印信息)的信息置0, 其他信息置为255
  4. 对于alpha通道的信息不处理
结果如图

显性水印和不可见数字

代码

未解决跨域问题, 不可从外部直接打开html, 需从IDE打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>watermark</title>

</head>
<style>
    html{
        margin:0;
        padding: 0;
    }
    .app{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .canvas{
        height: 200px;
        width: 540px;
        margin-top: 50px;
    }
    img{
        height: 200px;
        width: 540px;
        margin-top: 50px;
    }

</style>
<body>
<div class="app">
    <img src="../images/1.jpg">
    <canvas class="canvas" id="canvas-mark"></canvas>
    <canvas class="canvas" id="encode-mark"></canvas>
    <canvas class="canvas" id="encode-image"></canvas>

</div>
<script>
        //绘制显性水印
        var canvas_mark=document.getElementById("canvas-mark")
        var dpr = (scale = window.devicePixelRatio || 1);
        var rect = canvas_mark.getBoundingClientRect();
        canvas_mark.width = rect.width * dpr;
        canvas_mark.height = rect.height * dpr;
        canvas_mark.style.width = rect.width + "px";
        canvas_mark.style.height = rect.height + "px";
        let ctx=canvas_mark.getContext('2d');
        let img = new Image();
        img.onload = function () {
            ctx.drawImage(img, 0, 0, canvas_mark.width, canvas_mark.height);
            const txt = '@ ChenYin';
            ctx.fillStyle = '#fff';
            ctx.globalAlpha = 1;
            ctx.font = `12px 微软雅黑 light`;
            ctx.textAlign = 'right';
            ctx.fillText(txt, canvas_mark.width - 10, canvas_mark.height - 10);
        }
        img.src="../images/1.jpg"

        //绘制数字水印和数字水印结果图

        //获取RGB中某一分量对应的位和偏移量
        function getBitOffset(color) {
            let bit, offset;

            switch (color) {
                case 'R':
                    bit = 0;
                    offset = 3;
                    break;
                case 'G':
                    bit = 1;
                    offset = 2;
                    break;
                case 'B':
                    bit = 2;
                    offset = 1;
                    break;
            }
            return [bit,offset];
        }

        //图片编码
        //合并原始图片数据和数字水印的rgb数据, 采用将把没有信息的像素全改成偶数, 把有信息的像素全改成奇数这种编码的方式
        function mergeData(ctx, newData, color, originalData) {
            let oData = originalData.data;

            let [bit,offset]=getBitOffset(color);

            for (var i = 0; i < oData.length; i++) {
                if (i % 4 == bit) {

                    // 只处理目标通道
                    //把没有信息的像素全改成偶数
                    if (newData[i + offset] === 0 && (oData[i] % 2 === 1)) {

                        if (oData[i] === 255) {
                            oData[i]--;
                        } else {
                            oData[i]++;
                        }
                        //把有信息的像素全改成奇数
                    } else if (newData[i + offset] !== 0 && (oData[i] % 2 === 0)) {
                        // // 有信息的像素，该通道最低位置1，可以想想上面的斑点效果是怎么实现的
                        oData[i]++;
                    }
                }
            }
            ctx.putImageData(originalData, 0, 0);


        }

        function encodeImg(src) {
            var textData;
            var can=document.getElementById('encode-mark');
            var dpr = (scale = window.devicePixelRatio || 1);
            var rect = canvas_mark.getBoundingClientRect();
            can.width = rect.width * dpr;
            can.height = rect.height * dpr;
            can.style.width = rect.width + "px";
            can.style.height = rect.height + "px";


            var ctx = can.getContext('2d');
            ctx.font = '30px Microsoft Yahei';
            ctx.fillText('ChenYin', 200, 120);
            textData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height).data;
            var img = new Image();
            // img.crossOrigin = '';
            var originalData;
            img.onload = function () {
                // 获取指定区域的canvas像素信息
                ctx.drawImage(img, 0, 0,can.width,can.height);
                originalData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
                mergeData(ctx, textData, 'G', originalData)
            };
            img.src = src;
        }

        //图片解码
        function processData(ctx, originalData,color) {
            let data = originalData.data;
            let [bit,offset]=getBitOffset(color);
            for (var i = 0; i < data.length; i++) {
                if (i % 4 == bit) {

                    if (data[i] % 2 == 0) {
                        data[i] = 0;
                    } else {
                        data[i] = 255;
                    }
                } else if (i % 4 == 3) {
                    continue;//alpha通道不处理
                } else {
                    data[i] = 0;
                }
            }
            // 将结果绘制到画布
            ctx.putImageData(originalData, 0, 0);
        }

        function decodeImg(src,color) {
            var encode_image = document.getElementById('encode-image')
            var dpr = (scale = window.devicePixelRatio || 1);
            var rect = canvas_mark.getBoundingClientRect();
            encode_image.width = rect.width * dpr;
            encode_image.height = rect.height * dpr;
            encode_image.style.width = rect.width + "px";
            encode_image.style.height = rect.height + "px";
            var ctx=encode_image.getContext('2d');
            var img = new Image();
            var originalData;
            img.onload = function () {
                // 获取指定区域的canvas像素信息
                ctx.drawImage(img, 0, 0);
                originalData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
                console.log(originalData)
                processData(ctx, originalData,color)
            };
            img.src = src;
        }
        encodeImg('../images/1.jpg');
        decodeImg('../images/1-encode.png','G');


</script>
</body>

</html>
慢慢dream
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python不可见水印,隐形水印
05-09
Python不可见水印,隐形水印
python隐藏水印_图像中不可见的水印
weixin_39581571的博客
12-06 693
我使用以下代码。它需要PIL：def reduceOpacity(im, opacity):"""Returns an image with reduced opacity."""assert opacity >= 0 and opacity <= 1if im.mode != 'RGBA':im = im.convert('RGBA')else:im = im.copy()alpha...
文件数字水印，附一种纯文本隐写术数字水印方法
XiaoCai
08-09 2568
数字水印（Digital Watermark）是一种在数字媒体文件中嵌入隐藏信息的技术。这些数字媒体可以是图片、音频、视频或文本等。数字水印不会对原始文件造成明显的视觉或听觉变化，但可以在一定程度上保护知识产权，追踪数据来源，或提供其他形式的认证和鉴别。数字水印可以分为可见水印和不可见水印：可见水印：这种水印是明显可见的，通常在图像的边缘或重要区域添加文字、图形或标志。可见水印通常用于版权信息或广告目的，并不用于隐藏机密信息。不可见水印：不可见水印是嵌入在媒体文件的低频部分或不易察觉的细微改动。
python实现数字水印简单运用（最低有效位算法）
最新发布
2301_81532920的博客
04-29 282
python 数字水印 最低有效位算法
盲水印(Blind-WaterMark)
热门推荐
m0_62207480的博客
09-19 2万+
盲水印是一种肉眼不可见的水印方式，对图片资源使用图片盲水印或者文字水印，借此避免数字媒体未经授权的复制和拷贝，可通过对原图进行解码操作，得到水印图来证明版权归属。
数据安全：基于不可见字符的文本水印技术
小白的专栏
12-02 4741
一、概述 信息媒体的数字化为信息的存取提供了极大的方便，越来越多的业务现在都是基于网络信息完成的。与此同时，信息的泄露，篡改，盗版等也困扰这很多公司以及个人。那么如何降低这些风险或者说泄露了信息如何溯源呢？数字水印技术则在这方面提供了一系列追溯的功能，可以追溯信息在那个环节泄露。 数字水印技术由很多，基于多媒体图片，音频以及视频等技术研究比较深入，受限制于文本的特性，单独对文本的数字水印技术研究比较少，一般需要结合特定的文本格式进行解析。 如下是比较常见的文本水印技术。 （1）基于普通文本文件格式信息的技术
栅格数据嵌入不可见水印的方法总结
weixin_30847939的博客
11-19 368
1.1.1 空间域算法 1.1.1.1 LSB算法（水印容量大，但是很脆弱） 将水印嵌入到到载体图像像素值得最低有效位，也称最不显著位，改变这一位置对载体图像的品质影响最小。 基本步骤： 将水印的十进制像素值转换为二进制水印数据； 二进制水印数据中的每一比特信息替换载体数据中的最低有效位。（嵌入水印） 在含有载体数据中的最低有效位二进制数据转换为十进制像素值，获得水印的图像...
C++ 实现屏幕水印
09-06
水印的透明度可以通过设置画刷的Alpha值来调整，以实现不同程度的可见性。 考虑到支持扩展屏幕，开发人员需要确保水印能够在每个显示器上独立显示。这意味着水印的位置和大小需要根据显示器的布局进行动态调整。这...
数字水印部分代码，C语言
08-28
数字水印可以被嵌入到原始数据中，形成不可见或微弱可见的标记，使得数据在被复制、传播时，仍然能够保留原始创作者的身份信息或者版权信息。这里提到的是一个使用C语言编写的数字水印部分代码，我们将深入探讨数字...
证件防盗用水印PSD
04-27
- 在某些国家和地区，数字水印被法律认可为证据，可用于证明图像的所有权和真实性。 5. **安全备份**： 描述中提到的“备份”意味着对于重要的证件设计文件，应进行妥善的存储和备份，防止数据丢失。这可能包括云...
WaterMark一款可以给你的图片添加看不见的文字水印俗称盲水印的工具.rar
04-29
软件介绍 WaterMake是一非常实用的水印制作工具，不进可以制作简单的文字水印，还可以制作盲水印，盲水印换句话就是隐形水印，别人无法看到的水印，但的确水印又存在水印，既美观又可以保护自己的作品，防止被一些人盗用自己的作品，而不说出来源，这非常侵犯作者的版权，所以为了保护作品通常都会在作品上添加水印，使用在视频，图片，艺术画等作品上面，但是水印又非常影响美观，使用隐形的水印就可以解决这个问题了，这款水印软件就可以帮助用户轻松制作隐形的盲水印，保护自己的版权同时又不影响作品的美观性，软件界面直观简单，无需任何学习，打开就可以快速上手使用，添加肉眼看不见的水印，遇到版权问题时就可以通过这个水印来保护自身作品的版权，两种水印供大家选择，选择图片水印或者是文字水印，可以旋转角度，提取亮度等，设置水印的强度 软件特色 1、可以通过对图像添加肉眼看不见的水印，便于追溯图片来源 2、直观的用户界面，无需进行学习，打开就能上手 3、水印具有一定的隐秘性，抗破坏能力，且基本不破坏原图图像 软件功能 1、支持目前绝大部分图像格式，无需借助其他软件进行图像格式的转换; 2、采用PNG格式无损压缩
一种基于WEB图像版权的可见&不可见水印算法
03-12
一种基于WEB图像版权的可见&不可见水印算法，陈莹，王晓宁，本论文通过对网络上数字图像安全的分析，针对数字图像易于被拷贝和被篡改的现象，提出了网络上数字图像的水印方案。该数字水印以
图像数字水印的JAVA实现
11-30
java语言实现数字图像水印，讲解地道，无论是java爱好者还是C++学习者，都适合，思路清晰，语言精练
隐性水印.rar
09-17
隐性水印技术是一种数字媒体保护手段，它主要用于在图像、视频或音频文件中嵌入不可见的信息，这些信息可能是所有权标识、版权信息或者特定的追踪...对于想要学习和研究数字水印技术的人来说，这是一个有价值的资源。
提取水印.rar
09-17
总的来说，这个项目涉及了数字水印技术、图像处理、编程和软件开发等多个IT领域的知识点，为研究和实践提供了有价值的参考。通过深入理解和运用这些知识，可以构建更复杂、安全的数字水印解决方案。
windows显性的屏幕水印c++
06-07
要在 Windows 屏幕上显示水印，你可以使用 C++ 编写一个程序，并利用 Windows API 函数来实现这一功能。下面是一个简单的示例代码： ```c++ #include <windows.h> // 水印文本 const wchar_t* watermarkText = L"这是一个水印"; // 水印文本颜色 const COLORREF watermarkColor = RGB(255, 0, 0); // 水印文本字体 const wchar_t* watermarkFontName = L"Arial"; const int watermarkFontSize = 16; int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow) { // 获取屏幕尺寸 int screenWidth = GetSystemMetrics(SM_CXSCREEN); int screenHeight = GetSystemMetrics(SM_CYSCREEN); // 创建设备上下文 HDC hdcScreen = GetDC(NULL); HDC hdcMem = CreateCompatibleDC(hdcScreen); HBITMAP hBitmap = CreateCompatibleBitmap(hdcScreen, screenWidth, screenHeight); HBITMAP hBitmapOld = (HBITMAP)SelectObject(hdcMem, hBitmap); // 绘制水印文本 HFONT hFont = CreateFont(watermarkFontSize, 0, 0, 0, FW_NORMAL, FALSE, FALSE, FALSE, DEFAULT_CHARSET, OUT_DEFAULT_PRECIS, CLIP_DEFAULT_PRECIS, DEFAULT_QUALITY, DEFAULT_PITCH | FF_SWISS, watermarkFontName); HFONT hFontOld = (HFONT)SelectObject(hdcMem, hFont); SetTextColor(hdcMem, watermarkColor); SetBkMode(hdcMem, TRANSPARENT); TextOut(hdcMem, screenWidth / 2, screenHeight / 2, watermarkText, wcslen(watermarkText)); SelectObject(hdcMem, hFontOld); DeleteObject(hFont); // 将设备上下文中的位图绘制到屏幕上 BitBlt(hdcScreen, 0, 0, screenWidth, screenHeight, hdcMem, 0, 0, SRCCOPY); // 清理资源 SelectObject(hdcMem, hBitmapOld); DeleteObject(hBitmap); DeleteDC(hdcMem); ReleaseDC(NULL, hdcScreen); return 0; } ``` 这个示例程序会在屏幕中央绘制一个红色的 Arial 16 号字体的文本“这是一个水印”。你可以根据自己的需要修改水印文本、颜色和字体等参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值