调用HTML5 Canvas上下文putImageData时出现Overload resolution failed错误

我正在学习MDN Canvas教程，编写了一段代码，本应将画布左上角50×50像素区域染成红色，但在Chrome浏览器中测试时，出现了‘Overload resolution failed’的奇怪错误，搜索后未找到相关解决方案。

报错信息 #

Test002.html:35 Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': Overload resolution failed.
    at draw (Test002.html:35:8)
draw @ Test002.html:35
load (async)
(anonymous) @ Test002.html:48

原始代码 #

<html>
    <body>
        <canvas id="canvas1" width="800" height="600" style="border: 1px solid black;">

    <script type="text/javascript">

        const canvas = document.getElementById("canvas1");
        const ctx = canvas.getContext("2d");

        const idata = ctx.getImageData(0, 0, canvas.width, canvas.height);
        console.log(idata);


        const getColorIndicesForCoord = (x, y, width) => {
          const red = y * (width * 4) + x * 4;
          return [red, red + 1, red + 2, red + 3];
        };

        const colorIndices = getColorIndicesForCoord(5, 5, canvas.width);

        const [redIndex, greenIndex, blueIndex, alphaIndex] = colorIndices;

        function draw() {

            console.log("Started drawing.");

            for (let i=0; i<50; i++) {
                for (let j=0; j<50; j++) {
                    putPixel(i, j, 200, 0, 0);
                }
            }

            // (imageData, xLoc, yLoc, 0, 0, imgWidth, imgHeight); 

            ctx.putImageData(idata, 0, 0, 0, 0);

            console.log("Finished drawing.");
        }

        function putPixel(x,y,r,g,b) {
            let colorIndices = getColorIndicesForCoord(x, y, canvas.width);
            idata[colorIndices[0]] = r;
            idata[colorIndices[1]] = g;
            idata[colorIndices[2]] = b;
            // idata[colorIndices[3]] = a;
        }

        window.addEventListener("load", draw);

    </script>
    </body>

</html>

问题分析与修复 #

1. putImageData 参数不合法 #

putImageData仅支持两种参数组合：

• 基础绘制：ctx.putImageData(imageData, x, y)（绘制整个ImageData到画布指定位置）
• 裁剪绘制：ctx.putImageData(imageData, x, y, sx, sy, sw, sh)（从ImageData中裁剪指定区域绘制）

你调用时传了5个参数ctx.putImageData(idata, 0, 0, 0, 0)，不符合任何一种参数规则，导致浏览器无法解析重载，触发错误。如果要绘制整个ImageData，直接使用3参数版本即可。

2. ImageData 像素操作错误 #

ImageData的像素颜色数据存储在idata.data数组中，你直接操作idata[colorIndices[0]]是无效的，必须修改idata.data对应的索引位置才能改变像素颜色。

修正后的代码 #

<html>
    <body>
        <canvas id="canvas1" width="800" height="600" style="border: 1px solid black;">

    <script type="text/javascript">

        const canvas = document.getElementById("canvas1");
        const ctx = canvas.getContext("2d");

        const idata = ctx.getImageData(0, 0, canvas.width, canvas.height);
        console.log(idata);


        const getColorIndicesForCoord = (x, y, width) => {
          const red = y * (width * 4) + x * 4;
          return [red, red + 1, red + 2, red + 3];
        };

        function draw() {
            console.log("Started drawing.");

            for (let i=0; i<50; i++) {
                for (let j=0; j<50; j++) {
                    putPixel(i, j, 200, 0, 0);
                }
            }

            // 使用合法的3参数版本putImageData
            ctx.putImageData(idata, 0, 0);

            console.log("Finished drawing.");
        }

        function putPixel(x,y,r,g,b) {
            let colorIndices = getColorIndicesForCoord(x, y, canvas.width);
            // 操作idata.data数组修改像素颜色
            idata.data[colorIndices[0]] = r;
            idata.data[colorIndices[1]] = g;
            idata.data[colorIndices[2]] = b;
            // 设置alpha通道为255（完全不透明）
            idata.data[colorIndices[3]] = 255;
        }

        window.addEventListener("load", draw);

    </script>
    </body>

</html>

内容的提问来源于stack exchange，提问作者peter.petrov