【问题标题】：Crop an image and then apply filter Kinetic裁剪图像，然后应用过滤器动力学
【发布时间】：2013-09-19 13:33:12
【问题描述】：

我正在使用 Kinetic 进行一些图像处理。发生的事情是我裁剪了我的图像，然后通过单击一个按钮，我想让它变成黑白的。由于某种原因，当您首先进行裁剪时，简单的 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);

所以现在我得到了带有过滤器的裁剪图像，但是如果我想继续对图像对象做一些事情，我会得到：

TypeError: a.getType is not a function

我还认为我以前在代码中使用的图像对象现在就像未定义的一样。

因此，例如，我希望在过滤器之后执行 layer.add(image) 并且我希望图像变量是新的黑白变量，而不是旧的变量。

那么有没有人知道问题出在哪里，或者我怎样才能使新的 imgPixels 与我的图像相同。提前致谢

【问题讨论】：

标签： html filter kineticjs crop putimagedata

【解决方案1】：

您没有使用Kinetic.Filters.Grayscale 过滤器有什么原因吗？

这里有两种方法可以做到：

1) 使用 setFilter（有效！）

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

2) 预先在图片上设置滤镜属性

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

无论哪种方式，您都不需要添加任何新图像，原始的Kinetic.Image 是经过黑白过滤的。

更新

打开此链接：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/

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

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

【讨论】：

由于某种原因，当我使用此代码时，我的图像没有任何反应。
不能同时onload这两个东西，不知道是不是这个问题。我在一个函数中创建和裁剪图像，然后当我点击一个按钮时我执行 setFilter 但没有任何反应。
以上两个例子你都试过了吗？请记住，在调用setFilter() 之后，您可以使用layer.draw()。在我的第二个示例中，您甚至不必调用 setFilter，只需在创建图像时设置 crop 和 filter 属性！
是的，我都试过了。但是我不能在我的代码中完全像这样应用它们。例如我不能使用 imageObj.src。这是我一开始加载图像时所做的事情。然后我有一个用于裁剪的按钮，然后是另一个用于黑白的按钮。
裁剪图像前的 setFilter 工作正常，问题出在裁剪后。