html5 작업자 예제(2) 이미지 변환 효과-HTML 튜토리얼-php.cn

html5 작업자 예제(2) 이미지 변환 효과

黄舟

풀어 주다： 2016-12-20 14:59:16

원래의

1320명이 탐색했습니다.

worker's js code img.js

onmessage = function(e) { 
postMessage(filter(e.data)) 
}; 
function filter(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] = grayscale; // red 
pix[i + 1] = grayscale; // green 
pix[i + 2] = grayscale; // blue 
} 
imgd[&#39;pixels&#39;].data = pix; 
return imgd; 
}

로그인 후 복사

html code

<!DOCTYPE html> 
<html> 
<head> 
<title>test2.html</title> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script> 
</head> 
<body> 
<canvas id="myCanvas" width="640" height="480"></canvas> 
<img src="../image/psu[4].jpg" class="onHover"> //注意，自己在这里插入一张图片，否则没用效果 
<script type="text/javascript"> 
function process(img,x,y){ 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext(&#39;2d&#39;); 
context.drawImage(img, 0, 0); 
var pixels = context.getImageData(0,0,img.width,img.height); 
var worker = new Worker("img.js"); 
var obj = { 
pixels: pixels, 
x:x, 
y:y 
} 
worker.postMessage(obj); 
worker.onmessage = function(e) { 
if (typeof e.data === "string") { 
console.log("Worker: " + e.data); 
return; 
} 
var new_pixels = e.data.pixels; // Pixels from worker 
context.putImageData(new_pixels, 0, 0); 
img.src = canvas.toDataURL(); // And then to the 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); 
process(this, x, y); 
}); 
}) 
</script> 
</body> 
</html>

로그인 후 복사

는 위 예제를 실행할 때 jquery 패키지를 직접 소개해야 하고, html 페이지에 img 태그에 변환하고 싶은 이미지를 넣어주세요. 그런 다음 서버에 배포하고 페이지를 열면 그림 위에 마우스를 올리면 변환이 발생합니다. 여기서 변환 기능을 수행하는 함수는 작업자를 담당하므로 페이지 자체의 효율성에는 영향을 미치지 않습니다. Java 언어의 멀티스레딩과 유사합니다.

위 내용은 html5 작업자 예시(2)의 이미지 변환 효과 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!