html5ワーカー例(2) 画像変換効果-htmlチュートリアル-php.cn

html5ワーカー例(2) 画像変換効果

黄舟

リリース： 2016-12-20 14:59:16

オリジナル

1335 人が閲覧しました

Workerのjsコード 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コード

<!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 中国語 Web サイト (m.sbmmt.com) をご覧ください。