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的副本，并将其存储在名为{{1}的变量中}}。对我来说，修改data不会修改data。但确实如此。这是如何运作的？使用image_data重绘时，修改后的image_data。 data是否指向data？我知道你怎么能在C中实现这一点但是没有想到它会在javascript中这样工作

Answer 1

这是如何工作的，'数据'变量是否以某种方式指向 'image_data'中的对象？

简短的回答是肯定的。

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

基本上，它是“按共享调用”（而不是按值传递或按引用传递）。如果您更改“原始”，则更改将不会保持不变，但对“引用”的更改将保持原来的状态。

JavaScript getImageData Canvas

1 个答案: