继上次写了个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>
相关文章推荐；