html5游戏图片加密,前端使用canvas生成盲水印的加密解密的实现

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

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

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

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

var canvas = document.getElementById("myCanvas")

var ctx = canvas.getContext("2d")

var img = new Image();

var textData,originalData;

img.src = './codeImg.png'

//图片加载完成

img.onload = function(){

//设置画布宽高为图片宽高

canvas.width = img.width;

canvas.height = img.height;

//设置水印字体

ctx.font = '30px Microsoft Yahei';

//由于图片宽度固定为800，我们需要在每