-
Notifications
You must be signed in to change notification settings - Fork 0
/
图片加解密.html
113 lines (104 loc) · 3.26 KB
/
图片加解密.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>图像加解密</title>
</head>
<body>
<p id='p'>1.选择utf-8编码文件，加密为图片格式。生成图片后，右键，另存为图片</p>
<input id='importFile' name='importFile' type='file' onchange='readFile(this.files)' />
<button onclick='encode()'>加密文件为图片：</button>
<canvas id='can' width='200px' height='200px' style='border:1px solid black'></canvas>
<p>2.选择加密过的图片(图片路径和本文件同级目录)，解密图片内的文件信息</p>
<input type='file' onchange='loadPic(this.files)'>
<button onclick='decode()'>解密图片为文件：</button>
<canvas id='can2' width='200px' height='200px' style='border:1px solid black'></canvas>
<p>结果为:</p>
<div id='resultArea' style='height:400px;width:800px'></div>
<script>
var myCanvas = document.getElementById('can');
var context = myCanvas.getContext('2d');
var unicodeStr = '';
var decodeStr = '';
var unicodeArr = [];
var picCanvas = document.getElementById('can2');
var picContext = picCanvas.getContext('2d');
//加载utf-8编码的文件
function readFile(files){
for(var i = 0,f; f=files[i];i++){
var reader = new FileReader();
reader.onload = (function(file){
return function(e){
//unicodeStr = '';
for(var j = 0,len =this.result.length; j < len;j++){
var unistr = this.result.charCodeAt(j).toString(16);
unistr = ('000' + unistr).substr(-4,4);
unicodeStr += unistr;
}
}
})(f);
reader.readAsText(f,'UTF-8');
}
}
//对文件加密
function encode(){
unicodeArr = unicodeStr.split('');
console.log(unicodeArr,unicodeArr.length)
var bitNum = 3 - unicodeArr.length % 3 ;
for(var b = 0; b < bitNum ; b ++){
unicodeArr.push('0');
}
var imgData = context.getImageData(0,0,200,200);
for(var i = unicodeStr.length + bitNum; i> 0; i--){
if(i % 3 === 0){
unicodeArr.splice(i,0,'ff');
}
}
for(var i = 0,len = unicodeArr.length; i < len;i++){
if(unicodeArr[i] == 'ff'){
imgData.data[i] = parseInt(unicodeArr[i],16);
continue;
}
imgData.data[i] = 125 - parseInt(unicodeArr[i],16);
}
context.putImageData(imgData,0,0);
console.log(unicodeArr,unicodeArr.length);
}
//加载图片
function loadPic(pic){
var image = new Image();
image.src = pic[0].name;
image.onload = function(){
picContext.drawImage(image,0,0);
}
}
//解密图片
function decode(){
decodeStr = '';
var imgData = picContext.getImageData(0,0,200,200);
for(var i = 0,len = imgData.data.length; i < len;i++){
if(imgData.data[i] == 0){
console.log(i)
break;
}
if(imgData.data[i].toString(10) !== '255'){
decodeStr +=( (125 - imgData.data[i]).toString(16));
}
}
//console.log(decodeStr);
var decodeArr = [];
var substr = '';
var result = '';
for(var i = 0; i<decodeStr.length + 4; i +=4 ){
substr = decodeStr.substr(i,4);
if(substr.length < 4){
substr = (substr + '000').substr(0,4);
}
decodeArr.push(substr);
result += String.fromCharCode(parseInt(substr,16));
}
document.getElementById('resultArea').innerText = result;
}
</script>
</body>
</html>