我的 "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 */ } );

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

My "changeColor" javascript function doesn't work on Google Chrome

html

javascript

png

google-chrome