首页前端开发HTMLhtml5 worker 实例 图片变换

html5 worker 实例 图片变换

时间2024-01-26 11:43:03发布访客分类HTML浏览261
导读：收集整理的这篇文章主要介绍了html5教程-html5 worker 实例 图片变换，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 worker的...
收集整理的这篇文章主要介绍了html5教程-html5 worker 实例 图片变换，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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("mouseover", 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语言中的多线程。

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("mouseover", 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语言中的多线程。

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

ClassCSSdivHTMLjQuerypost-format-gallerythis

若转载请注明出处： html5 worker 实例 图片变换
本文地址： https://pptw.com/jishu/586715.html
PhoneGap-----Accelerometer html5表单上传控件Files API

游客 回复需填写必要信息
↑