Skip to content

Commit d284324

Browse files
MenxLiMenxLi
committed
zh page
1 parent fba0995 commit d284324

File tree

4 files changed

+110
-3
lines changed

4 files changed

+110
-3
lines changed

‎app/index-zh.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="./style.css">
7+
</head>
8+
9+
<body>
10+
<title>图像加密工具</title>
11+
<div class="container">
12+
<h2>图像加密工具
13+
<a href="./index.html" id="lang-link">English</a>
14+
</h2>
15+
<p>
16+
本应用是一个用于图像加密和隐写的工具。
17+
<br>
18+
<ul>
19+
<li>
20+
加密：将你的图像变成纯噪声，用密钥才能解密。
21+
</li>
22+
<li>
23+
隐写：将秘密文本信息隐藏在图像中。
24+
</li>
25+
</ul>
26+
本应用完全在浏览器中运行，因此你的数据不会发送给任何服务器，始终保持安全:)
27+
</p>
28+
29+
模式：
30+
<span class="mode-select-span">
31+
<input type="radio" name="mode" id="cipherModeInput" checked> 加密
32+
</span>
33+
<span class="mode-select-span">
34+
<input type="radio" name="mode" id="steganoModeInput"> 隐写
35+
</span>
36+
</div>
37+
38+
<div id="input-container" class="container">
39+
<div id="secret-container">
40+
<div id="drop-zone" style="display: none;">
41+
<p>Drag and drop an image file here.</p>
42+
<p>Supported formats: PNG, JPEG, BMP, ...</p>
43+
</div>
44+
45+
<!-- https://gist.github.com/danawoodman/4788404bc620d5392d111dba98c73873 -->
46+
<input type="file" id="fileInput" accept="image/*;capture=camera" required>
47+
<br>
48+
49+
<div id="msgInput-container" style="display: none; flex-direction: column; margin-bottom: 0.5rem;">
50+
<label for="msgInput">信息:</label>
51+
<textarea id="msgInput" placeholder="Enter your message here" autocomplete="off" rows="3"></textarea>
52+
</div>
53+
<div id="secretInput-container" style="display: flex; flex-direction: column; margin-bottom: 0.5rem;">
54+
<label for="secretInput">密钥:</label>
55+
<input id="secretInput" placeholder="Your secret key for encryption / decryption." autocomplete="off">
56+
</div>
57+
58+
<span style="margin-top: 0.25rem">
59+
<input type="checkbox" id="limitMaxSide" checked>
60+
<label for="limitMaxSide"> 限制图像最长边为 </label>
61+
<input type="number" id="maxSide" value="1024" min="1" max="25565" step="1" style="width: 4em;">
62+
<label for="maxSide">px</label>
63+
</span>
64+
</div>
65+
66+
<div id="button-container">
67+
<button id="encodeButton"> 加密 </button>
68+
<button id="decodeButton"> 解密 </button>
69+
<div style="display: block" id="imType-container">
70+
为
71+
<select id="imTypeSelect">
72+
<option value="png">PNG</option>
73+
<option value="jpeg">JPEG</option>
74+
</select> ✨
75+
</div>
76+
</div>
77+
</div>
78+
79+
<div id="output-container" class="container" style="opacity: 0;">
80+
<div id="error"></div>
81+
<div id="inputImg"></div>
82+
<div id="output"></div>
83+
<label id="hint"></label>
84+
<div id="downloadBtn-container" style="display: none">
85+
<button id="downloadBtn">Download Image</button>
86+
</div>
87+
</div>
88+
89+
<footer id="footer">
90+
<p style="text-align: center; font-size: 0.8rem;">
91+
源代码可见
92+
<a href="https://github.com/MenxLi/im-cipher">menxli/im-cipher</a>.
93+
</p>
94+
</footer>
95+
96+
</body>
97+
98+
<script src="./script.js" type="module"></script>
99+
</html>

‎app/index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
<body>
1010
<title>Image cipher</title>
1111
<div class="container">
12-
<h2>Image cipher</h2>
12+
<h2>Image cipher
13+
<a href="./index-zh.html" id="lang-link">中文</a>
14+
</h2>
1315
<p>
1416
This app works as a image cryptography and steganography tool.
1517
<br>
@@ -30,7 +32,6 @@ <h2>Image cipher</h2>
3032
</div>
3133

3234
<div id="input-container" class="container">
33-
Select an image file and enter a secret to encode / decode.
3435
<div id="secret-container">
3536
<div id="drop-zone" style="display: none;">
3637
<p>Drag and drop an image file here.</p>

‎app/style.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,4 +88,11 @@ textarea {
8888
min-height: 3rem;
8989
resize: vertical;
9090
height: fit-content;
91+
}
92+
93+
a#lang-link {
94+
color: #007bff;
95+
text-decoration: none;
96+
font-size: 0.75rem;
97+
right: 2rem;
9198
}

‎src/stega.rs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ pub fn extract_lsb(
8585
let msg_len = u32::from_le_bytes(msg_vec[0..4].try_into().unwrap()) as u32;
8686
if 4 + msg_len > msg_vec.len() as u32 {
8787
console_err!("Message length: {}, message channel length: {}", msg_len, msg_vec.len());
88-
return Err("Failed to decode message length".to_string());
88+
return Err("Failed to decode message".to_string());
8989
}
9090

9191
let msg_raw = &msg_vec[4..4 + msg_len as usize];

0 commit comments

Comments
 (0)