Hide an Image in Another Image

For one assignment of web programming, there is some requirement like below for hiding images, the idea idea is important to remember.

So I paste the code I written before for the record.

Requirement:

Create a web page for the steganography program you wrote for Part 3 and include on the page:

1. Four images:

   1. Two original images of which you plan to hide one image in the other image

   2. Your combined image that has the other image hidden in it with the hidden image hiding in the lower 2 bits

   3. The extracted hidden image

2. An explanation of how you modified your code to hide an image in 2 bits

3. The hidden message found in the provided picture above that is hiding in the lower two bits

The link for the result is: http://codepen.io/williamcs/post/e-portfolio

Below is js code for the implementation:

function crop(image, width, height){
     var n = new SimpleImage(width,height);
     for(var p of image.values()){
   	  var x = p.getX();
   	  var y = p.getY();
  	  if (x < width && y < height) {
  	      var np = n.getPixel(x,y);
  	      np.setRed(p.getRed());
  	      np.setBlue(p.getBlue());
  	      np.setGreen(p.getGreen()); 
  	      
  	  }
     }
     return n;
}

function pixchange(pixval){
    var x = Math.floor(pixval/4) * 4;
    return x;
}

function pixrevert(pixval) {
    var x = (pixval % 4) * 64;
    return x;
}

function chop2hide(image){
    for(var px of image.values()){
        px.setRed(pixchange(px.getRed()));
        px.setGreen(pixchange(px.getGreen()));
        px.setBlue(pixchange(px.getBlue()));
    }
    return image;
}

function shift(im){
  var nim = new SimpleImage(im.getWidth(), 
                            im.getHeight());
  for(var px of im.values()){
    var x = px.getX();
    var y = px.getY();
    var npx = nim.getPixel(x,y);
    npx.setRed(Math.floor(px.getRed()/64));
    npx.setGreen(Math.floor(px.getGreen()/64));
    npx.setBlue(Math.floor(px.getBlue()/64));
  }
  return nim;
}

function newpv(p,q){
     var answer = p+q;
     if (p+q > 255)   answer = 255; //print("error too big: answer");
     return answer;
}

function combine(a,b){
     var n = new SimpleImage(a.getWidth(), a.getHeight());
     for(var pa of a.values()){
         var x = pa.getX();
         var y = pa.getY();
         var pb = b.getPixel(x,y);
         var np = n.getPixel(x,y);
         np.setRed(newpv(pa.getRed(),pb.getRed()));
         np.setGreen(newpv(pa.getGreen(),pb.getGreen()));
         np.setBlue(newpv(pa.getBlue(),pb.getBlue()));
     }
     return n;
}

function extract(image) {
    var img = new SimpleImage(image.getWidth(), image.getHeight());
    
    for (var px of image.values()) {
        var x = px.getX();
        var y = px.getY();
        var npx = img.getPixel(x, y);
        npx.setRed(pixrevert(px.getRed()));
        npx.setGreen(pixrevert(px.getGreen()));
        npx.setBlue(pixrevert(px.getBlue()));
    }
    return img;
}

var start = new SimpleImage("usain.jpg");//("astrachan.jpg");
var hide = new SimpleImage("skyline.jpg");//("duvall.jpg")

var cropWidth = start.getWidth();
if (hide.getWidth() < cropWidth) {
	cropWidth = hide.getWidth();
}
var cropHeight = start.getHeight();
if (hide.getHeight() < cropHeight) {
	cropHeight = hide.getHeight();
}

start = crop(start,cropWidth, cropHeight);
hide = crop(hide,cropWidth, cropHeight);
print(start);
print(hide);

start = chop2hide(start);
hide = shift(hide);

var new_im = combine(start, hide);
print(new_im);

var extract_img = extract(new_im);
print(extract_img);

var hilton_hiden = new SimpleImage("hilton_hiden.png");
var extract_hilton = extract(hilton_hiden);
print(extract_hilton);

Below is the code for hiding image in 4 bits:

function crop(image, width, height){
     var n = new SimpleImage(width,height);
     for(var p of image.values()){
   	   var x = p.getX();
   	   var y = p.getY();
  	   if (x < width && y < height) {
  	       var np = n.getPixel(x,y);
  	       np.setRed(p.getRed());
  	       np.setBlue(p.getBlue());
  	       np.setGreen(p.getGreen()); 
  	       
  	   }
     }
     return n;
}

function pixchange(pixval){
    var x = Math.floor(pixval/16) * 16;
    return x;
}

function pixrevert(pixval) {
    var x = (pixval % 16) * 16;
    return x;
}

function chop2hide(image){
    for(var px of image.values()){
        px.setRed(pixchange(px.getRed()));
        px.setGreen(pixchange(px.getGreen()));
        px.setBlue(pixchange(px.getBlue()));
    }
    return image;
}

function shift(im){
  var nim = new SimpleImage(im.getWidth(), 
                            im.getHeight());
  for(var px of im.values()){
    var x = px.getX();
    var y = px.getY();
    var npx = nim.getPixel(x,y);
    npx.setRed(Math.floor(px.getRed()/16));
    npx.setGreen(Math.floor(px.getGreen()/16));
    npx.setBlue(Math.floor(px.getBlue()/16));
  }
  return nim;
}

function newpv(p,q){
     var answer = p+q;
     if (p+q > 255)   answer = 255; //print("error too big: answer");
     return answer;
}

function combine(a,b){
     var n = new SimpleImage(a.getWidth(), a.getHeight());
     for(var pa of a.values()){
         var x = pa.getX();
         var y = pa.getY();
         var pb = b.getPixel(x,y);
         var np = n.getPixel(x,y);
         np.setRed(newpv(pa.getRed(),pb.getRed()));
         np.setGreen(newpv(pa.getGreen(),pb.getGreen()));
         np.setBlue(newpv(pa.getBlue(),pb.getBlue()));
     }
     return n;
}

function extract(image) {
    var img = new SimpleImage(image.getWidth(), image.getHeight());
    
    for (var px of image.values()) {
        var x = px.getX();
        var y = px.getY();
        var npx = img.getPixel(x, y);
        npx.setRed(pixrevert(px.getRed()));
        npx.setGreen(pixrevert(px.getGreen()));
        npx.setBlue(pixrevert(px.getBlue()));
    }
    return img;
}

var start = new SimpleImage("usain.jpg");//("astrachan.jpg");
var hide = new SimpleImage("skyline.jpg");//("duvall.jpg")

var cropWidth = start.getWidth();
if (hide.getWidth() < cropWidth) {
	cropWidth = hide.getWidth();
}
var cropHeight = start.getHeight();
if (hide.getHeight() < cropHeight) {
	cropHeight = hide.getHeight();
}

start = crop(start,cropWidth, cropHeight);
hide = crop(hide,cropWidth, cropHeight);
print(start);
print(hide);

start = chop2hide(start);
hide = shift(hide);

var new_im = combine(start, hide);
print(new_im);

var extract_img = extract(new_im);
print(extract_img);

print(extract(new SimpleImage("9.png")));

print(extract(new SimpleImage("10.png")));