Maison > interface Web > Tutoriel H5 > Exemple de travailleur html5 (2) Transformation d'image Effect_html5 Compétences du didacticiel

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

WBOY
Libérer: 2016-05-16 15:49:25
original
1485 Les gens l'ont consulté
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.
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal