如何在Firefox中的边界处理getImageData?

时间:2011-01-31 20:09:57

标签: javascript html5 firefox html5-canvas getimagedata

我目前正在编写一个小型绘图应用程序,需要访问像素数据以获取其污迹和模糊工具,并且在Firefox中遇到了HTML5 Canvas API的难题。显然它没有像规范中那样实现getImageData。 spec specifically says“...画布外的像素必须以透明黑色返回....”。

这不会发生在FF中(在FF 3.6和4 beta 9中测试)。相反,它会给出如下错误:指定了无效或非法的字符串“code:”12

请注意,这似乎可以在Chrome中正常使用。

我想这意味着我将不得不实施一些额外的代码来解决这个限制。我设法使用以下代码绕过了这个问题:

            getImageDataAround: function(p, r) {
                p = this._toAbsolute(p);
                r = this._toAbsolute(r);

                p = p.sub(r);

                var d = r * 2;
                var width = d;
                var height = d;

                // XXX: FF hack
                if(navigator.userAgent.indexOf('Firefox') != -1) {
                    if(p.x < 0) {
                        width += p.x;
                        p.x = 0;
                    }

                    if(p.y < 0) {
                        height += p.y;
                        p.y = 0;
                    }

                    var x2 = p.x + width;
                    if(x2 >= this.width) {
                        width = d - (x2 - this.width);
                    }

                    var y2 = p.y + height;
                    if(y2 >= this.height) {
                        height = d - (y2 - this.height);
                    }

                    if((width != d) || (height != d)) {
                        // XXX: not ideal but at least this won't give any
                        // errors
                        return this.ctx.createImageData(d, d);
                    }
                }

                return this.ctx.getImageData(p.x, p.y, width, height);
            },

这并不酷,因为我将一堆空像素返回给调用者。返回结果会更好,就像规范一样。

只是为了澄清代码是Context API的一部分,它包装了真实的上下文并提供了一些额外的功能(相对协调等)。这可能解释了像this.width等来自何处。

这是XXX部分很麻烦。我只需要一些方法来返回符合规范的ImageData。欢迎任何有关如何做到这一点的想法。 :)

2 个答案:

答案 0 :(得分:1)

也许你可以用d创建一个大小为d的画布,并将原始画布的相应部分绘制到它上面?遗憾的是,您无法直接绘制原始画布,因为您遇到了相同类型的边界检查代码,因此您必须弄清楚重叠。

你应该考虑嗅探Gecko而不是Firefox。

顺便说一下,这是Mozilla bug 392751

答案 1 :(得分:0)

我最终使用以下代码段来解决此问题。希望有人觉得它很有用......

var getImageDataAround = function(ctx, p, r) {
    // ctx: HTML5 Canvas 2D context
    // p: {x: 23, y: 37}
    // r: radius in px

    // FF fails with fractional values
    p.x = Math.round(p.x);
    p.y = Math.round(p.y);
    r = parseInt(r);

    p.x -= r;
    p.y -= r;

    var d = r * 2;
    var width = d;
    var height = d;

    // FF fails at bounds
    if(navigator.userAgent.indexOf('Gecko') != -1) {
        var xOffset = 0;
        var yOffset = 0;

        if(p.x < 0) {
            xOffset = -p.x;
            width += p.x;
            p.x = 0;
        }

        if(p.y < 0) {
            yOffset = -p.y;
            height += p.y;
            p.y = 0;
        }

        var x2 = p.x + width;
        if(x2 >= ctx.canvas.width) {
            width = d - (x2 - ctx.canvas.width);
        }

        var y2 = p.y + height;
        if(y2 >= ctx.canvas.height) {
            height = d - (y2 - ctx.canvas.height);
        }

        if((width != d) || (height != d)) {
            var data = ctx.createImageData(d, d);

            if(xOffset >= d || yOffset >= d ||
                    width < 1 || height < 1) {
                // totally outside of bounds
                return data;
            }

            var originalData = ctx.getImageData(p.x, p.y,
                width, height);
            var pos = 4 * (xOffset + d * yOffset);
            var dataLen = 4 * d * (yOffset + height);

            for(var originalPos = 0, x = xOffset;
                    pos < dataLen;
                    pos += 4, originalPos += 4, x++) {
                if(x == d) {
                    x = xOffset;
                    pos += xOffset * 4;
                }

                if(xOffset <= x && x < width + xOffset) {
                    data.data[pos] = originalData.data[originalPos];
                    data.data[pos + 1] = originalData.data[originalPos + 1];
                    data.data[pos + 2] = originalData.data[originalPos + 2];
                    data.data[pos + 3] = originalData.data[originalPos + 3];
                }
                else {
                    originalPos -= 4;
                }
            }

            return data;
        }
    }

    return ctx.getImageData(p.x, p.y, width, height);
}
豫ICP备18024241号-1