当前位置： 移动技术网 > IT编程>网页制作>Html5 > html5 worker 实例 图片变换

html5 worker 实例 图片变换

2018年03月17日  | 移动技术网IT编程  | 我要评论

worker的js代码img.js[plain] view plaincopyprint?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; 
} 

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代码[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('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("mouver", function(){ 
           var x =this.width; 
           var y = this.height; 
           console.log("X: " + x + " Y: " + y); 
           process(this, x, y); 
           }); 
   }) 
   
  </script> 
</body> 
</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('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>
是执行上面的例子的时候 ，要自己引入jquery包，并且在html页面上的img标签上放入自己要变换的图片。然后部署到服务器，打开页面，当鼠标移动到图片的 上面的时候就会发生变换，在这里执行变换功能的函数有worker负责，随意不影响页面本身的效率，类似于java语言中的多线程。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网