HTML5中使用圖片傳遞密文

時間 2019-11-16

標籤 html5 html 使用圖片傳遞密文欄目 HTML5 简体版

原文原文鏈接

上面的兩張圖片中，你能看出有什麼不一樣嗎？javascript

右圖使用 html5 canvas api 中的 getImageData 和 putImageData 函數嵌入了一段文字。css

道理很簡單，getImageData 函數返回一個 ImageData 對象，該對象包含三個屬性： data 是一個字節數組，每 4 字節表示圖片中一個像素，按照「紅、綠、藍、透明度」的順序依次排列，width 表示圖片寬度，height 圖片高度。
只要將咱們的密文轉成 0 - 255 之間的數值，存入數組，而後再顯示成圖片。讀取時反向讀取並轉碼就能夠了。html

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>Hello...</title>
        <style type="text/css">
        </style>
    </head>
    <body>
        <canvas id="canvas1"></canvas>
        <script> 
            var pic;
            var canvas;
            var ctx;
            var imgData;
            var data;
            
            window.onload = function(){
                canvas = document.getElementById("canvas1");
                ctx = canvas.getContext("2d");
                
                canvas.width = 400;
                canvas.height = 200;
                
                pic = new Image();
                pic.onload = function(){
                    ctx.drawImage(pic, 0, 0, pic.width, pic.height);
                    imgData = ctx.getImageData(0, 0, pic.width, pic.height);
                    data = imgData.data;

                    // put the secret
                    //var s = encodeURI("we dream and we build.we never give up.we never quit.");
                    var s = encodeURI("女神，約嗎？");
                    for(var j=0; j<s.length; j++){
                        data[j*400+3] = 255 - s.charCodeAt(j);
                    }
                    ctx.putImageData(imgData, 130, 0);
                    
                    //get the secret 
                    var dImgData = ctx.getImageData(130, 0, pic.width, pic.height);
                    var dData = dImgData.data;
                    var ds = "";
                    for(var k=3; k<dData.length; k+=400){
                        var t = String.fromCharCode(255 - dData[k]);
                        ds += t;
                    }
                    
                    console.log(decodeURI(ds));
                }
                pic.src = "./img/xixi.jpg";
                
            };
        </script>

    </body>
</html>

注: 示例代碼中的密文僅僅是爲了測試中文，順路爲男神讀者們服務的。html5