前端如何给页面加深色水印上一篇讲了给页面加清水印的方法，不过清水印比较简单去掉，并且对于一些未经处理的图片，用户直接保存的时候，是没有水印的，此时信息泄露的问题依然存在。为了解决此类问题，我们需要使用暗水印。实现思路我们知道一张图片是由多个像素点组成的。通过canvas的getImageData方法，我们可以获取到canvas指定矩形的像素数据。getImageData()方法返回一个ImageData对象，它复制画布指定矩形的像素数据。对于ImageData对象中的每一个像素点，有四个方面的信息，即RGBA值：R-红（0-255）G-绿（0-255）B-蓝（0-255）A-alpha通道（0-255；0为透明，255为完全可见）值得注意的是，RGB分量值的微小变化肉眼无法区分，不影响图片的识别。这是为图像添加深色水印的基石。颜色/alpha以数组的形式存在，并存储在ImageData对象的数据属性中。下面的代码可以得到返回的ImageData对象中第一个像素的颜色/alpha信息：red=imgData.data[0];green=imgData.data[1];blue=imgData.data[2];alpha=imgData.数据[3]；有兴趣的同学可以打印看看效果比例constcontext=can.getContext('2d')context.rotate(-25*Math.PI/180);context.font="80030px微软正黑";context.fillStyle="#000";context.textAlign='center';context.textBaseline='中间';context.fillText(content,100,100)console.log(context.getImageData(0,0,can.width,can.height))returncan.toDataURL("image/png")}constdiv=document.getElementById('content')console.log('div',div)div.style.backgroundImage=`url(${createBackgroundImage('博悦同学',6,10)})`如下图，给出对应的ImageData结果图像，它具有以下属性数据：Uint8ClampedArray(52752)[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,…]colorSpace:"srgb"height:42width:314Uint8ClampedArray是对应的像素点，每四个代表一个像素点，然后从左到右，从上到下排列下面是一个简单的加密：将加密后的图案放在原图中，如果原图中对应的重叠像素有内容，则最低位为1，否则为0functionmergeData(rawImageSrc,watermarkImageSrc){returnnewPromise((resolve,reject)=>{constimg=newImage()img.onload=function(){constmyCanvas=document.createElement("canvas");myCanvas.width=img.width;myCanvas.height=img.height;constctx=myCanvas.getContext("2d")constbit=0constoffset=3constoImageData=getImageData(rawImageSrc)constoData=oImageData.dataconstnewData=getImageData(watermarkImageSrc).datafor(leti=0;i
