前端使用canvas生成盲水印的加密解密的实现

为了保障信息安全，防止重大信息泄露，并且能够锁定泄露用户，需要对页面展示的图片加入当前用户信息的盲水印，即最终图片外观看起来和原图一样，但是经过解码以后可以识别出水印信息，并且在截图后仍能进行较好的识别。

经过在网上的学习摸索，看了几位大神的博客以后，我也总结一下自己的代码，分享一下学习经验。

我们将使用以下图片作为原图进行示范：

下面是图片添加盲水印的代码：

至此，我们在页面上绘制出了带有盲水印的图片，我们先看看解码前后对比效果：

以下是右键另存为的图片及解码后的图片，受色彩识别度的误差影响，会有部分图片内容也被识别成水印内容，不过还是可以比较清晰看到水印文字

以下是使用屏幕截图的图片及解码图片：截图后的图片仍然能够识别出水印信息

接下来是水印解码的js代码：

现在，我们基本已经完成了前期预计的盲水印效果，但是，前端的安全处理还是会有隐患，比如打开控制台，即可获取到原图的链接地址，并可以直接保存。

所以若要更好的保障信息安全，这个添加盲水印的方法在后端去处理可能更加有效。

本文算法内容参考自： https://www.iwyv.com/d/files/20220205/0jg1bj5lfpi

到此这篇关于前端使用canvas生成盲水印的加密解密的实现的文章就介绍到这了,更多相关canvas生成盲水印加密解密内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章，希望大家以后多多支持潘少俊衡！