如何克隆已添加滤镜并完成缓存的EaselJS Bitmap？

这个问题我之前在项目里也碰到过！CreateJS的clone()确实不会自动带缓存后的滤镜效果，因为它默认只克隆原始位图数据，缓存属于渲染层的临时优化，不属于核心数据。重复创建滤镜和缓存确实会浪费大量性能，给你几个实用的解决方案，按需选择：

方案1：直接克隆缓存后的画布（性能最优） #

如果你的需求只是复用已经应用滤镜的最终渲染结果，不需要后续修改滤镜参数，直接基于原Bitmap的cacheCanvas创建新的Bitmap是最高效的方式：

// 原Bitmap已经加好滤镜并缓存
let clonedBitmap = new createjs.Bitmap(bitmap.cacheCanvas);

这样新的Bitmap直接使用已经处理好滤镜的缓存画布，完全不需要再执行滤镜计算和缓存操作，性能开销几乎为零。

方案2：手动复制滤镜与缓存状态（保留可编辑性） #

如果你需要后续对克隆体的滤镜进行调整，那可以先克隆原Bitmap，再手动复制滤镜数组并重新执行缓存（注意只执行一次，避免重复消耗资源）：

let clonedBitmap = bitmap.clone();
// 复制原Bitmap的滤镜数组（浅拷贝足够，滤镜实例通常可以复用）
clonedBitmap.filters = [...bitmap.filters];
// 复用原Bitmap的缓存参数，确保效果一致
clonedBitmap.cache(0, -blurY, bitmap.width, bitmap.height + blurY);

这个方法保留了克隆体的滤镜可编辑性，后续你可以修改clonedBitmap.filters里的参数并重新缓存，但要注意频繁修改缓存也会有性能开销，尽量批量操作。

方案3：提前创建模板复用（大量克隆场景首选） #

如果需要多次克隆同一种带滤镜的Bitmap，建议提前创建一个“模板Bitmap”，一次性处理好滤镜和缓存，之后所有克隆都基于模板的缓存画布：

// 提前创建并处理模板
let templateBitmap = new createjs.Bitmap(originalImage);
let blurFilter = new createjs.BlurFilter(blurX, blurY, blurQuality);
templateBitmap.filters = [blurFilter];
templateBitmap.cache(0, -blurY, templateBitmap.width, templateBitmap.height + blurY);

// 后续克隆直接复用模板的缓存结果
let clonedBitmap1 = new createjs.Bitmap(templateBitmap.cacheCanvas);
let clonedBitmap2 = new createjs.Bitmap(templateBitmap.cacheCanvas);
// 可以给克隆体设置不同的位置、缩放等属性
clonedBitmap1.x = 100;
clonedBitmap2.x = 300;

这种方式只需要执行一次滤镜计算和缓存操作，后续所有克隆都是直接复用现成的画布，在大量克隆的场景下能极大节省性能。

补充说明 #

为什么clone()默认不带缓存效果？因为CreateJS的clone()方法设计目标是克隆原始数据（比如图像源、位置、缩放等），而缓存是为了优化渲染临时生成的画布，不属于原始数据的一部分，所以不会被自动克隆。

内容的提问来源于stack exchange，提问作者MrNobody