<分区>
// Set colour of light bulb
function set_bulb_colour(img_id, rgb_colour) {
var img = new Image();
img.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
var image_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = image_data.data;
for (var i = 0; i < data.length; i += 4) {
if (data[i + 3] == 0) {
continue;
}
// If the pixel is yellow set it to the new colour
if (data[i] > 200 && data[i + 2] < 100) {
data[i] = rgb_colour[0];
data[i + 1] = rgb_colour[1];
data[i + 2] = rgb_colour[2];
}
}
ctx.putImageData(image_data, 0, 0);
$('img#living_room_light_emoji').attr('src', canvas.toDataURL());
}
img.src = 'images/light_bulb.png';
}
如果有人知道答案，我对上面的代码有疑问。该代码有效。它将灯泡图像中的所有黄色像素更改为传入的 rgb 颜色。我从 getImageData 获得了一个对象。然后我得到调用 .data 的数据。我修改了 data 变量中的像素。但是当我使用 putImageData 重新绘制图像时，我将对象 image_data 放回原处，而不是我正在修改的“数据”。这是如何工作的，data 变量是否以某种方式指向 image_data 中的对象？
所以我要问的是，通过阅读该代码，您似乎通过调用 .data 获取了 image_data 的 data 的副本并将其存储在名为 data 的变量中。对我来说，修改 data 不会修改 image_data。但确实如此。这是如何运作的？当您使用 image_data 重绘时，它具有修改后的 data。 data 是否指向 image_data？我知道如何在 C 中做到这一点，但没想到它会在 javascript 中这样工作