Question

我目前正在编写一个小型绘图应用程序，需要访问像素数据以获取其污迹和模糊工具，并且在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。欢迎任何有关如何做到这一点的想法。：）

Answer 1

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

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

顺便说一下，这是Mozilla bug 392751。

Answer 2

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

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);
}

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

2 个答案: