Comentário: Ao executar o exemplo a seguir, você deve apresentar o pacote jQuery e colocar a imagem que deseja alterar na tag IMG na página HTML. As etapas de implementação específicas são as seguintes. Amigos interessados podem se referir a ele. Espero que seja útil para todos.
Código JS do trabalhador img.jsonMessage = function (e) {
Postmessage (filtro (e.data))
};
filtro de função (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 GrayScale = pix [i] * xcord + pix [i + 1] * .59 + pix [i + 2] * .11;
pix [i] = cinza; // vermelho
pix [i + 1] = cinza; // verde
pix [i + 2] = escala de cinza; // azul
}
imgd ['pixels']. dados = pix;
devolver imgd;
}
Código HTML
<! Doctype html>
<html>
<head>
<title> test2.html </title>
<meta http-equiv = "palavras-chave" content = "palavra-chave1, palavra-chave2, palavra-chave3">
<meta http-equiv = "description" content = "Esta é a minha 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>
</head>
<Body>
<lVAs> </canvas>
<img src = "../ imagem/psu [4] .jpg"> // Observe que você insere uma imagem aqui, caso contrário, será inútil.
<script type = "text/javascript">
processo de função (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 trabalhador = novo trabalhador ("img.js");
var obj = {
pixels: pixels,
x: x,
y: y
}
trabalhador.PostMessage (OBJ);
trabalhador.onmessage = function (e) {
if (typeof e.data === "string") {
console.log ("trabalhador:" + e.data);
retornar;
}
var new_pixels = e.data.pixels; // pixels do trabalhador
context.putImagedata (new_pixels, 0, 0);
img.src = canvas.todataurl (); // e depois para o IMG
}
}
</script>
<script type = "text/javascript">
$ (function () {
$ (". ONHOVER").
var x = this.width;
var y = this.Height;
console.log ("x:" + x + "y:" + y);
processo (este, x, y);
});
})
</script>
</body>
</html>
Ao executar o exemplo acima, você mesmo precisa apresentar o pacote jQuery e colocar a imagem que deseja alterar na tag IMG na página HTML. Em seguida, implante para o servidor e abra a página. Quando o mouse se move para o topo da imagem, a transformação ocorrerá. O trabalhador é responsável pela função que desempenha a função de transformação aqui e não afetará a eficiência da própria página à vontade, semelhante à multi-threading no idioma Java.