rocketeerbkw/crypt30.html

## crypt30.html
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <script>
    alphabet = [];
    alphabet[47] = 'a';
    alphabet[55] = 'b';
    alphabet[63] = 'c';
    alphabet[71] = 'd';
    alphabet[79] = 'e';
    alphabet[87] = 'f';
    alphabet[95] = 'g';
    alphabet[103] = 'h';
    alphabet[111] = 'i';
    alphabet[127] = 'k';
    alphabet[135] = 'l';
    alphabet[143] = 'm';
    alphabet[151] = 'n';
    alphabet[159] = 'o';
    alphabet[167] = 'p';
    alphabet[183] = 'r';
    alphabet[191] = 's';
    alphabet[199] = 't';
    alphabet[207] = 'u';
    alphabet[215] = 'v';
    alphabet[223] = 'w';
    alphabet[231] = 'x';
    alphabet[239] = 'y';
    alphabet[247] = 'z';
    alphabet[255] = ' ';

    // Get challenge image.
    var cimg = new Image();
    cimg.src = "crypt30.gif";

    // Process the image after loaded.
    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);

      index = [];
      letters = [];

      for(var y = 0; y < cimg.height; y++) {
        for(var x = 0; x < cimg.width; x++) {
          var red = imgData.data[((cimg.width * y) + x) * 4];
          var green = imgData.data[((cimg.width * y) + x) * 4 + 1];
          var blue = imgData.data[((cimg.width * y) + x) * 4 + 2];
          var alpha = imgData.data[((cimg.width * y) + x) * 4 + 3];

          // Skip black pixels.
          if (red == 0) {
            continue;
          }

          index.push(red);
          letters.push(alphabet[red]);
        }
      }

      console.log(index.join(' '));
      console.log(letters.join(''));
    }

    // Add image to DOM.
    document.getElementsByTagName('body')[0].appendChild(cimg);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	</head>
	<body>
	<script>
	alphabet = [];
	alphabet[47] = 'a';
	alphabet[55] = 'b';
	alphabet[63] = 'c';
	alphabet[71] = 'd';
	alphabet[79] = 'e';
	alphabet[87] = 'f';
	alphabet[95] = 'g';
	alphabet[103] = 'h';
	alphabet[111] = 'i';
	alphabet[127] = 'k';
	alphabet[135] = 'l';
	alphabet[143] = 'm';
	alphabet[151] = 'n';
	alphabet[159] = 'o';
	alphabet[167] = 'p';
	alphabet[183] = 'r';
	alphabet[191] = 's';
	alphabet[199] = 't';
	alphabet[207] = 'u';
	alphabet[215] = 'v';
	alphabet[223] = 'w';
	alphabet[231] = 'x';
	alphabet[239] = 'y';
	alphabet[247] = 'z';
	alphabet[255] = ' ';

	// Get challenge image.
	var cimg = new Image();
	cimg.src = "crypt30.gif";

	// Process the image after loaded.
	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);

	index = [];
	letters = [];

	for(var y = 0; y < cimg.height; y++) {
	for(var x = 0; x < cimg.width; x++) {
	var red = imgData.data[((cimg.width * y) + x) * 4];
	var green = imgData.data[((cimg.width * y) + x) * 4 + 1];
	var blue = imgData.data[((cimg.width * y) + x) * 4 + 2];
	var alpha = imgData.data[((cimg.width * y) + x) * 4 + 3];

	// Skip black pixels.
	if (red == 0) {
	continue;
	}

	index.push(red);
	letters.push(alphabet[red]);
	}
	}

	console.log(index.join(' '));
	console.log(letters.join(''));
	}

	// Add image to DOM.
	document.getElementsByTagName('body')[0].appendChild(cimg);
	</script>
	</body>
	</html>