rocketeerbkw/crypt2.html

## crypt2.html
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <img src="crypt2.png" id="crypt" />
    <script>
    // Get challenge image.
    var cimg = new Image();
    cimg.src = "crypt2.png";
    cimg.onload = function() {
      // Create a canvas element.
      canvas = document.createElement('canvas');
      canvas.id = 'crypt_canvas';
      canvas.width = cimg.width;
      canvas.height = cimg.height;
      document.getElementsByTagName('body')[0].appendChild(canvas);

      // Get the 2d context of our canvas.
      ctx = canvas.getContext('2d');

      // Fill our canvas with the challenge image.
      ctx.drawImage(cimg, 0, 0);

      imgData = ctx.getImageData(0, 0, cimg.width, cimg.height);
      var data = imgData.data;

      // Loop over every pixel.
      pixel_count = 0;
      binary_msg = [];
      binary_byte = [];
      for (var i = 0; i < imgData.data.length; i += 4) {
        var red = imgData.data[i];
        var green = imgData.data[i + 1];
        var blue = imgData.data[i + 2];
        var alpha = imgData.data[i + 3];
        pixel_count++;

        // The message is only hidden in almost pure white pixels.
        // Quit early if any other color.
        if (red != 255 || green != 255 || alpha != 255) {
          break;
        }

        if (blue == 255) {
          binary_byte.unshift(1);
        }
        else {
          // Change the almost white pixel to pure black for visual effect.
          imgData.data[i] = 0;
          imgData.data[i + 1] = 0;
          imgData.data[i + 2] = 0;
          binary_byte.unshift(0);
        }

        if (pixel_count % 8 == 0) {
          binary_msg.push(binary_byte);
          binary_byte = [];
        }
      }

      // Overwrite the original challenge image with the new one that shows the msg.
      ctx.putImageData(imgData, 0, 0);

      var msg = "";
      for (var i = 0; i < binary_msg.length; i++) {
        for (var j = 0; j < binary_msg[i].length; j++) {
          msg += binary_msg[i][j];
        }
        msg += " ";
      }

      var binary_out = document.createElement('div');
      binary_out.innerHTML = msg;
      document.getElementsByTagName('body')[0].appendChild(binary_out);
    }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	</head>
	<body>
	<img src="crypt2.png" id="crypt" />
	<script>
	// Get challenge image.
	var cimg = new Image();
	cimg.src = "crypt2.png";
	cimg.onload = function() {
	// Create a canvas element.
	canvas = document.createElement('canvas');
	canvas.id = 'crypt_canvas';
	canvas.width = cimg.width;
	canvas.height = cimg.height;
	document.getElementsByTagName('body')[0].appendChild(canvas);

	// Get the 2d context of our canvas.
	ctx = canvas.getContext('2d');

	// Fill our canvas with the challenge image.
	ctx.drawImage(cimg, 0, 0);

	imgData = ctx.getImageData(0, 0, cimg.width, cimg.height);
	var data = imgData.data;

	// Loop over every pixel.
	pixel_count = 0;
	binary_msg = [];
	binary_byte = [];
	for (var i = 0; i < imgData.data.length; i += 4) {
	var red = imgData.data[i];
	var green = imgData.data[i + 1];
	var blue = imgData.data[i + 2];
	var alpha = imgData.data[i + 3];
	pixel_count++;

	// The message is only hidden in almost pure white pixels.
	// Quit early if any other color.
	if (red != 255 \|\| green != 255 \|\| alpha != 255) {
	break;
	}

	if (blue == 255) {
	binary_byte.unshift(1);
	}
	else {
	// Change the almost white pixel to pure black for visual effect.
	imgData.data[i] = 0;
	imgData.data[i + 1] = 0;
	imgData.data[i + 2] = 0;
	binary_byte.unshift(0);
	}

	if (pixel_count % 8 == 0) {
	binary_msg.push(binary_byte);
	binary_byte = [];
	}
	}

	// Overwrite the original challenge image with the new one that shows the msg.
	ctx.putImageData(imgData, 0, 0);

	var msg = "";
	for (var i = 0; i < binary_msg.length; i++) {
	for (var j = 0; j < binary_msg[i].length; j++) {
	msg += binary_msg[i][j];
	}
	msg += " ";
	}

	var binary_out = document.createElement('div');
	binary_out.innerHTML = msg;
	document.getElementsByTagName('body')[0].appendChild(binary_out);
	}
	</script>
	</body>
	</html>