HTML5-Worker-Beispiel (2) Bildtransformationseffekt-HTML-Tutorial-php.cn

HTML5-Worker-Beispiel (2) Bildtransformationseffekt

黄舟

Freigeben： 2016-12-20 14:59:16

Original

1333 Leute haben es durchsucht

Arbeiter-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; 
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

Wenn Sie das obige Beispiel ausführen, müssen Sie das JQuery-Paket selbst und auf der HTML-Seite einführen Fügen Sie das Bild, das Sie umwandeln möchten, in das img-Tag ein. Stellen Sie es dann auf dem Server bereit, öffnen Sie die Seite, und wenn die Maus über das Bild bewegt wird, erfolgt die Transformation. Die Funktion, die hier die Transformationsfunktion ausführt, ist für den Worker verantwortlich, was keinen Einfluss auf die Effizienz der Seite selbst hat. ähnlich dem Multithreading in der Java-Sprache.

Das Obige ist der Inhalt des Bildtransformationseffekts des HTML5-Worker-Beispiels (2). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!