댓글 : 다음 예제를 실행할 때 jQuery 패키지를 직접 소개하고 HTML 페이지의 IMG 태그에 변경하려는 이미지를 넣어야합니다. 특정 구현 단계는 다음과 같습니다. 관심있는 친구들이 그것을 언급 할 수 있습니다. 모든 사람에게 도움이되기를 바랍니다.
작업자의 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] = 그레이 스케일; // 빨간색
pix [i + 1] = 그레이 스케일; // 녹색
pix [i + 2] = 그레이 스케일; // 파란색
}
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>
<body>
<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 노동자 = 신규 노동자 ( "img.js");
var obj = {
픽셀 : 픽셀,
더블 엑스,
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 type = "text/javaScript">
$ (function () {
$ ( ". onhover"). on ( "마우스 오버", function () {
var x = this.width;
var y = this.height;
console.log ( "x :" + x + "y :" + y);
프로세스 (this, x, y);
});
})
</스크립트>
</body>
</html>
위의 예제를 실행할 때 jQuery 패키지를 직접 소개하고 HTML 페이지의 IMG 태그에 변경하려는 이미지를 넣어야합니다. 그런 다음 서버에 배포하고 페이지를 엽니 다. 마우스가 그림의 상단으로 이동하면 변환이 발생합니다. 작업자는 여기서 변환 함수를 수행하는 기능을 담당하며 Java 언어의 멀티 스레딩과 유사하게 페이지 자체의 효율성에 영향을 미치지 않습니다.