结合kineticjs和pixastic来应用图像效果

Question

我正在尝试使用pixastic libary中的一些功能并将其与kineticjs结合使用。其中之一是将pixastic中的棕褐色效果应用于使用kineticjs创建的图像。

我在这里设置了一个jsfiddle：

http://jsfiddle.net/SkVJu/28/

我认为以下内容可行：

function sepia() {
    Pixastic.process(darth, "sepia");
    layer.draw();
}

但图像保持不变。我是否遗漏了某些内容，或者甚至无法将两个库合并在一起？

Answer 1

我的猜测是你不能将Pixastic函数直接应用到Kinetic.Image对象上，因为它与常规图像对象略有不同。

或者，您需要抓取图像的原始来源，然后您可以在该图像上运行Pixastic效果，然后使用新受影响的图像set Kinetic.Image对象。

function sepia() {
  var sepia = Pixastic.process(darth.attrs.image, "sepia");
  darth.setImage(sepia);
  layer.draw();
}

以下是完整代码：jsfiddle

注意：您必须在本地服务器上运行此功能，因为它无法在jsfiddle上运行（ pixastic 库无法作为外部资源，没有CDN主机）

第二个注意：您必须在var layer函数之外声明imageObj.onload，否则您的sepia()函数无法访问layer来自imageObj.onload内部。您可以在jsfiddle中看到我是如何做到的。