JavaScript getImageData画布

Question

// 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中的对象吗？

所以我要问的是，通过阅读这些代码，看起来就像通过调用image_data的data来获取.data的副本，并将其存储在一个名为data的变量中。对我来说，修改data不会修改image_data。但确实如此。这是怎么回事？当您使用image_data重绘时，它有修改过的data。data指向image_data吗？我知道如何在C语言中实现这一点，但我不认为它在javascript中会这样工作。

Answer 1

这是如何工作的，“data”变量是否以某种方式指向了“image_data”中的对象？

简短的回答是肯定的。

更长的答案可以在这里找到：Is JavaScript a pass-by-reference or pass-by-value language?

基本上，它是“按值调用”(相对于按值传递或按引用传递)。如果您更改“原始”，更改将不会持续下来，但对“引用”的更改将持续到原始。