Web Workers - HTML5 - page 275

Die beiden Eingabefelder vom Typ number bewirken bei jeder Veränderung ihres
Inhalts, dass die Funktion updateProgressBars() aufgerufen wird. In ihr werden
die Fortschrittsbalken und die Platzhalter für die Ausgabe der Ergebnisse er-
zeugt. Die beiden Schaltflächen MIT beziehungsweise OHNE starten die Berech-
nung der Höhenprofile.
Im JavaScript-Code extrahieren wir als ersten Schritt die Höhenwerte aus dem
PNG-Bild. Dazu laden wir dieses in ein neues canvas -Element:
var canvas = document.createElement("CANVAS");
canvas.width = 300;
canvas.height = 300;
var context = canvas.getContext('2d');
var image = document.querySelector("IMG");
context.drawImage(image,0,0);
// document.querySelector("BODY").appendChild(canvas);
var elev =
context.getImageData(0,0,canvas.width,canvas.height).data;
var alpha = [];
for (var i=0; i<elev.length; i+=4) {
alpha.push(elev[i+3]);
}
In der Variable image wird das einzige img -Element auf der Webseite geladen
und anschließend auf das neu erzeugte canvas -Element gezeichnet. Auf der
Webseite ist weder das Bild noch das Canvas sichtbar, da das img -Element mit
display:none gekennzeichnet ist und das Canvas nie an den DOM-Baum ange-
hängt wird. Wenn Sie die oben auskommentierte Zeile aktivieren, sehen Sie das
Canvas am Ende der Seite. Wie Sie aus dem Kapitel 5, Canvas, wissen, liefert
die getImageData() -Funktion ein Array mit den Farb- und Alpha-Kanal-Wer-
ten des Canvas (jeweils vier Einträge pro Pixel). Da für dieses Beispiel nur die
Alpha-Kanal-Werte interessant sind, extrahieren wir diese mit der for -Schleife
aus dem Array. Diese Datenreduktion ist deshalb sinnvoll, weil jeder Worker
eine Kopie des Arrays erhält. Wenn wir also viele Worker parallel starten, so
wächst der Speicherverbrauch linear mit jedem Worker an.
Die calcProfiles() -Funktion startet schließlich die Berechnung mit oder ohne
Worker, je nachdem, ob true oder false an die Funktion übergeben wird:
calcProfiles = function(useWorker) {
USE_WORKER = useWorker;
startTime = new Date();
for (var i=0; i<PROFILES; i++) {
var imgData = {