imagemask实现图片内隐藏文本和文件的隐写示例代码-html代码-BFW代码库

imagemask实现图片内隐藏文本和文件的隐写示例代码

代码语言：html

所属分类：其他

代码描述：imagemask实现图片内隐藏文本和文件的隐写示例代码，可将文本或二进制文件通过插件隐藏的方式写入到一个图片中，还可以读取图片中隐藏的文本或文件。

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div id='main' class='section dark'>
        <div class='step'>选择一个图片</div>
        <img id='preview' class='preview hide' />
        <div class='sectionbody'>
            <input type='file' id='file' />
        </div>
    </div>
    <div id='choose' class='section dark hide'>
        <div class='step'>What do you want to do?,
            <div id="aa"></div>>>>>
            <div id="bb"></div>
        </div>
        <div class='sectionbody'>
            <div class='left'>
                <textarea id='message' class='message' style="height:200px;width:600px;" placeholder='Type hidden text' onchange="document.getElementById('bb').innerHTML=this.value.length"></textarea>
                <br />
                <button id='encode' class='submit'>文字隐藏到图片中</button>
                <button id='decode' class='submit'>显示隐藏在图片中的文字</button>
                <label><input type="checkbox" id="debug" />debug mode</label>
                <hr /> hidden file: <input type='file' id='file2' /><br />
                <button id='encode2' class='submit'>隐藏一个文件到图片中</button>
                <button id='decode2' class='submit'>显示图片中的文字</button>
                <div id="files"></div>
            </div>
        </div>
    </div>
    <canvas id='canvas' style="display:none;" ></canvas>
    <img id='output' />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/imagemask.js"></script>
    <script type="text/javascript">
        var mask = new ImageMask({debug: false});
        
          window.onload = function() {
            // add action to the file input
            var input = document.getElementById('file');
            input.addEventListener('change', importImage);
        
            // add action to the encode button
            var encodeButton = document.getElementById('encode');
            encodeButton.addEventListener('click', encode);
        
            // add action to the decode button
            var decodeButton = document.getElementById('decode');
            decodeButton.addEventListener('click', decode);
        
            // add action to the encode button
            var encodeButton2 = document.getElementById('encode2');
            encodeButton2.addEventListener('click', encode2);
        
            // add action to the decode button
            var decodeButton2 = document.getElementById('decode2');
            decodeButton2.addEventListener('click', decode2);
        };
        
        // put image in the canvas and display it
        var importImage = function(e) {
            var reader = new FileReader();
        
            reader.onload = function(event) {
                // set the preview
                document.getElementById('preview').style.display = 'block';
                document.getElementById('preview').src = event.target.result;
        
                // wipe all the fields clean
                document.getElementById('message').value = '';
                document.getElementById('o.........完整代码请登录后点击上方下载按钮下载查看