1）使用setFilter（它可以工作！）

Question

我正在使用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（图像），我希望图像变量是新的黑色和白色而不是旧的。

所以有人知道问题是什么，或者我如何让新的imgPixels与我的图像相同。提前致谢

Answer 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会被过滤为黑色＆amp;白。

的更新

打开此链接：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>

裁剪图像然后应用滤镜Kinetic

1 个答案:

1）使用setFilter（它可以工作！）

2）预先在图像上设置过滤器属性

的更新