Firefox抛出一个异常与HTML Canvas putImageData [英] Firefox throwing a exception with HTML Canvas putImageData

问题描述

所以我正在这个小javascript实验，我需要一个小部件来跟踪它的FPS。我将一个我一直在使用ActionScript 3的小部件移植到Javascript，它似乎在Chrome / Safari中正常工作，但在Firefox上却抛出异常。

So I was working on this little javascript experiment and I needed a widget to track the FPS of it. I ported a widget I've been using with Actionscript 3 to Javascript and it seems to be working fine with Chrome/Safari but on Firefox is throwing an exception.

实验：

景深< a>

Depth of Field

这是错误：

[Exception... "An invalid or illegal string was specified"  code: "12" nsresult: "0x8053000c (NS_ERROR_DOM_SYNTAX_ERR)"  location: "http://mrdoob.com/projects/chromeexperiments/depth_of_field__debug/js/net/hires/debug/Stats.js Line: 105"]

关注的行是这一行：

graph.putImageData(graphData, 1, 0, 0, 0, 69, 50);

这是一个潦草的代码，滚动位图像素。这个想法是，我只在位图的左边绘制几个像素，然后在下一帧我复制整个位图，并将其粘贴到像素右侧。这个错误通常被抛出，因为你粘贴的位图大于源和它的极限，但在理论上不应该是这样的情况，因为我定义69作为要粘贴的矩形的宽度（是位图70像素宽）。

Which is a crappy code to "scroll" the bitmap pixels. The idea is that I only draw a few pixels on the left of the bitmap and then on the next frame I copy the whole bitmap and paste it on pixel to the right. This error usually is thrown because you're pasting a bitmap bigger than the source and it's going off the limits, but in theory that shouldn't be the case as I'm defining 69 as the width of the rectangle to paste (being the bitmap 70px wide).

这是完整的代码：

var Stats = {
baseFps: null,

timer: null,
timerStart: null,
timerLast: null,
fps: null,
ms: null,

container: null,
fpsText: null,
msText: null,
memText: null,
memMaxText: null,

graph: null,
graphData: null, 

init: function(userfps)
{
    baseFps = userfps;

    timer = 0;
    timerStart = new Date() - 0;
    timerLast = 0; 
    fps = 0;
    ms = 0;

    container = document.createElement("div");
    container.style.fontFamily = 'Arial';
    container.style.fontSize = '10px';
    container.style.backgroundColor = '#000033';
    container.style.width = '70px';
    container.style.paddingTop = '2px';

    fpsText = document.createElement("div");
    fpsText.style.color = '#ffff00';
    fpsText.style.marginLeft = '3px';
    fpsText.style.marginBottom = '-3px';
    fpsText.innerHTML = "FPS:";
    container.appendChild(fpsText);

    msText = document.createElement("div");
    msText.style.color = '#00ff00';
    msText.style.marginLeft = '3px';
    msText.style.marginBottom = '-3px';
    msText.innerHTML = "MS:";
    container.appendChild(msText);

    memText = document.createElement("div");
    memText.style.color = '#00ffff';
    memText.style.marginLeft = '3px';
    memText.style.marginBottom = '-3px';
    memText.innerHTML = "MEM:";
    container.appendChild(memText);

    memMaxText = document.createElement("div");
    memMaxText.style.color = '#ff0070';
    memMaxText.style.marginLeft = '3px';
    memMaxText.style.marginBottom = '3px';
    memMaxText.innerHTML = "MAX:";
    container.appendChild(memMaxText);

    var canvas = document.createElement("canvas");
    canvas.width = 70;
    canvas.height = 50;
    container.appendChild(canvas);

    graph = canvas.getContext("2d");
    graph.fillStyle = '#000033';
    graph.fillRect(0, 0, canvas.width, canvas.height );

    graphData = graph.getImageData(0, 0, canvas.width, canvas.height);

    setInterval(this.update, 1000/baseFps);

    return container;
},

update: function()
{
    timer = new Date() - timerStart;

    if ((timer - 1000) > timerLast)
    {
        fpsText.innerHTML = "FPS: " + fps + " / " + baseFps;
        timerLast = timer;

        graph.putImageData(graphData, 1, 0, 0, 0, 69, 50);
        graph.fillRect(0,0,1,50);
        graphData = graph.getImageData(0, 0, 70, 50);

        var index = ( Math.floor(Math.min(50, (fps / baseFps) * 50)) * 280 /* 70 * 4 */ );
        graphData.data[index] = graphData.data[index + 1] = 256;

        index = ( Math.floor(Math.min(50, 50 - (timer - ms) * .5)) * 280 /* 70 * 4 */ );
        graphData.data[index + 1] = 256;            

        graph.putImageData (graphData, 0, 0);

        fps = 0;            
    }

    ++fps;

    msText.innerHTML = "MS: " + (timer - ms);
    ms = timer;
}

}

有任何想法吗？提前感谢。

Any ideas? Thanks in advance.

推荐答案

这是Firefox的一个错误。 Mozilla 知道。以下是解决方法：

It's a bug in Firefox. Mozilla knows about it. Here's the workaround:

1. 创建新的内存画布：

1. Make a new in-memory canvas:

var spriteCanvas = document.createElement('canvas');

将画布的高度/宽度设置为图像的高度/宽度： / p>

Set the height/width of the canvas to the height/width of your image:

spriteCanvas.setAttribute('width', 20);
spriteCanvas.setAttribute('height', 20);

将图像数据放入画布位置（0,0）：

Put the image data into the canvas at position (0,0):

spriteCanvas.getContext('2d').putImageData(imageData, 0, 0);

在主画布的上下文中，使用drawImage -screen或off-screen：

On the context for your main canvas, draw your canvas sprite using drawImage using any position on-screen or off-screen:

context.drawImage(spriteCanvas, 50, 100); // clipping is allowed

这篇关于Firefox抛出一个异常与HTML Canvas putImageData的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！