likes
comments
collection
share

暗水印的实现思路分享

作者站长头像
站长
· 阅读数 35

先贴上完整demo地址

前言

随着数字媒体的普及，以及信息共享的广泛应用，如何保护数字媒体的版权成为了一个重要的问题。其中，数字水印技术作为一种可靠的技术手段被广泛使用。它通过在数字媒体中嵌入不可见的信息来识别和保护版权，其中“暗水印”是一种常见的水印技术。在本文中，我将介绍如何在前端实现暗水印的问题。

什么是暗水印？

暗水印是一种不可见的数字水印技术，它将一些标识信息嵌入到数字媒体中，而不影响媒体本身的质量和内容。与可见的水印不同，暗水印不能直接被看到，但可以通过特定的算法进行提取。这种技术可以用于版权保护、数字身份验证等领域。

暗水印的实现

暗水印的实现可以分为以下几个步骤：

  1. 选择水印信息

在实现暗水印之前，首先需要选择要嵌入的信息。这可以是任何内容，例如版权信息、作者信息等。在选择信息时，需要考虑到信息的长度、可读性以及水印算法的限制等因素。

  1. 选择算法

选择合适的算法是实现暗水印的关键。暗水印的算法通常需要满足以下几个条件：

  • 算法应该具有较高的安全性，以防止水印被恶意篡改或删除。
  • 算法应该对数字媒体的质量和内容没有影响。
  • 算法应该能够提供较高的鲁棒性（Robust的音译，也就是健壮和强壮），以防止水印被一些常见的攻击方式（例如压缩、裁剪、旋转等）破坏。
  • 算法应该能够实现快速的水印嵌入和提取。

常见的暗水印算法包括频域水印、时域水印、量化水印等。

  1. 实现嵌入算法

实现嵌入算法是实现暗水印的关键。算法的主要目标是在不影响数字媒体质量和内容的情况下，将水印信息嵌入到数字媒体中。算法通常需要先对数字媒体进行一些预处理，然后将水印信息嵌入到数字媒体的某些特征中，例如像素值、频域系数等。

  1. 实现提取算法

实现提取算法是从嵌入了暗水印的数字媒体中提取出水印信息的过程。提取算法的主要目标是能够准确、快速地提取出嵌入的水印信息，并且不受到攻击的影响。提取算法通常需要先对数字媒体进行一些预处理，然后通过一些特定的算法，提取出嵌入的水印信息。

  1. 实现前端显示

一旦嵌入和提取算法实现后，我们需要将其应用到前端的显示中。这可以通过以下几种方式实现：

  • 嵌入水印：在前端显示数字媒体时，将水印信息嵌入到数字媒体中，然后将嵌入了水印的数字媒体呈现给用户。
  • 提取水印：在前端显示数字媒体时，通过特定的算法提取数字媒体中的水印信息，然后将提取出的水印信息呈现给用户。

前端暗水印的代码实现

下面我们以 JavaScript 为例，展示如何实现前端暗水印的代码实现。首先我们需要选择一个合适的暗水印算法。在这里，我们选择一种基于哈希函数的暗水印算法。这种算法的基本思想是将水印信息哈希成一个数字，然后将这个数字嵌入到数字媒体中。在提取水印时，我们可以通过计算数字媒体的哈希值，然后比较它与嵌入的水印信息的哈希值是否一致，从而确定数字媒体中是否嵌入了水印信息。

以下是基于哈希函数的暗水印算法的实现代码：


  function hash(text) {
            var hash = 0, i, chr;
            if (text.length === 0) return hash;
            for (i = 0; i < text.length; i++) {
                chr = text.charCodeAt(i);
                hash = ((hash << 5) - hash) + chr;
                hash |= 0;
            }
            return hash;
        }

        function embedWatermark(image, hashValue) {
            var pixels = image.data;
            var pixelIndex = 0;
            for (var i = 0; i < 32; i++) {
                var bitValue = (hashValue >> i) & 1;
                var pixelValue = pixels[pixelIndex];
                var newPixelValue = pixelValue & 254 | bitValue;
                pixels[pixelIndex] = newPixelValue;
                pixelIndex += 4;
            }
        }

        function extractWatermark(image) {
            var pixels = image.data;
            var pixelIndex = 0;
            var hashValue = 0;
            for (var i = 0; i < 32; i++) {
                var bitValue = pixels[pixelIndex] & 1;
                hashValue |= bitValue << i;
                pixelIndex += 4;
            }
            return hashValue;
        }

这段代码实现了基于哈希函数的暗水印算法的嵌入和提取过程。在嵌入过程中，我们首先计算水印信息的哈希值，然后将哈希值的每一位嵌入到数字媒体的像素值中。在提取过程中，我们从数字媒体的固定像素值中提取出嵌入的哈希值，然后比较提取出的哈希值和原哈希值是否一致，从而确定数字媒体中是否嵌入了水印信息。

接下来，我们将这段代码应用到前端的显示中。我们可以在 HTML 中创建一个 canvas 元素，然后在 JavaScript 中获取它的上下文对象。在获取上下文对象之后，我们可以将数字媒体绘制到 canvas 中，并调用嵌入和提取算法来嵌入和提取水印信息。以下是在 canvas 中实现暗水印的代码示例：

<!DOCTYPE html>
<html>

<head>
    <title>Watermarking Example</title>
</head>

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <div id="watermark"></div>

    <script>
        function hash(text) {
            var hash = 0, i, chr;
            if (text.length === 0) return hash;
            for (i = 0; i < text.length; i++) {
                chr = text.charCodeAt(i);
                hash = ((hash << 5) - hash) + chr;
                hash |= 0;
            }
            return hash;
        }

        function embedWatermark(image, hashValue) {
            var pixels = image.data;
            var pixelIndex = 0;
            for (var i = 0; i < 32; i++) {
                var bitValue = (hashValue >> i) & 1;
                var pixelValue = pixels[pixelIndex];
                var newPixelValue = pixelValue & 254 | bitValue;
                pixels[pixelIndex] = newPixelValue;
                pixelIndex += 4;
            }
        }

        function extractWatermark(image) {
            var pixels = image.data;
            var pixelIndex = 0;
            var hashValue = 0;
            for (var i = 0; i < 32; i++) {
                var bitValue = pixels[pixelIndex] & 1;
                hashValue |= bitValue << i;
                pixelIndex += 4;
            }
            return hashValue;
        }

        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var image = new Image();
        image.src = './1.png';
        image.onload = function () {
            canvas.width = image.width;
            canvas.height = image.height;
            context.drawImage(image, 0, 0);
            var watermark = "Hello, World!";
            var hashValue = hash(watermark)
            // getImageData 提取图片像素信息
            var imageData = context.getImageData(0, 0, canvas.width, canvas.height)
            embedWatermark(imageData, hashValue);
            // putImageData 重新绘制imageData
            context.putImageData(imageData, 0, 0);
            var extractedWatermarkValue = extractWatermark(context.getImageData(0, 0, canvas.width, canvas.height), hashValue);
            document.getElementById('watermark').innerHTML = `
            watermark : ${watermark} </br>
            embed hash value : " + ${hashValue} </br>
            extracted watermark hash value : ${extractedWatermarkValue}
            `
        };

    </script>
</body>

</html>

以上代码的实现过程如下：

  1. 首先，我们在 HTML 中创建一个 canvas 元素，并在 JavaScript 中获取它的上下文对象：
<canvas id="canvas"></canvas>

<script>
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
</script>
  1. 然后，我们创建一个 Image 对象，并将数字媒体的 URL 赋值给它的 src 属性。在图像加载完成后，我们可以获取图像的宽度和高度，将 canvas 的宽度和高度设置为图像的宽度和高度，并将图像绘制到 canvas 上：
<canvas id="canvas"></canvas>

<script>
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");

  var image = new Image();
  image.src = "./1.png";
  image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;
    context.drawImage(image, 0, 0);
  };
</script>
  1. 现在，我们可以调用嵌入和提取算法来嵌入和提取水印信息。在此示例中，我们使用字符串 "Hello, World!" 作为水印信息：
<canvas id="canvas"></canvas>

<script>
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");

  var image = new Image();
  image.src = ".1/png";
  image.onload = function () {
            canvas.width = image.width;
            canvas.height = image.height;
            context.drawImage(image, 0, 0);
            var watermark = "Hello, World!";
            var hashValue = hash(watermark)
            // getImageData 提取图片像素信息
            var imageData = context.getImageData(0, 0, canvas.width, canvas.height)
            embedWatermark(imageData, hashValue);
            // putImageData 重新绘制imageData
            context.putImageData(imageData, 0, 0);
            var extractedWatermarkValue = extractWatermark(context.getImageData(0, 0, canvas.width, canvas.height), hashValue);
            document.getElementById('watermark').innerHTML = `
            watermark : ${watermark} </br>
            embed hash value : " + ${hashValue} </br>
            extracted watermark hash value : ${extractedWatermarkValue}
            `
        };
</script>

在这段代码中，我们首先调用 embedWatermark 函数来嵌入水印信息。该函数接受两个参数：数字媒体的像素数据和水印信息哈希值。在嵌入过程中，我们首先将哈希值的每一位嵌入到数字媒体的像素值中。最后，我们将处理后的像素数据设置为 canvas 的像素数据。

接下来，我们调用 extractWatermark 函数来提取嵌入的水印信息。该函数接受一个参数：数字媒体的像素数据。在提取过程中，我们从数字媒体的像素值中提取出嵌入的哈希值，然后比较提取出的哈希值和原来的哈希值是否一致，从而确定数字媒体中是否嵌入了水印信息。

  1. 将嵌入的水印信息可视化

为了演示嵌入的水印信息，我们可以将嵌入的水印信息渲染到数字媒体上。具体来说，我们可以创建一个简单的dom对象，并将嵌入的水印信息渲染到该元素中：

document.getElementById('watermark').innerHTML = `
            watermark : ${watermark} </br>
            embed hash value : " + ${hashValue} </br>
            extracted watermark hash value : ${extractedWatermarkValue}
            `

注意：在实际应用中，可能需要对提取出的水印信息进行处理，例如将其转换为数字或字符串形式，以便进行更进一步的处理。

结尾

至此，我们已经实现了在前端使用 JavaScript 嵌入和提取暗水印的过程，并将提取出的水印信息可视化。然而，由于前端嵌入和提取暗水印的算法较为简单，容易被攻击者破解，因此在实际应用中，应当结合后端算法来提高安全性。 希望本文能对你有所帮助！

再贴一遍 demo地址

转载自:https://juejin.cn/post/7202519872303874109
评论
请登录