上面的兩張圖片中，你能看出有什麼不同嗎？ 右圖使用 html5 canvas api 中的 和 函數嵌入了一段文字。 道理很簡單， 函數返回一個 對象，該對象包含三個屬性： 是一個位元組數組，每 4 位元組表示圖片中一個像素，按照“ 紅、綠、藍、透明度”的順序依次排列， 表示圖片寬度， 圖片高度。 只要 ...
上面的兩張圖片中，你能看出有什麼不同嗎？
右圖使用 html5 canvas api 中的 getImageData 和 putImageData 函數嵌入了一段文字。
道理很簡單，getImageData 函數返回一個 ImageData 對象，該對象包含三個屬性： data 是一個位元組數組，每 4 位元組表示圖片中一個像素，按照“ 紅、綠、藍、透明度”的順序依次排列，width 表示圖片寬度，height 圖片高度。
只要將我們的密文轉成 0 - 255 之間的數值，存入數組，然後再顯示成圖片。讀取時反向讀取並轉碼就可以了。
<!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>註: 示例代碼中的密文僅僅是為了測試中文，順路為男神讀者們服務的。
