Exemple de travailleur html5 (2) Transformation d'image Effect_html5 Compétences du didacticiel

code js du travailleur img.js

Copiez le code

Le code est le suivant :

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;
pour ( var i = 0, n = pix.length; i < n; i = 4 ) {
var niveaux de gris = pix[i] * xcord pix[i 1] * .59 pix[i 2] * .11;
pix[i] = niveaux de gris; 1] = niveaux de gris; // vert
pix[i 2] = niveaux de gris; // bleu
}
imgd['pixels'].data = pix;



Code HTML

Copier le code

Le code est tel suit :

< méta http-equiv="mots-clés" content="mot-clé1,mot-clé2,mot-clé3">
equiv="content-type " content="text/html; charset=UTF-8">




../image/psu [4].jpg" class="onHover"> //Remarque, insérez une image ici, sinon elle n'aura aucun effet


dans l'exemple ci-dessus, vous devez introduire vous-même le package jquery et placer l'image que vous souhaitez transformer sur la balise img de la page html. Ensuite, déployez-le sur le serveur, ouvrez la page et lorsque la souris passe sur l'image, la transformation se produira. La fonction qui effectue ici la fonction de transformation est responsable du travailleur, ce qui n'affecte pas l'efficacité de la page elle-même. similaire au multi-threading dans le langage Java.