在網(wǎng)絡(luò)中保存自己喜歡的圖片我們經(jīng)常遇到的就是水印的問(wèn)題,那么今天小編就來(lái)和大家講講有關(guān)于:“怎么使用canvas實(shí)現(xiàn)盲水印的加密解密?”這個(gè)問(wèn)題的解決方法!
為了保障信息安全,防止重大信息泄露,并且能夠鎖定泄露用戶,需要對(duì)頁(yè)面展示的圖片加入當(dāng)前用戶信息的盲水印,即最終圖片外觀看起來(lái)和原圖一樣,但是經(jīng)過(guò)解碼以后可以識(shí)別出水印信息,并且在截圖后仍能進(jìn)行較好的識(shí)別。
經(jīng)過(guò)在網(wǎng)上的學(xué)習(xí)摸索,我也總結(jié)一下自己的代碼,分享一下學(xué)習(xí)經(jīng)驗(yàn)。
我們將使用以下圖片作為原圖進(jìn)行示范:
下面是圖片添加盲水印的代碼:
<script>
var canvas = document.getElementById("myCanvas")
var ctx = canvas.getContext("2d")
var img = new Image();
var textData,originalData;
img.src = './codeImg.png'
//圖片加載完成
img.onload = function(){
//設(shè)置畫(huà)布寬高為圖片寬高
canvas.width = img.width;
canvas.height = img.height;
//設(shè)置水印字體
ctx.font = '30px Microsoft Yahei';
//由于圖片寬度固定為800,我們需要在每一行添加三個(gè)水印,每隔100像素新增一行水印
for(var i=50;i<canvas.height;i+=100){
ctx.fillText('周杰倫', 100, i);
ctx.fillText('周杰倫', 300, i);
ctx.fillText('周杰倫', 600, i);
}
//此時(shí)畫(huà)布上已經(jīng)有了水印的信息,我們獲取水印的各個(gè)像素的信息
textData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
//將圖片繪入畫(huà)布
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
//獲取圖片各個(gè)像素點(diǎn)的信息,將originalData打印出來(lái),會(huì)發(fā)現(xiàn)是一個(gè)非常大的數(shù)組(由于文字和圖片在同一塊畫(huà)布,因此textData的長(zhǎng)度等于originalData長(zhǎng)度)
//這個(gè)數(shù)組的長(zhǎng)度等于圖片width*height*4,即圖片像素寬乘以高乘以4,0-3位是第一個(gè)點(diǎn)的RGBA值,第4-7位是第二個(gè)點(diǎn)的RGBA值,以此類推
originalData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
//調(diào)用盲水印算法
mergeData(ctx, textData, 'R', originalData)
}
function mergeData(ctx, textData, color, originalData) {
var oData = originalData.data;
var newData = textData.data
var bit, offset; // offset的作用是找到結(jié)合bit找到對(duì)應(yīng)的A值,即透明度
switch (color) {
case 'R':
bit = 0;
offset = 3;
break;
case 'G':
bit = 1;
offset = 2;
break;
case 'B':
bit = 2;
offset = 1;
break;
}
for (var i = 0; i < oData.length; i++) {
//此處是為了篩選我們要修改的RGB中那一項(xiàng),在此處,過(guò)濾出來(lái)的就是每個(gè)坐標(biāo)點(diǎn)的R值
if (i % 4 == bit) {
//我們獲取到R值的位置,那對(duì)應(yīng)這個(gè)點(diǎn)的A值就是i+offset
if (newData[i + offset] === 0 && (oData[i] % 2 === 1)) {
//此處先判斷該坐標(biāo)點(diǎn)的透明度,如果為0,說(shuō)明這個(gè)點(diǎn)是沒(méi)有水印的,將沒(méi)有水印信息點(diǎn)的R值變?yōu)榕紨?shù),并且不能超過(guò)0-255的范圍
if (oData[i] === 255) {
oData[i]--;
} else {
oData[i]++;
}
} else if (newData[i + offset] !== 0 && (oData[i] % 2 === 0)) {
//透明度非0,該點(diǎn)有信息,若該點(diǎn)的R值是偶數(shù),將其改為奇數(shù)
oData[i]++;
}
}
}
//至此,整個(gè)圖片中所有包含水印信息的點(diǎn)的R值都是奇數(shù),沒(méi)有水印信息的點(diǎn)的R值都是偶數(shù),再將圖片繪入畫(huà)布,即完成整個(gè)水印添加過(guò)程
ctx.putImageData(originalData, 0, 0);
}
</script>
至此,我們?cè)陧?yè)面上繪制出了帶有盲水印的圖片,我們先看看解碼前后對(duì)比效果:
以下是右鍵另存為的圖片及解碼后的圖片,受色彩識(shí)別度的誤差影響,會(huì)有部分圖片內(nèi)容也被識(shí)別成水印內(nèi)容,不過(guò)還是可以比較清晰看到水印文字
以下是使用屏幕截圖的圖片及解碼圖片:截圖后的圖片仍然能夠識(shí)別出水印信息
接下來(lái)是水印解碼的js代碼:
<script>
var canvas = document.getElementById("myCanvas")
var ctx = canvas.getContext("2d")
var img = new Image()
img.src = './decode.png'
// 圖片加載完成
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
// 將帶有盲水印的圖片繪入畫(huà)布,獲取到像素點(diǎn)的RGBA數(shù)組信息
originalData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
processData(ctx,originalData);
}
function processData(ctx, originalData) {
var data = originalData.data;
for (var i = 0; i < data.length; i++) {
//篩選每個(gè)像素點(diǎn)的R值
if (i % 4 == 0) {
if (data[i] % 2 == 0) {//如果R值為偶數(shù),說(shuō)明這個(gè)點(diǎn)是沒(méi)有水印信息的,將其R值設(shè)為0
data[i] = 0;
} else {//如果R值為奇數(shù),說(shuō)明這個(gè)點(diǎn)是有水印信息的,將其R值設(shè)為255
data[i] = 255;
}
} else if (i % 4 == 3) {//透明度不作處理
continue;
} else {
// G、B值設(shè)置為0,不影響
data[i] = 0;
}
}
// 至此,帶有水印信息的點(diǎn)都將展示為255,0,0 而沒(méi)有水印信息的點(diǎn)將展示為0,0,0 將結(jié)果繪制到畫(huà)布
ctx.putImageData(originalData, 0, 0);
}
</script>
現(xiàn)在,我們基本已經(jīng)完成了前期預(yù)計(jì)的盲水印效果,但是,前端的安全處理還是會(huì)有隱患,比如打開(kāi)控制臺(tái),即可獲取到原圖的鏈接地址,并可以直接保存。
所以若要更好的保障信息安全,這個(gè)添加盲水印的方法在后端去處理可能更加有效。
本文算法內(nèi)容參考自: https://juejin.cn/post/6900713052270755847
那么小伙伴們?cè)陂喿x完有關(guān)于:“怎么使用canvas實(shí)現(xiàn)盲水印的加密解密?”這個(gè)問(wèn)題的相關(guān)代碼和解決方法之后想必都知道以后自己要怎么實(shí)現(xiàn)水印加密和解密了吧!希望小編的文章可以幫助到大家的學(xué)習(xí)!更多有關(guān)于html5這方面的相關(guān)內(nèi)容我們都也可以在W3Cschool進(jìn)行學(xué)習(xí)和了解!