Unit 2A Question 6

by Larry Adams

HTML

<h4>6. Image processing (array handling) </h4>
      <p>The image below appears inside an HTML canvas element.&nbsp; We'll
        learn more about canvas elements later in the course. For now, the
        important thing to know is that, unlike an image displayed normally in
        the browser using the IMG tag, the image data that appears in a canvas
        element is available to Javascript as a "bitmap". </p>
      <p>The bitmap data is an array that maps four numbers to each pixel in the
        image: r, g, b, a, where r, g, b are integer values from 0 to 255 which
        describe red, green, and blue respectively; and a, which is an 'alpha'
        value between 0 and 255 in which 0 is transparent and 255 is completely
        opaque. Since there are four array elements for each pixel, the total
        array will contain pixels_in_image * 4 elements in all. </p>
      <p>The first pixel's red data is at data[0], the second pixel's red data
        at data[4], etc. </p>
      <p>Your job is to write additional code inside the function that will
        modify the image data to create four new versions, as described below
        and in the <span style="font-family: monospace;">js/hw2ArrayImageProcessing.js</span>
        file.&nbsp; </p>
      <p>The comments in the js/hw2ArrayImageProcessing.js file should point you in
      the right direction. </p>
      <p><strong>Important Note: To do this exercise using your local file
          system (with no Web server involved), <u>you will need to use Firefox as
          your browser.</u> Chrome will display an error due to security
          constraints.</strong> </p>
      <table style="width: 100%" border="1">
        <tbody>
          <tr>
            <td>Original</td>
            <td>BLUE-only version</td>
            <td>Reverse-color version</td>
            <td>semi-transparent version</td>
            <td>add two images version</td>
          </tr>
          <tr>
            <td><canvas...

CSS

#studentname{
	border:1px solid darkgray;
	padding:.7em;
	background-color: gray;
	width:20%;
}

.namedata{
	color: maroon;
	font-weight:bold;
}

.degoutput{
	width:4em;
	border: 1px solid gray;
	padding: 1px;
}

#putAnX{
	width:600px;
	height:400px;
	border:1px solid black;
}
#theX{
	position:relative;
}
body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	color: #333;
}
.container {
	width: 80%;
	margin: auto;
}

h4 {
	border-top: 1px solid black;
	padding-top: 1em;
	width: 95%;
}

.button {
    text-indent:0;
    border:1px solid #eda933;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    line-height:65px;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#f6b33d;
}

.hwbutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #fed897;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fed897;
	box-shadow:inset 0px 1px 0px 0px #fed897;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
	background:-moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6b33d', endColorstr='#d29105');
	background-color:#f6b33d;
	-webkit-border-top-left-radius:20px;
	-moz-border-radius-topleft:20px;
	border-top-left-radius:20px;
	-webkit-border-top-right-radius:20px;
	-moz-border-radius-topright:20px;
	border-top-right-radius:20px;
	-webkit-border-bottom-right-radius:20px;
	-moz-border-radius-bottomright:20px;
	border-bottom-right-radius:20px;
	-webkit-border-bottom-left-radius:20px;
	-moz-border-radius-bottomleft:20px;
	border-bottom-left-radius:20px;
	text-indent:0;
	border:1px solid...

JavaScript

/*
 * We'll grab the canvas elements and the graphics contexts here
 *
 */
var canvases = [];
var contexts = [];
var newImageData = [];

/* there are separate canvases for each of the images you'll create:
 *    - a blue version,
 *    - a reversed version,
 *    - a transparent version,
 *    - a version that composites (adds) two images
 *
 *    We're using an array - canvases[] to store these
 *    */
canvases['orig'] = document.getElementById('originalCanvas');
canvases['blue'] = document.getElementById('blueCanvas');
canvases['reverse'] = document.getElementById('reverseCanvas');
canvases['trans'] = document.getElementById('transparentCanvas');
canvases['composite'] = document.getElementById('compositeCanvas');
canvases['composite_newimage'] = document.getElementById('compositeNewImageCanvas');


/*
 * Now get the image context for each canvas, and create a new ImageData object with the correct width and height
 */
for (var key in canvases){
// for each of the five canvases
               if(canvases.hasOwnProperty(key)) { // should not be necessary, but just in case

                              //set the canvas size
                              canvases[key].width = 150;
                              canvases[key].height = 100;

                              //make an image context for the canvas
                              contexts[key] = canvases[key].getContext('2d');

                              //create a new imageData object for the modified image
                              newImageData[key] = contexts[key].createImageData(canvases[key].width, canvases[key].height);

               }
}

/*
 * Then we create a Javascript Image object and set its source URL
 * to the location of the image file we'll be processing.
 */

var image_obj = new Image();
image_obj.src = 'img/harvardextension.jpg';

/*
 * Here's the handler that loads when the image has finished downloading.
 *
 * This needs to be asynchronous (triggered by the image load event) since...