错误：图像未定义（使用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-undef]：

是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也是全局变量 - 可以引用为document而不声明它。有时JS框架会抱怨，但有一些特定于框架的方法可以解决这个问题。这些变量的重复声明不是一个好的路径。

如果您要添加这些以响应ESlint错误，您应该将eslintrc.json添加到您的项目根目录（如果您还没有），并为其提供以下属性，以便它不会抱怨浏览器全局错误：

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

至于为什么没有定义Image，这在现代浏览器环境中不会发生。它必须与您的环境设置有关。您是否可以提供有关如何运行此代码的信息？

Answer 2

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

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

如果图像被缓存，那么onload将在设置src后立即触发，即在它被分配给start see this question之前。