<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值，以此類(lèi)推
            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>

<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>