Комментарий: При выполнении следующего примера вы должны представить пакет jQuery самостоятельно и поместить изображение, которое вы хотите изменить на теге IMG на странице HTML. Конкретные шаги реализации следующие. Заинтересованные друзья могут ссылаться на это. Я надеюсь, что это будет полезно для всех.
Code Worker's JS Img.jsonMessage = function (e) {
Postmessage (фильтр (e.data))
};
Функциональный фильтр (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] = greyscale; // красный
pix [i + 1] = greyscale; // зеленый
pix [i + 2] = greyscale; // синий
}
imgd ['pixels']. data = pix;
вернуть imgd;
}
HTML -код
<! Doctype html>
<html>
<голова>
<title> test2.html </title>
<meta http-equiv = "Keywords" content = "Keyword1, Keyword2, Keyword3">
<meta http-equiv = "description" content = "Это моя страница">
<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>
<тело>
<Canvas> </canvas>
<img src = "../ image/psu [4] .jpg"> // Обратите внимание, что вы вставляете изображение здесь, иначе это будет бесполезно.
<script type = "text/javascript">
Функциональный процесс (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 = новый работник ("img.js");
var obj = {
пиксели: пиксели,
x: x,
Y: Y.
}
Worker.postmessage (obj);
Worker.onmessage = function (e) {
if (typeof e.data === "string") {
console.log ("Работник:" + e.data);
возвращаться;
}
var new_pixels = e.data.pixels; // пиксели от работника
context.putimagedata (new_pixels, 0, 0);
img.src = canvas.todataurl (); //, а затем в IMG
}
}
</script>
<script type = "text/javascript">
$ (function () {
$ (". Onhover"). On ("mouseover", function () {
var x = this.width;
var y = this.height;
console.log ("x:" + x + "y:" + y);
процесс (это, x, y);
});
})
</script>
</body>
</html>
При выполнении приведенного выше примера вам нужно самостоятельно представить пакет jQuery и разместить изображение, которое вы хотите изменить на теге IMG на странице HTML. Затем разверните на сервере и откройте страницу. Когда мышь перейдет в верхнюю часть изображения, произойдет преобразование. Работник отвечает за функцию, которая выполняет здесь функцию преобразования, и не повлияет на эффективность самой страницы по желанию, аналогично многопоточному языку на языке Java.