Question

我试图遍历我页面上的所有img标签，并为每个img动态创建一个canvas元素（因此我可以使用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);

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

1 个答案: