HTML5-Worker-Beispiel (2) Bildtransformationseffekt_html5-Tutorial-Fähigkeiten

Arbeiter-JS-Code img.js

Kopieren Sie den Code

Der Code lautet wie folgt:

onmessage = function(e) {
postMessage(filter(e.data))
};
function filter(imgd) {
var pix = imgd.pixels. data;
var xcord = imgd.x / 1000;
var ycord = imgd.y / 1000;
for ( var i = 0, n = pix.length; i < n; i = 4 ) {
var greyscale = pix[i] * xcord pix[i 1] * .59 pix[i 2] * .11;
pix[i] = greyscale; // red
pix[i 1] = Graustufen; // Grün
pix[i 2] = Graustufen; // Blau
}
imgd['pixels'].data = pix;
}

HTML-Code

Code kopierenDer Code ist wie folgt folgt:

meta http-equiv=" keywords" content="keyword1,keyword2,keyword3"> equiv="content-type " content="text/html; charset=UTF-8">


../image/psu [4].jpg" class="onHover"> //Hinweis: Fügen Sie hier ein Bild ein, sonst hat es keine Wirkung

Im obigen Beispiel müssen Sie das JQuery-Paket selbst einführen und das Bild, das Sie umwandeln möchten, in das IMG-Tag auf der HTML-Seite einfügen. Stellen Sie es dann auf dem Server bereit, öffnen Sie die Seite, und wenn die Maus über das Bild bewegt wird, erfolgt die Transformation. Die Funktion, die hier die Transformationsfunktion ausführt, ist für den Worker verantwortlich, was keinen Einfluss auf die Effizienz der Seite selbst hat. ähnlich dem Multithreading in der Java-Sprache.