错误:未定义图像(使用Image()函数故障)

Question

我使用了一个非常简单的代码（但显然用我的图像而不是image.png）。我试图给我的画布一个背景图像。

var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
var img = new Image();
img.onload=start;
img.src="Image.png";
function start(){
ctx.drawImage(img,0,0);
}

，但我收到此错误： 错误：未定义"图像"。[no-unnundef]关于零件：

var img = new Image（）。

我试图用

替换它

var img = document.createelement（" img"）;

然后错误消失了，但是什么也没有显示，没有任何图像，它只是空的。有人知道我做错了什么吗？预先感谢！

完整代码

var document;
var ctx;
var window;
window.onload = function () {
   start();
}
function start(){
  var canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");

  var img = document.createElement("img");
  img.src="image.png";
  img.onload=start;
  function start(){
    ctx.drawImage(img,0,0,400,400);
  }
}

Answer 1

您需要将创建的图像附加到DOM。

document.getElementById("image-container").appendChild(img);

编辑：我很抱歉，我看到您正在将其绘制到帆布对象。在这种情况下，我会怀疑您的图像无法正确加载。

一些想法：您可以在start（）函数中添加一些调试输出或设置断点，然后查看当时的" IMG"所包含的内容。或者，您可以在DevTools控制台的"网络"选项卡上检查状态代码。或者，您可以将图像替换为已知可行的图像，例如www.google.com/images/logo.png。这一切都应该使您缩小问题。

注意：window是一个全局变量，因此您不应该声明它，而window（例如window.document）的属性也是Globals的属性 - 可以将其称为document而不声明它。有时JS框架抱怨，但是有特定于框架的方法可以解决此问题。这些变量的重复声明不是下降的好途径。

如果您是为了响应ESLINT错误而添加这些，则应将eslintrc.json添加到您的项目root（如果您还没有），并给它以下属性，以免对浏览器Globals抱怨：

{
  "env": {
    "browser": true
  }                                                                      
}

为什么未定义图像，这不会在现代浏览器环境中发生。必须在您的环境设置中进行一些操作。您是否可以提供有关如何运行此代码的信息？

Answer 2

在设置图像的src之前，请尝试设置onload回调。

var img = document.createElement("img");
img.onload=start;
img.src="image.png";

如果映像被缓存，则在设置src后立即触发onload，即在将其分配给start之前，请参阅此问题。