unicode_steganography实现零宽度字符的Unicode隐写术示例代码-html代码-BFW代码库

代码语言：html

代码描述：unicode_steganography实现零宽度字符的Unicode隐写术示例代码，这是纯文本隐写术，带有Unicode的零宽度字符，还可写入二进制。

代码标签： unicode_steganography 零宽字符 Unicode 隐写术示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="zh">
<meta charset="UTF-8">
<style>
    body {
    background-color: #071a2c;
    font-family: system-ui;
}

body,
h1,
h2 {
    color: white;
    text-align: center;
    width: 900px;
    margin: 0 auto;
}
a{color:white;}
a:visited {
    color: white;
}

li {
    list-style: none;
}

hr {
    margin-top: 10px;
}

.steg_text {
    width: 900px;
    margin: 0 auto;
    height: 340px;
}

.box3 {
    text-align: left;
    margin: 0 auto;
    width: 400px;
}

.box1 {
    float: left;
    background-color: #0a2a4a;
    padding: 20px;
    border-radius: 10px;
    height: 300px;
    width: 38%;
}

.box2 {
    position: relative;
    float: left;
    height: 340px;
    width: 14%;
    margin: 0 auto;
}

.code_text {
    position: absolute;
    width: 100%;
    height: 100px;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
}

.title {
    margin-bottom: 10px;
}

.clear_text a {
    display: inline-block;
    text-align: center;
    height: 40px;
    line-height: 40px;
    width: 100px;
    border-radius: 30px;
    border-color: #f08;
    background-color: #f08;
}

.left {
    float: left;
    height: 40px;
    line-height: 40px;
}

.clear_text {
    text-align: center;
    width: 100px;
    margin: 0 auto;
}

.right {
    float: right;
    height: 40px;
    line-height: 40px;
}

.input_text {
    margin-bottom: 10px;
}

#encode_text,
#decode_text,
#encode_binary,
#decode_binary {
    display: inline-block;
    text-align: center;
    height: 40px;
    line-height: 40px;
    width: 100px;
    border-color: #f08;
    background-color: #f08;
}

#encode_text,
#encode_binary {
    border-radius: 10px 30px 30px 10px;
}

#decode_text,
#decode_binary {
    border-radius: 30px 10px 10px 30px;
}
</style>
</head>

<body>
    <h1>零宽度字符的Unicode隐写术</h1>
    <div>
        这是纯文本隐写术，带有Unicode的零宽度字符。<br> 零宽度字符插入文本中。<br>
 
    </div>
    <hr style="width: 100%;">
    <h2>文本隐写术示例中的文本</h2>
    <div class="steg_text">
        <div class="box1">
            <div class="input_text">
                <div class="title">
                    <div class="left">
                        原文:
                    </div>
                    <div class="right"><span id="input_length_text"></span></div>
                    <div class="clear_text"><a id="input_clear_text">清除</a></div>
                </div>

                <textarea id="input_text" style="width: 100%; height: 90px;">The quick brown fox jumps over the lazy dog
1234567890.:,;(*!?')
いろはにほへと ちりぬるを
色は匂へど 散りぬるを</textarea>
            </div>
            <div class="hidden_text">
                <div class="title">
                    <div class="left">
                        隐藏文字:
                    </div>
                    <div class="right"><span id="hidden_length_text"></span></div>
                    <div class="clear_text"><a id="hidden_clear_text">清除</a></div>
                </div>
                <textarea id="hidden_text" style="width: 100%; height: 90px;">Where am I?</textarea>
            </div>
        </div>
        <div class="box2">
            <div class="code_text">
                <a id="encode_text">加密 »</a><br><br>
                <a id="decode_text">« 解密</a></div>
        </div>
        <div class="box1">
            <div>
                <div class="title">
                    <div class="left">
                        隐写文本:
                    </div>
                    <div class="right"><span id="output_length_text"></span></div>
                    <div class="clear_text"><a id="output_clear_text">清除</a></div>
                </div>

                <textarea id="output_text" style="width: 100%; height: 230px;"></textarea><br>
                <a id="download_stego_text_text" download="stego_text.txt">将Stego文本下载为文件</a>
            </div>
        </div>
    </div>

    <hr style="width: 100%;">
    <div class="box3">
        隐写术的零宽度字符：<br>
        <div id="used_chars"></div>
    </div>

    <hr style="width: 100%;">
    <h2>文本隐写术示例中的二进制</h2>

    <div class="steg_text">
        <div class="box1">
            <div>
                <div class="title">
                    <div class="left">
                        原文:
                    </div>
                    <div class="right"><span id="input_length_binary"></span></div>
                    <div class="clear_text"><a id="input_clear_binary">清除</a></div>
                </div>

                <textarea id="input_binary" style="width: 100%; height: 150px;">The quick brown fox jumps over the lazy dog
1234567890.:,;(*!?')
いろはにほへと ちりぬるを
色は匂へど 散りぬるを</textarea>
            </div>
            <div>
                隐藏的数据 (请选择文件 &lt; 50kB):
                <input id="input_from_file" type="file"><br><br>
                <a id="download_hidden_data" download="hidden_data">下载解密后的隐藏数据（必须修改扩展名）
                </div> 
            </div>

            <div class="box2">
                <div class="code_text">
                    <a id="encode_binary">加密 »</a><br><br>
                <a id="decode_binary">« 解密</a>
            </div>
        </div>

        <div class="box1">
            <div>
                <div class="title">
                    <div class="left">
                        隐写文字:
                    </div>
                    <div class="right"><span id="output_length_binary"></span></div>
                    <div class="clear_text"><a id="output_clear_binary">清除</a></div>
                </div>
                <textarea id="output_binary" style="width: 100%; height: 230px;"></textarea><br>
                <a id="download_stego_text_binary" download="stego_text.txt">下载隐写后文本到文件</a>
            </div>
        </div>
    </div>


    <hr style="width: 100%;">
    <h2>使用说明</h2>
    <h3><code>unicodeSteganographer.encodeText(String, String)</code></h3>
    <div>
        <code>encodeSteganography</code> returns a stego String. The 1st argument is a String to be embedded, the 2nd argument is a String to be hidden.
    </div>
    <h3><code>unicodeSteganographer.encodeBinary(String, Uint8Array)</code></h3>
    <div>
        <code>encodeSteganography</code> returns a stego String which is embedded steganography of Uint8Array.
    </div>
    <h3><code>unicodeSteganographer.decodeText(String)</code></h3>
    <div>
        <code>decodeSteganography</code> returns a JavaScript Object: { originalText: original text (String), hiddenText: hidden text (String)}.
    </div>
    <h3><code>unicodeSteganographer.decodeBinary(String)</code></h3>
    <div>
        <code>decodeSteganography</code> returns a JavaScript Object: { originalText: original text (String), hiddenData: hidden data (Uint8Array)}.
    </div>
    <h3><code>unicodeSteganographer.setUseChars(String)</code></h3>
    <div>
        <code>setUseChars</code> sets the characters for steganography as a String.<br> Default characters used for steganography are U+200C, U+200D, U+202C, and U+FEFF.<br> U+200B(ZERO WIDTH SPACE) is deleted in Gmail when sending a mail from browsers.
        <br>
        <br>
        <h2>支持的浏览器</h2>
        <ul>
            <li>Chromium 45 (Ubuntu 14.04 LTS)</li>
            <li>Firefox 42 (Ubuntu 14.04 LTS)</li>
            <li>Edge (Windows 10)</li>
            <li>Internet Explorer 11 (Windows 10) * 仅文本格式，无法下载为文件</li>
            <li>Safari (iOS 9.1)</li>
            <li>Chrome (Android 4.2)</li>
        </ul>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/unicode_steganography.js"></script>
    <script>
        'use strict';

        // Encode/Decode Buttons
        document.getElementById('encode_text').addEventListener('click', function() {
            var text1 = document.getElementById('input_text').value;
          .........完整代码请登录后点击上方下载按钮下载查看