Kineticjs - 过滤器 + 裁剪答案

【问题标题】：Kineticjs - Filter + CropKineticjs - 过滤器 + 裁剪
【发布时间】：2026-01-08 20:35:02
【问题描述】：

（我使用 Kinetic 4.6.0）

这是一个错误吗？当您在图像上应用裁剪时，一切都很好，如下所示： image with crop 但如果我使用过滤器，就会出现以下结果： image with crop + filter 比例不太好。所有图像都经过压缩以输入作物的宽度和高度。

一些想法？

我的裁剪代码：

this.imageFond = new Kinetic.Image({
    image               : this.imageObj,
    //filter            : Kinetic.Filters.Blur,
    //filterRadius      : 20
});
this.imageFond.setCrop([50,50,750,1100]);
this.imageFond.setWidth(750);
this.imageFond.setHeight(1100);

this.layer.add(this.imageFond);
this.layer.batchDraw();

我的裁剪 + 过滤器代码：

this.imageFond = new Kinetic.Image({
    image               : this.imageObj,
    filter              : Kinetic.Filters.Blur,
    filterRadius        : 20
});
this.imageFond.setCrop([50,50,750,1100]);
this.imageFond.setWidth(750);
this.imageFond.setHeight(1100);

this.layer.add(this.imageFond);
this.layer.batchDraw();

【问题讨论】：

标签： kineticjs

【解决方案1】：

过滤器无法正确处理裁剪后的图像。我提出了这个拉取请求来修复它。它尚未合并，因此您需要自己应用它。这至少为我解决了问题。希望这会有所帮助：

Pull request to fix filters for cropped images

【讨论】：

感谢您的回答，但我无法让它与 kineticjs v4.6.0 一起使用。我已将您的图像原型与原始图像合并，但出现此错误：IndexSizeError: Index or size is negative or greater than the allowed amountcontext.drawImage(a[0], a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8]); 比例有误吗？
我刚刚更新到4.7，需要合并。如果我让它工作，我会告诉你的。如果你让它工作，请做同样的事情！太糟糕了，它没有合并到主人。