关于前端如何使用JavaScript实现简单版的“数字水印”也叫隐写术

原创 野人  2021-11-08 09:01  阅读 179 次

继上次写了个WordPress下实现了“数字水印”,因为WordPress里面用到的是PHP语言,那就暂且叫实现了PHP版的“数字水印”吧(这样的显的高大上吧,哈哈)。

其实,实际上在实践中,我是先开发了JavaScript的“数字水印”,随后才完成了PHP版“数字水印”,但是发文章的时候,因为具体落实到网站的实现方案是采用了PHP写的,所以就先写了PHP的“数字水印”文章了。

毕竟这块放在前端做的话,其实挺不合理的,尤其对于大文件,读取,随后还要进行切割,重新组装成新的数据流发送给后端,这样的对于浏览器,用户体验的“代价”是挺大的,所以最终也决定有后端来做,具体大家看下前和后端的代码就知道区别了。

下面就给大家献丑了,我写的JavaScript版的“数字水印”也叫隐写术(配合计算字节长度文章,食用更佳,链接下方有),代码如下;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪数字水印(隐写术)</title>
  </head>

  <body>
    <input type="file" onchange="fileOnChange(this)" />
    <script>
      function fileOnChange(ele) {
        let file = ele.files[0];
        let fileReader = new FileReader();
        fileReader.readAsArrayBuffer(file);
        fileReader.onload = function (e) {
          //请注意,这个TextEncoder是有兼容性问题的
          let encode = new TextEncoder();
          let addInfo = "yerenwz.com"; //隐藏的信息
          let blob = new Blob(
            [e.target.result, encode.encode(addInfo).buffer],
            {
              type: "image/jpeg",
            }
          );
          const a = document.createElement("a");
          a.href = URL.createObjectURL(blob);
          a.download = "新图片.jpg"; // 这里填保存成的文件名
          a.click();
          URL.revokeObjectURL(a.href);//及时释放资源
        };
      }
    </script>
  </body>
</html>

相关文章推荐;

早上看了篇“数字水印”的相关文章,于是写了个简陋水印代码。

分享关于在前端如何使用JavaScript正确计算输入的文字字节数

本文地址:https://www.yerenwz.com/5080.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论