Html 裁剪图像，然后应用过滤器_Html_Filter_Kineticjs_Crop_Putimagedata

Html 裁剪图像，然后应用过滤器

html filter

Html 裁剪图像，然后应用过滤器,html,filter,kineticjs,crop,putimagedata,Html,Filter,Kineticjs,Crop,Putimagedata,我正在使用Kinetic进行一些图像处理。发生的事情是，我裁剪我的图像，然后点击一个按钮，我想使它黑白。由于某些原因，在这种情况下，当您首先进行裁剪时，simple setFilter函数不起作用。这是裁剪的代码： layer.removeChildren(); layer.clear(); image = new Kinetic.Image({ image: canvasImage, x: (canvasWidth/2-theSelec

我正在使用Kinetic进行一些图像处理。发生的事情是，我裁剪我的图像，然后点击一个按钮，我想使它黑白。由于某些原因，在这种情况下，当您首先进行裁剪时，simple setFilter函数不起作用。这是裁剪的代码：

    layer.removeChildren();
    layer.clear();
    image = new Kinetic.Image({
        image: canvasImage,
        x: (canvasWidth/2-theSelection.w/2),
        y: (canvasHeight/2-theSelection.h/2),
        width: theSelection.w,
        height: theSelection.h,
        crop: [theSelection.x, theSelection.y, theSelection.w, theSelection.h],
        name: "image_tmp"
    });

    layer.add(image); 
    stage.draw();

下面是我决定用于应用过滤器的函数：

    var imgPixels = ctx.getImageData(xx, yy, imgW, imgH);

    for(var y = 0; y < imgPixels.height; y++){
        for(var x = 0; x < imgPixels.width; x++){
            var i = (y * 4) * imgPixels.width + x * 4;
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
            imgPixels.data[i] = avg;
            imgPixels.data[i + 1] = avg;
            imgPixels.data[i + 2] = avg;
        }
    }

    ctx.putImageData(imgPixels, xx, yy, 0, 0, imgPixels.width, imgPixels.height);

我还认为，我在代码中使用的图像对象现在是未定义的

例如，我想在过滤器后面做layer.add（image），我希望image变量是新的黑白变量，而不是旧的

那么，有没有人知道问题出在哪里，或者我如何使新的imgPixels与我的图像相同。提前感谢

是否有任何原因使您没有使用

动力学.Filters.Grayscale

过滤器

以下是两种方法：

1）使用setFilter（它可以工作！） 2）事先在图像上设置过滤器属性无论哪种方式，您都不需要添加任何新图像，原始的

Kinetic.Image

是经过黑白过滤的

更新打开此链接：

复制并粘贴此代码，替换链接中的所有代码。这对我来说很好

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <button id="crop">Crop</button>
    <button id="gray">Grayscale</button>
    <button id="both">Both</button>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
    <script defer="defer">
      var yoda;
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();

      var imageObj = new Image();
      imageObj.onload = function() {
        yoda = new Kinetic.Image({
          x: 200,
          y: 50,
          image: imageObj,
          width: 106,
          height: 118
        });

        // add the shape to the layer
        layer.add(yoda);

        // add the layer to the stage
        stage.add(layer);        
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

      document.getElementById('crop').addEventListener('click', function() {
        yoda.setCrop([20, 20, 50, 50]);
        layer.draw();
      });

      document.getElementById('gray').addEventListener('click', function() {
        yoda.setFilter(Kinetic.Filters.Grayscale);
        layer.draw();
      });

    document.getElementById('both').addEventListener('click', function() {
        yoda.setCrop([20, 20, 50, 50]);
        yoda.setFilter(Kinetic.Filters.Grayscale);
        layer.draw();
      });         

    </script>
  </body>
</html>


身体{
边际：0px；
填充：0px；
}
庄稼
灰度
二者都
约达变种；
var阶段=新的动力学阶段({
容器：'容器'，
宽度：578，
身高：200
});
var layer=新的动能层（）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
尤达=新的动力学图像({
x:200，
y:50，
图片：imageObj，
宽度：106，
身高：118
});
//将形状添加到层中
图层添加（yoda）；
//将层添加到舞台
阶段。添加（层）；
};
imageObj.src=http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
document.getElementById（'crop'）。addEventListener（'click'，function（）{
yoda.setCrop（[20,20,50,50]）；
layer.draw（）；
});
document.getElementById（'gray'）.addEventListener（'click'，function（）{
yoda.setFilter（动力学过滤器、灰度）；
layer.draw（）；
});
document.getElementById（'both'）。addEventListener（'click'，function（）{
yoda.setCrop（[20,20,50,50]）；
yoda.setFilter（动力学过滤器、灰度）；
layer.draw（）；
});

由于某些原因，当我使用此代码时，我的图像不会发生任何变化。它不能同时加载这两个内容，我不知道这是否是一个问题。我在一个函数中创建并裁剪图像，然后当我点击一个按钮时，我执行setFilter，但什么都没有发生。你试过上面的两个例子吗？请记住，在调用

setFilter（）

后，您可以使用

layer.draw（）

。在我的第二个示例中，您甚至不必调用setFilter，您只需在创建图像时设置

crop

和

filter

属性即可！是的，我两个都试过了。但是我不能在我的代码中完全像这样应用它们。例如，我不能使用imageObj.src。这是我在开始加载图像时做的事情。然后我有一个用于裁剪的按钮，然后是另一个用于黑白的按钮。裁剪图像之前的设置过滤器工作正常，问题是在裁剪之后。

var imageObj = new Image();
imageObj.onload = function() {
  var yoda = new Kinetic.Image({
    x: 200,
    y: 50,
    image: imageObj,
    crop: [0, 0, 50, 100]
  });

  // add the shape to the layer
  layer.add(yoda);

  // add the layer to the stage
  stage.add(layer);

  yoda.setFilter(Kinetic.Filters.Grayscale);
  layer.draw();
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

var imageObj = new Image();
imageObj.onload = function() {
  var yoda = new Kinetic.Image({
    x: 200,
    y: 50,
    image: imageObj,
    crop: [0, 0, 50, 100],
    filter: Kinetic.Filters.Grayscale
  });

  // add the shape to the layer
  layer.add(yoda);

  // add the layer to the stage
  stage.add(layer);

  //yoda.setFilter(Kinetic.Filters.Grayscale);
  //layer.draw();
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <button id="crop">Crop</button>
    <button id="gray">Grayscale</button>
    <button id="both">Both</button>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
    <script defer="defer">
      var yoda;
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();

      var imageObj = new Image();
      imageObj.onload = function() {
        yoda = new Kinetic.Image({
          x: 200,
          y: 50,
          image: imageObj,
          width: 106,
          height: 118
        });

        // add the shape to the layer
        layer.add(yoda);

        // add the layer to the stage
        stage.add(layer);        
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

      document.getElementById('crop').addEventListener('click', function() {
        yoda.setCrop([20, 20, 50, 50]);
        layer.draw();
      });

      document.getElementById('gray').addEventListener('click', function() {
        yoda.setFilter(Kinetic.Filters.Grayscale);
        layer.draw();
      });

    document.getElementById('both').addEventListener('click', function() {
        yoda.setCrop([20, 20, 50, 50]);
        yoda.setFilter(Kinetic.Filters.Grayscale);
        layer.draw();
      });         

    </script>
  </body>
</html>