canvas添加水印,

　　为了保证信息安全，防止重大信息泄露，锁定泄露用户，需要在页面显示的图片中加入当前用户信息的盲水印，即最终图片看起来和原图一样，但解码后水印信息可以识别，截图后仍然可以很好的识别。

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

　　我们将使用以下图片作为演示的原始图像：

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

　　script var canvas=document . getelementbyid( my canvas )var CTX=canvas . get context( 2d )var img=new Image()；var textData，originalDataImg.src=。/codeImg.png //图像加载完成。img.onload=function(){ //将画布宽度设置为图像宽度canvas . width=img . width；canvas . height=img . height；//设置水印字体ctx.font=30px微软雅黑；//由于图片的宽度固定为800，我们需要在每行添加三个水印，每100个像素添加一个新的水印(var I=50Ican vas . height；I=100){ ctx.fillText(周杰伦，100，I)；Ctx.fillText(周杰伦，300，I)；Ctx.fillText(周杰伦，600，I)；}//此时水印的信息已经在画布上了。我们得到水印的每个像素的信息textdata=ctx.getimagedata (0，0，ctx.canvas.width，CTX . canvas . height)；//将图片绘制到画布ctx.drawimage (img，0，0，canvas.width，canvas . height)；//获取图片每个像素的信息，打印出originalData，你会发现这是一个非常大的数组(由于文本和图片在同一个画布上，所以textData的长度等于originalData的长度)//这个数组的长度等于图片的宽度*高度*4，即图片像素的宽度和高度乘以4，0-3位是第一个点的RGBA值。第4-7位是第二个点的RGBA值，依此类推。原始数据=ctx.getimage数据(0，0，ctx.canvas.width，CTX . canvas . height)；//调用盲水印算法mergedata (CTX，textdata， r ，originaldata)}函数mergedata (CTX，textdata，color，original data){ varo data=original data . data；var newData=textData.data var bit，offsetoffset的作用是结合bit找到对应的A值，即透明开关(color){ case R :bit=0；偏移=3；打破；情况“G”:位=1；offset=2；打破；情况“B”:位=2；offset=1；打破；} for(var I=0；i oData.lengthI) {//这里是过滤我们要修改哪个RGB。这里过滤掉的是每个坐标点的R值if(I % 4==bit){//我们得到R值的地方，那么这个点对应的a的值就是ioffset if(new data[ioffset]==0(odata[I]% 2==1)){/这里先判断这个坐标点的透明度。如果是0，说明这个点没有水印。将无水印的信息点的R值改为偶数，不能超过0-255的范围if(oData[} else { oData[I]；} } else if (newData[i offset]！==0(oData[I]% 2==0)){//透明度不为0，此时有信息。如果该点的R值为偶数，则改为奇数odata[I]；} } }//到目前为止，整张图片中所有有水印信息的点的R值都是奇数，所有没有水印信息的点的R值都是偶数。然后将图片绘制到画布上，即完成CTX的整个水印添加过程。Putimagedata(原始数据，0，0)；} /script至此，我们已经在页面上绘制了一张有盲水印的图片。我们先来看看解码前后的对比效果：

　　以下是右键保存的图像和解码的图像。由于颜色识别的错误，部分图像内容也被识别为成水印内容，但水印文本仍能清晰可见。

　　以下是截图和解码后的图片：截图后的图片中仍然可以识别出水印信息。

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

　　scriptvarcanvas=document . getelementbyid( my canvas )var CTX=canvas . get context( 2d )var img=new image()img . src=。/decode.png//image加载完毕img . onload=function(){ canvas . width=img . width . canvas . height=img . height；ctx.drawImage(img，0，0，img.width，img . height)；//将带盲水印的图片绘制到画布上，获取像素的RGBA数组信息。原始数据=ctx.getimagedata (0，0，ctx.canvas.width，CTX . canvas . height)；processData(ctx，original data)；}函数processData(ctx，original data){ var data=original data . data；for(var I=0；I数据长度；I) {//过滤每个像素的R值if (i% 4==0) {if (data[i]% 2==0) {//如果R值为偶数，则表示此时没有水印信息，将其R值设为0 data[I]=0；} else {//如果R值为奇数，说明此时有水印信息，将其R值设为255 data[I]=255；}} else if (i% 4==3) {//不处理透明继续；} else {//G，b值设置为0，不影响data[I]=0；} }//此时，所有有水印信息的点将显示为255，0，0，没有水印信息的点将显示为0，0，0。将结果绘制到canvas ctx.putimagedata(原始数据，0，0)；} /script现在我们已经基本完成了前期预期的盲水印效果。但是前端安全处理还是会有隐患。比如打开控制台，可以获取原图的链接地址，直接保存。

　　所以为了更好的保护信息安全，这种加入盲水印的方法在后端可能更有效。

　　这个算法的内容引用自：https://juejin.cn/post/6900713052270755847

　　关于前端canvas生成的盲水印的加解密实现的这篇文章到此为止。关于canvas生成的盲水印加密解密的更多信息，请搜索之前的文章或继续浏览以下相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。