Comentario: Al ejecutar el siguiente ejemplo, debe presentar el paquete jQuery usted mismo y poner la imagen que desea cambiar en la etiqueta IMG en la página HTML. Los pasos de implementación específicos son los siguientes. Los amigos interesados pueden referirse a él. Espero que sea útil para todos.
Código JS del trabajador IMG.JSonMessage = function (e) {
Postmessage (filtro (e.data))
};
FILTRO DE FUNCIÓN (IMGD) {
var pix = imgd.pixels.data;
var xcord = imgd.x / 1000;
var ycord = imgd.y / 1000;
para (var i = 0, n = pix.length; i <n; i += 4) {
var grisscale = pix [i] * xcord + pix [i + 1] * .59 + pix [i + 2] * .11;
pix [i] = escala gris; // rojo
Pix [i + 1] = GrayScale; // verde
Pix [i + 2] = GrayScale; // azul
}
imgd ['Pixels']. Data = Pix;
devolver imgd;
}
código HTML
<! Doctype html>
<html>
<Evista>
<title> test2.html </title>
<meta http-equiv = "Keywords" content = "Keyword1, Keyword2, Keyword3">
<meta http-oquiv = "descripción" content = "esta es mi página">
<meta http-equiv = "content-type" content = "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>
</ablo>
<Body>
<Canvas> </Canvas>
<img src = "../ image/psu [4] .jpg"> // Tenga en cuenta que inserta una imagen aquí, de lo contrario será inútil.
<script type = "text/javaScript">
proceso de función (img, x, y) {
var canvas = document.getElementById ("mycanvas");
var context = Canvas.getContext ('2d');
context.DrawImage (img, 0, 0);
var píxeles = context.getImageData (0,0, img.width, img.height);
var trabajador = nuevo trabajador ("img.js");
var obj = {
píxeles: píxeles,
x: x,
Y: Y
}
trabajador.postMessage (OBJ);
trabajador.onmessage = function (e) {
if (typeof E.Data === "String") {
console.log ("trabajador:" + e.data);
devolver;
}
var new_pixels = e.data.pixels; // píxeles del trabajador
context.putimagedata (new_pixels, 0, 0);
img.src = canvas.todataurl (); // y luego al img
}
}
</script>
<script type = "text/javaScript">
$ (function () {
$ (".
var x = this.width;
var y = this.Height;
console.log ("x:" + x + "y:" + y);
proceso (esto, x, y);
});
})
</script>
</body>
</html>
Al ejecutar el ejemplo anterior, debe presentar el paquete jQuery usted mismo y colocar la imagen que desea cambiar en la etiqueta IMG en la página HTML. Luego implementa en el servidor y abra la página. Cuando el mouse se mueve a la parte superior de la imagen, se producirá la transformación. El trabajador es responsable de la función que realiza la función de transformación aquí, y no afectará la eficiencia de la página en sí a voluntad, similar a la múltiple subproceso en el lenguaje Java.