1

我正在使用 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 与我的图像相同。提前致谢

4

1 回答 1

0

你有什么理由不使用Kinetic.Filters.Grayscale过滤器吗？

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

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>
于 2013-09-19T14:41:05.267 回答