从图像元素动态创建画布元素

Question

我正在尝试遍历页面上的所有 img 标签，并为每个 img 动态创建一个画布元素（这样我就可以使用 JavaScript 修改像素值）。但是，尽管我的代码当前正在将我的画布添加到页面中，但它们仍然是空白的。我不知道这是我使用 drawImage() 函数的方式，还是代码结构的一些更大的问题，还是完全其他的问题？

var images = [], canvas = [], context = [];

function init() {
  var images = document.getElementsByTagName('img');

  // Create a canvas for each image...
  for(var i = 0; i < images.length; i++) {
    canvas[i] = document.createElement('canvas');
    context[i] = canvas[i].getContext('2d');
    context[i].drawImage(images[i], 0, 0);
    document.body.appendChild(canvas[i]);
  }
}

document.addEventListener('DOMContentLoaded', init);

Answer 1

您可以在此处阅读：https://developer.mozilla.org/en/docs/Web/Events/DOMContentLoaded

当初始 HTML 文档完全加载和解析时触发 DOMContentLoaded 事件，无需等待样式表、图像和子框架完成加载。

您正在绘制未加载的图像。您应该等待整个页面加载，或者为每个图像添加一个事件侦听器，以便在图像加载时绘制其画布。我会选择第二个，所以图像是立即创建的，而不是在所有样式表和所有内容都加载之后。

var images = [], canvas = [], context = [];

function init() {
  var images = document.getElementsByTagName('img');

  // Create a canvas for each image...
  for(var i = 0; i < images.length; i++) {
    images[i].addEventListener("load", (function(i) {
      canvas[i] = document.createElement('canvas');
      context[i] = canvas[i].getContext('2d');
      context[i].drawImage(images[i], 0, 0);
      document.body.appendChild(canvas[i]);
    }).bind(null, i)); // Bind to contextualize the variable so don't changes before the event is called because of the loop. As others may think, `i` is not overwritten by the event parameter, so this bind is safe.
  }
}

document.addEventListener('DOMContentLoaded', init);