EaselJS colorMatrixFilter 不适用于 Chrome答案

【问题标题】：EaselJS colorMatrixFilter won't work on ChromeEaselJS colorMatrixFilter 不适用于 Chrome
【发布时间】：2014-12-28 21:02:39
【问题描述】：

我正在尝试在 Bitmap 对象上使用 EaselJS 的 colorMatrixFilter，缓存然后将其用作 SpriteSheet 对象的源图像，但它不适用于 Chrome。它可以在 Firefox 和 Safari 上运行。

Chrome（应该是blue狐狸）：

Safari：

这是我的代码：

lr.SpriteSheet = function (sSprite, nFrameWidth, nFrameHeight, oAnimations) {
    var _cacheBmp = new createjs.Bitmap(sSprite);

    return {
        Sprite: function (oArgs) {
            oArgs = oArgs || {};

            _cacheBmp.filters = oArgs.aFilters || [];
            _cacheBmp.cache(0, 0, _cacheBmp.image.width, _cacheBmp.image.height);
            var spriteSheet = new createjs.SpriteSheet({
                images: [_cacheBmp.cacheCanvas],
                frames: {width: nFrameWidth, height: nFrameHeight},
                animations: oAnimations
            });
            this.self = new createjs.Sprite(spriteSheet, oArgs.sAction || 0);
            this.self.set({
                x: (oArgs.nX || 0) * lr.GRID,
                y: (oArgs.nY || 0) * lr.GRID
            }).set(oArgs.oProps || {});
            lr.scene.addChild(this.self);
        }
    }
}

var fox = new lr.SpriteSheet("Graphics/Fox.png", 30, 40, {
        stand: 0,
        run: {
            frames: [0,0,0,0,1,1,2,3,3,4,4,4,4,3,3,2,1,1,0,0,0,0,5,5,6,7,7,8,8,8,8,7,7,6,5,5], // Easing
            next: true
        },
        jump: [10, 14, "neutral", 0.5],
        runJump: [5, 7, "split", 0.666],
        neutral: 15,
        split: 8,
        fall: 16,
        land: [16, 20, "stand", 0.5],
        almostFalling: [9, 9, true, 0.1]
    });

var matrix = new createjs.ColorMatrix().adjustColor(-25, 10, -25, -180);
var player = new fox.Sprite({
    nX: 1, nY: 1,
    oProps: {regX: 7, regY: 6},
    nWidth: 11, nHeight: 30,
    aFilters: [new createjs.ColorMatrixFilter(matrix)],
    sAction: "run",
    aPush: [lr.movable, lr.collidable]
});

我试过检查_cacheBmp.filters 的值，它返回[colorMatrixFilter]，我认为这是正确的。有人可以帮我吗？

【问题讨论】：

标签： javascript google-chrome html5-canvas easeljs createjs

【解决方案1】：

看来我要回答我自己的问题ag a i n。无论如何，这是一个愚蠢的错误......

花了很多时间试图解决一个不存在的跨域安全问题后，我发现问题正在发生，因为我是在本地测试 (file:///)，而过滤器或缓存在此不起作用某些浏览器的情况。

如果您遇到完全相同的问题，只需访问 localhost。

【讨论】：