JavaScript/Images

Introduction
Images can be available in the DOM (Document Object Model) of the browser in mainly to ways:
 * in an img tag
 * in a canvas tag

Image Tag
The img is used for images that you might want with Javascript.
 * to scale in size,
 * change the alignment (left, right, center) of the image on page,
 * extract the image size (width and height) of loaded image and display the size in the text

Canvas Tag
The canvas tag provides (as you might already assume by the name) options to
 * modify loaded images on the pixel level (e.g. exchange a red pixel on the canvas by a blue pixel),
 * mark specific areas on the image and annotate the image with
 * text (e.g. add the name of the building on the image),
 * geometric objects (e.g. mark a person with a circle or add an arrow in the image, ...
 * merge two source images in one image with a canvas.

Workflow
Workflow with images has the following main steps: For the workflow mentioned above, we will use the image processing workflows as examples. As example images we will use the creative commons images of
 * (S1) Assignment: to work in Javascript with an image/canvas it is necessary to have a variable in Javascript to work with the image/canvas.
 * (S2) Processing: to select in Javascript the available methods to handle/process images in img or canvas tag
 * (S3) Load/Save (locally): if images are modified on a canvas the result must be provided and converted, so that they result can be submitted to a server or stored locally on a client for further use
 * get information about an image with Javacript.
 * load one image into a canvas and add annotation of text or geometric elements like lines, circles and boxes to the image and export the modified image again,
 * load two images and merge them together in a canvas.
 * the Golden Gate Bridge in San Francisco and
 * the Brandenburg Gate in Berlin.

Assignment
For an assignment of an image variable it is recommended to use a unique meaningful identfier (id) for the image or canvas, with which you can access the information about the inage or modify the image in the canvas later. This is a standard procedure using document.getElementById(pID) call with the respective identifier pID.

In the previous example we assume that you have a file index.html and the image in one directory.

Adding an Image to HTML Page
The image is added to the HTML as usual with the <tt>img</tt> tag. The important aspect to mention is, that all images have a unique ID in the DOM of your HTML page. So having more images in one page you have to assign a new identifier to each image. To make the Javascript code more readable and maintainable you might want to assign meaning identifiers to image. As an example we change the identifier of the second image to a meaningful name. A prefix <tt>img...</tt> might be used for the identifier <tt>imgBrandenburgGate</tt> that indicates the id refers to an image and not in a canvas. Now we add also a canvas to the HTML code. The canvas has a specific a specific width and size. Due to the fact that the canvas is empty we must specific the size of the canvas with <tt>width</tt> and <tt>height</tt> attribute that you can use with images as well.

Assigning the Image Variable
The following Javascript code assigns the <tt>img</tt> object in the DOM of the HTML page to the variable <tt>var4image</tt>. Especially in more complex code you might want to use meaningful variable names in your Javascript code as well, similar to the identifiers in the DOM. We use meaningful names for the second image and the canvas.

Error Handling for Image Assignment
Keep in mind that an image with identifier might not exist in the DOM tree and then the image variable is <tt>null</tt>. This might be handled with a <tt>getImage4Id(pID)</tt> function. Once the function is defined you can replace the <tt>document.getElementById(...)</tt> by an <tt>getImage4Id(...)</tt>. You might want to use the function <tt>getImage4Id(...)</tt> in multiple HTML projects so we assume to aggregate all the function that we want to reuse in a Javascript file <tt>imagehandlers.js</tt> stored in a subdirectory "<tt>js/</tt>.

Processing
For the processing we assume you have a folder <tt>LearnJavacript/</tt> on your computer with the subdirectories <tt>img/</tt>, <tt>js/</tt> and <tt>css/</tt>.
 * the subdirectory <tt>img/</tt> contains all the images that we use in the examples for images processing,
 * the subdirectory <tt>js/</tt> contains Javascript code that we use e.g. in multiple examples for images processing,
 * the subdirectory <tt>css/</tt> contains style sheet file the define the layout of the canvas or the image that we alter we Javascript according to the learning task.

Images and Canvas Tags
For the reduction of the code length we rename and shorten the image names given from Wiki Commons for both example images about Golden Gate Bridge and the Brandenburg Gate. So move both examples to the <tt>img/</tt> subdirectory of the folder <tt>LearnJavacript/</tt> folder and name them So we change the code fragments mentioned above for the image definition as follows
 * <tt>ggbridge.jpg</tt> for the Golden Gate Bridge and
 * <tt>bbgate.jpg</tt> for the Brandenburg Gate.

Javascript Function to merge Images
As you might assume from the image sizes, we want combine both images next to each other on the canvas "canvImageAnnotation" and have 13 pixel height empty space on the canvas below the Golden Gate Bridge. The width of the canvas "canvas1" is 640 pixel and the height was chosen as maximum of both heights of both source images.

Button to Execute Image Merge
Now we assign the function mergeImage to an onclick event of a button.

Load/Save
In the next step an image from the local filesystem should be loaded into the browser locally (not on a remote server - see AppLSAC). The following steps are included and applied to a HTML canvas because the user should be able to annotate the image e.g. with a red circle to mark or highlight a specific area on the image:


 * 1) Create a HTML page imagehandler.html with header and body
 * 2) create Javascript file js/imageloadsave.js in a js subfolder, that contains the used Javascript libraries,
 * 3) add file button to HTML page imagehandler.html, that creates a file dialog for the user to select and load an image from the local hard disk,
 * 4) assign an event handler to the file button, that checks if the loaded file is an image,
 * 5) resize a canvas to 90% of window width and calculate the height of the canvas according to aspect ratio of the image.
 * 6) modify the image and paint a red circle on the loaded image,
 * 7) save the image to PNG, JPG, SVG to the download folder (see AppLSAC/Save).