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">


<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>

<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) {

补充：web前端 , HTML 5 ,

html5 worker 实例 图片变换

html5 worker 实例图片变换