我的“changeColor”javascript 函数在 Google Chrome 上不起作用答案

【问题标题】：My "changeColor" javascript function doesn't work on Google Chrome我的“changeColor”javascript 函数在 Google Chrome 上不起作用
【发布时间】：2015-09-18 16:01:37
【问题描述】：

我有一个函数可以让我更改 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 上却无法运行，我不知道为什么。如果我在脚本的第一行设置断点，然后在调试器中按下恢复按钮，一切正常。

【问题讨论】：

标签： javascript html google-chrome png

【解决方案1】：

您没有等待加载图像。您需要侦听图像上的加载事件或文档的加载事件，而不是触发您的画布代码。

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

【讨论】：