Heim > Artikel > Web-Frontend > HTML5-Worker-Beispiel (2) Bildtransformationseffekt
HTML5-Worker-Beispiel (2) Bildtransformationseffekt
- 黄舟Original
- 2016-12-20 14:59:161322Durchsuche
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['pixels'].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('2d');
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>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 (www.php.cn)!