Heim > Web-Frontend > H5-Tutorial > HTML5-Worker-Beispiel (2) Bildtransformationseffekt_html5-Tutorial-Fähigkeiten

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

WBOY
Freigeben: 2016-05-16 15:49:25
Original
1484 Leute haben es durchsucht
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.
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage