sjcl实现带查看密码的图片隐写信息示例代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：sjcl实现带查看密码的图片隐写信息示例代码，隐写术可以视为一种信息安全技术，其在wiki上的定义是一门关注信息隐藏的技巧与科学，主要目的是确保信息在传输或存储过程中不被未授权者获知。利用特定的工具，图片中隐藏的文字信息可以被提取出来，而不会对图片的正常显示造成任何影响。这种技术可以用于隐藏或保护敏感信息，只有掌握特定工具的人才能解密出隐藏的信息。隐写术在许多场景中都有广泛的应用，比如程序员之间可以用此法进行表白（不论男女），作为一种浪漫的方式。此外，据说大众点评曾成功运用此技术证明了某app对其图片

代码标签： sjcl 查看密码图片隐写信息示例代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
  
    <style>
    </style>
</head>

<body>
    <style>
        .container{font-size:16px;width:1000px;margin:0 auto}.container .divider{width:100%;background:#CCC;height:1px;margin:25px 0}.container .row{min-height:2em;line-height:2em;width:100%}.container .row:before,.container .row:after{display:block;overflow:hidden;visibility:hidden;width:0;height:0}.container .row:after{clear:both}.container .row{zoom:1;margin:10px 0}.container .span{float:left;display:inline;min-height:1em}.container .span:first-child{margin-left:0}.container .span:last-child{margin-right:0}.container .six{width:48%}.container input{text-align:left;border:1px solid #CCC;border-radius:5px;font-size:.98em}.container .input-text{width:95%;height:2.1em;line-height:2.1em;padding-left:5px}.container .button{border:0;border-radius:4px;outline:0;cursor:pointer;margin-bottom:10px}.container .button.small{padding:7px 10px;font-size:.95em}.container .button.large{padding:15px 25px;font-size:1.1em}.container .button.primary{color:#FFF;background:#5f90b0}.container .button.primary:hover{background:#5589ab}.container .button.success{color:#FFF;background:#4daf7c}.container .button.success:hover{background:#48a474}.container .button.danger{color:#FFF;background:#e6623c}.container .button.danger:hover{background:#e4572e}.container .alert{padding:10px;margin:0;border-radius:3px}.container .alert.primary{background:#e8eff3;border:1px #c5d7e3 solid}.container .alert.success{background:#daeee4;border:1px #b6dfca solid}.container .alert.danger{background:#fdf4f1;border:1px #f7cfc4 solid}.container .hidden,.container .hide{display:none}
    </style>
    <div class='container'>
        <h4 class="strong">一、生成带隐藏信息的图片</h4>
        <div class='divider'></div>
        <div class='row'>
            <div class='span'>1. 从电脑中选择一张用于加密信息的图片：</div>
            <div class='span'>
                <input type="file" accept="image/*" id="origin_image" onchange="importImage();" />
            </div>
        </div>
        <div class='row'>
            <div class='span'>2. 输入你要隐藏到图片中的文字信息：</div>
            <div class='span six'>
                <input type="text" class="input-text" placeholder="隐藏文字，比如：你好，hello" id="secret_text" />
            </div>
        </div>
        <div class='row'>
            <div class='span'>3. 输入需要解开信息的密码：</div>
            <div class='span six'>
                <input type="password" class="input-text" placeholder="信息查看密码，可以为空即为不加密" id="secret_pwd" />
            </div>
        </div>
        <div>
            <button class='button primary small' onclick="javascript:encode()" type="button">生成带隐藏信息的图片</button>
        </div>
        <div class="alert success">
            <canvas id="result_image" class="hidden"></canvas>
            <div id="encode_tip" class="strong green"></div>
            <img id='result_image_output' />
        </div>
        <div class='divider'></div>
        <h4 class="strong">二、解密带隐藏信息的图片</h4>
        <div class='divider'></div>
        <div class='row'>
            <div class='span'>1. 从电脑中选择一张带有隐藏信息的图片：</div>
            <div class='span'>
                <input type="file" accept="image/*" id="decode_image" onchange="javascript:selectEncodeImage()" />
            </div>
        </div>
        <div class='row'>
            <div class='span'>2. 输入需要解开信息的密码（如果没有密码可以不填）：</div>
            <div class='span six'>
                <input type="password" class="input-text" placeholder="信息查看密码，可以为空即为图片解密不需要密码" id="decode_pwd" />
            </div>
        </div>
        <div>
            <button class='button primary small' onclick="javascript:decode()" type="button">解密出隐藏的信息</button>
        </div>
        <div class="alert success">
            <canvas id="decode_result_image" class="hidden"></canvas>
            <div class="strong" id="messageDecoded"></div>
        </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/sjcl.js"></script>
        <script  type='text/javascript'>
            var maxMessageSize = 1000;
function $_(id) {
    return document.getElementById(id)
}
function importImage() {
    var reader = new FileReader();
    reader.onload = function(event) {
        $_("secret_text").value = "";
        $_("secret_pwd").value = "";
        $_("result_image_output").src = "";
        $_("encode_tip").innerHTML = "";
        var img = new Image();
        img.onload = function() {
            var ctx = $_("result_image").getContext("2d");
            ctx.canvas.width = img.width;
            ctx.canvas.height = img.height;
            ctx.drawImage(img, 0, 0)
        };
        img.src = event.target.result
    };
    reader.readAsDataURL($_("origin_image").files[0])
}
function encode() {
    var message = $_("secret_text").value;
    var password = $_("secret_pwd").value;
    var output = $_("result_image_output");
    var result_image = $_("result_image");
    var ctx = result_image.getContext("2d");
    if (password.length > 0) {
        message = sjcl.encrypt(password, message)
    } else {
        message = JSON.stringify({
            text: message
        })
    }
    var pixelCount = ctx.canvas.width * ctx.canvas.height;
    if ((message.length + 1) * 16 > pixelCount * 4 * 0.75) {
        alert("需要隐藏的文本信息相对于图片来说太长了。可以减少文字信息，或者加大图片！");
        return
    }
    if (message.length > maxMessageSize) {
        alert("需要隐藏的信息太长，最大为：" + maxMessageSize + ".");
        return
    }
    var imgData = ctx.getImageData(0, 0, ct.........完整代码请登录后点击上方下载按钮下载查看