错误:图像未定义(使用Image()函数时出现问题)

问题描述 投票:1回答:2

我使用了一段非常简单的代码(但显然我的图像代替了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);
  }
}
javascript image dom html5-canvas
2个回答
0
投票

您需要将创建的图像附加到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,这在现代浏览器环境中不会发生。它必须与您的环境设置有关。您是否可以提供有关如何运行此代码的信息?


0
投票

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

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

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


推荐问答