Commentaire: Lors de l'exécution de l'exemple suivant, vous devez présenter le package jQuery vous-même et mettre l'image que vous souhaitez modifier sur la balise IMG sur la page HTML. Les étapes de mise en œuvre spécifiques sont les suivantes. Les amis intéressés peuvent y faire référence. J'espère que ce sera utile à tout le monde.
Code JS du travailleur IMG.JSonMessage = fonction (e) {
postmessage (filtre (e.data))
};
filtre de fonction (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 GraysCale = pix [i] * xcord + pix [i + 1] * .59 + pix [i + 2] * .11;
pix [i] = niveaux de gris; // rouge
pix [i + 1] = niveaux de gris; // vert
pix [i + 2] = niveaux de gris; // bleu
}
imgd ['pixels']. data = pix;
retour IMGD;
}
code html
<! Doctype html>
<html>
<adal>
<Title> test2.html </Title>
<meta http-equiv = "keywords" contenu = "keyword1, keyword2, keyword3">
<méta http-equiv = "Description" content = "Ceci est ma page">
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8">
<! - <link type = "text / css" href = "./ styles.css"> ->
<script type = "text / javascript" src = "../ js / jquery-1.8.0.min.js"> </ script>
</ head>
<body>
<lebvas> </ canvas>
<img src = "../ Image / PSU [4] .jpg"> // Notez que vous insérez une image ici, sinon ce sera inutile.
<script type = "text / javascript">
Processus de fonction (img, x, y) {
var canvas = document.getElementById ("myCanvas");
var context = canvas.getContext ('2d');
context.DrawImage (IMG, 0, 0);
var pixels = context.getImagedata (0,0, img.width, img.height);
var worker = nouveau travailleur ("img.js");
var obj = {
Pixels: Pixels,
x: x,
Y: Y
}
Worker.PostMessage (OBJ);
wearch.onMessage = fonction (e) {
if (typeof e.data === "String") {
console.log ("travailleur:" + e.data);
retour;
}
var new_pixels = e.data.pixels; // Pixels du travailleur
context.putImagedata (new_pixels, 0, 0);
img.src = canvas.todataurl (); // puis à l'img
}
}
</cript>
<script type = "text / javascript">
$ (function () {
$ (". onhover"). sur ("MouseOver", function () {
var x = this.width;
var y = this.height;
console.log ("x:" + x + "y:" + y);
processus (ceci, x, y);
});
})
</cript>
</docy>
</html>
Lors de l'exécution de l'exemple ci-dessus, vous devez introduire le package jQuery vous-même et mettre l'image que vous souhaitez modifier sur la balise IMG sur la page HTML. Déployez ensuite sur le serveur et ouvrez la page. Lorsque la souris se déplace vers le haut de l'image, la transformation se produira. Le travailleur est responsable de la fonction qui remplit la fonction de transformation ici, et elle n'affectera pas l'efficacité de la page elle-même à volonté, similaire au multi-lancement dans la langue Java.