Firefox使用HTML Canvas putImageData抛出异常

Question

所以我正在研究这个小小的javascript实验,我需要一个小部件来跟踪它的FPS.我移植了一个小部件,我一直在使用Actionscript 3到Javascript,它似乎与Chrome/Safari一起工作正常但在Firefox上却抛出异常.

这是实验:

景深

这是错误:

[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定义为要粘贴的矩形的宽度(是位图70px宽).

这是完整的代码:

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

}

有任何想法吗？提前致谢.

Answer 1

这是Firefox中的一个错误.Mozilla 知道这件事.这是解决方法:

1. 制作一个新的内存画布:

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

2. 将画布的高度/宽度设置为图像的高度/宽度:

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

3. 将图像数据放入位置(0,0)的画布中:

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

4. 在主画布的上下文中,使用drawImage在屏幕上或屏幕外的任何位置绘制画布精灵:

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

Answer 2

我认为您需要为 putImageData 指定另外两个参数：宽度和高度。

看这里