Canvas image

by Norlihazmey Ghazali

HTML

Step 1 - Choose Secret Data :
<input type="file" id="myFile" />
<hr/>
<br/>
Step 2 - Choose Cover(Image) :
<input type="file" id="cover" />
<hr/>

<br/>
Step 3 - Hiding data into image(click button) :
<button id="hideData">Hide Data into Image</button>
<hr/>

<br/>
Cover Image shown here after click hideData(before hiding):
<canvas id="canvas" width="400" height="400"></canvas>
<hr/>

<br/>
Step 4 - Cover Image + Data shown here (after hiding), right click on image and save to your pc:
<canvas id="secret" width="400" height="400"></canvas>
<hr/>
<br/>
Step 5 - Load back the image from step(4) :
<input type="file" id="loadFile" />
<hr/>
Cover Image shown here after load image, and file automatically downloaded for you :)
<canvas id="coverAfter" width="400" height="400"></canvas>

JavaScript

var
    canvas = document.getElementById( 'canvas' ),
    secret = document.getElementById( 'secret' ),
    coverAfter = document.getElementById( 'coverAfter' ),
    ctx = canvas.getContext( '2d' ),
    ctxSecret = secret.getContext( '2d' ),
    ctxCoverAfter = coverAfter.getContext( '2d' ),
    myFile = document.getElementById( 'myFile' ),
    loadFile = document.getElementById( 'loadFile' ),
    view,
    fileType,
    fileTypeArr,
    clampedArray,
    index = 0;
// listen to change event
// this event, will store Int8Array inside view variable
myFile.addEventListener( 'change', function ( e ) {

    var file = e.target.files[ 0 ];
    var fr = new FileReader();
    fileType = '.' + file.name.split('.')[1];
    fileTypeArr = fileType.split('');
    console.log(fileTypeArr)
    fileTypeArr = fileTypeArr.map( function (e) {
    	return e.charCodeAt(0)
    });
	console.log(fileTypeArr)
    fr.addEventListener( "load", loadEvent );

    function loadEvent ( evt ) {

        if ( evt.target.readyState == FileReader.DONE ) {
            // returned arraybuffer object
            var arrayBuffer = evt.target.result;
            // assign arraybuffer to signed int8array instead of normal array
            // 1 byte per index, and only store to 256 values
            view = new Uint8Array( arrayBuffer );
        }

    }
    // read as arraybuffer
    fr.readAsArrayBuffer( file );

});

hideData.addEventListener( 'click', function (e ) {

    var
        cover = document.getElementById( 'cover' ),
        file = cover.files[ 0 ],
        fr = new FileReader();

    fr.addEventListener( "load", loadEvent );
    fr.addEventListener( "loadend", loadEndEvent );

    function loadEvent ( e ) {
        console.info( 'load just start..wait for finish' );
    }

    function loadEndEvent ( e ) {
        console.info( 'finish' );
        var img = new Image();
        img.src = e.target.result;
        // wait for image finish load
        // then draw image into canvas
       ...