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

您不是在等待加载图像。您需要监听图像上的加载事件或文档的加载事件，而不是激活画布代码。

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

我的＆＃34; changeColor＆＃34; javascript功能无法在Google Chrome上运行

1 个答案: