javascript - 我的 "changeColor"javascript 函数在 Google Chrome 上不起作用

Question

我有一个函数可以更改 PNG 图像的颜色:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<img id="testImage" width="400px" height="400px" style="display: none;" src='test.png'/>
<canvas id="canvas" width="400" height="400"></canvas>

var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
image = document.getElementById("testImage");
ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, image.width, image.height),
pix = imgd.data,
uniqueColor = [255,255,127]; //Rossastro

// Loop lungo tutti i pixel per modificare i colori
for (var i = 0, n = pix.length; i <n; i += 4) {
    pix[i] = uniqueColor[0];   // Componente Rossa
    pix[i+1] = uniqueColor[1]; // Componente Blu
    pix[i+2] = uniqueColor[2]; // Componente Verde
    //pix[i+3] Trasparenza
}

ctx.putImageData(imgd, 0, 0);

所有这些代码在 Mozilla Firefox、Internet Explorer 11、Microsoft Edge 上都能完美运行，但在 Chrome 上不起作用，我不知道为什么。如果我在脚本的第一行设置断点，然后按调试器中的恢复按钮，一切都会很好。

Answer 1

您没有等待图像加载。您需要监听图像上的加载事件或文档的加载事件，然后触发 Canvas 代码。

document.getElementById("testImage").addEventListener("load", function () { /* init canvas code */ } );