Canvas image with tea

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,
    encryptedText,
    clampedArray,
    index = 0;

/**
 * Tiny Encryption Algorithm
 *
 * @namespace
 */
var Tea = {};


/**
 * Encrypts text using Corrected Block TEA (xxtea) algorithm.
 *
 * @param   {string} plaintext - String to be encrypted (multi-byte safe).
 * @param   {string} password - Password to be used for encryption (1st 16 chars).
 * @returns {string} Encrypted text (encoded as base64).
 */
Tea.encrypt = function(plaintext, password) {
    plaintext = String(plaintext);
    password = String(password);

    if (plaintext.length == 0) return('');  // nothing to encrypt

    //  v is n-word data vector; converted to array of longs from UTF-8 string
    var v = Tea.strToLongs(Tea.utf8Encode(plaintext));
    //  k is 4-word key; simply convert first 16 chars of password as key
    var k = Tea.strToLongs(Tea.utf8Encode(password).slice(0,16));

    v = Tea.encode(v, k);

    // convert array of longs to string
    var ciphertext = Tea.longsToStr(v);

    // convert binary string to base64 ascii for safe transport
    return Tea.base64Encode(ciphertext);
};


/**
 * Decrypts text using Corrected Block TEA (xxtea) algorithm.
 *
 * @param   {string} ciphertext - String to be decrypted.
 * @param   {string} password - Password to be used for decryption (1st 16 chars).
 * @returns {string} Decrypted text.
 * @throws  {Error}  Invalid ciphertext
 */
Tea.decrypt = function(ciphertext, password) {
    ciphertext = String(ciphertext);
    password = String(password);

    if (ciphertext.length == 0) return('');

    //  v is n-word data vector; converted to...