javascript - ERROR: Image is not defined (trouble using Image() function) - Stack Overflow

admin 管理员组

文章数量: 1086019

I use a very simple piece of code (but then obviously with my image instead of Image.png). I am trying to give my canvas a background image.

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);
}

But I receive this error: ERROR: 'Image' is not defined. [no-undef] about the part:

var img = new Image().

I tried to replace this with

var img = document.createElement("img");

Then the error is gone, but nothing displays, no image whatsoever, its just empty. Has anybody any idea what I am doing wrong? Thanks in advance!

FULL CODE

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);
  }
}

I use a very simple piece of code (but then obviously with my image instead of Image.png). I am trying to give my canvas a background image.

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);
}

But I receive this error: ERROR: 'Image' is not defined. [no-undef] about the part:

var img = new Image().

I tried to replace this with

var img = document.createElement("img");

Then the error is gone, but nothing displays, no image whatsoever, its just empty. Has anybody any idea what I am doing wrong? Thanks in advance!

FULL CODE

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

Share Improve this question Follow edited Dec 29, 2017 at 22:28 jcarpenter2 5,47644 gold badges2626 silver badges5353 bronze badges asked Dec 29, 2017 at 21:09 NTMNNTMN 3311 gold badge11 silver badge55 bronze badges 5

• 2 If Image isn't defined, there's something goofy going on. This is in a browser, right? It's not running in node? It's working well at this fiddle: jsfiddle/cud2zL11/1 – Chris Riebschlager Commented Dec 29, 2017 at 21:18
• I use brackets, does not work in my browser (chrome) either.. – NTMN Commented Dec 29, 2017 at 21:21
• I guess we're going to need some more information then. The code works, as you can see in the jsfiddle link I posted. – Chris Riebschlager Commented Dec 29, 2017 at 21:29
• added full javascript code now! – NTMN Commented Dec 29, 2017 at 22:12
• Thanks, but what are all those angle brackets about? Also, you don't need to declare window as a variable. You get the one automatically. – Chris Riebschlager Commented Dec 29, 2017 at 22:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

You need to attach the image you have created to the DOM.

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

Edit: I apologize, I see you are drawing it to a canvas object. In that case I would suspect that your image is failing to load properly.

A couple ideas: you could add some debugging output within the start() function or set a breakpoint, then look at what the 'img' contains at that point in time. Or you could check the status code on the 'Network' tab of the devtools console. Or you could replace the image with one that is known to work, such as www.google./images/logo.png. This all should hepl you narrow down the issue.

Note: window is a global variable so you shouldn't declare it, and names that are properties of window such as window.document are also globals - can be referenced as document without declaring it. Occasionally JS frameworks plain, but there are framework-specific ways to solve this. Duplicate declaration of these variables is not a good path to go down.

If you're adding these in response to ESlint errors, you should add eslintrc.json to your project root (if you don't have it already), and give it the following property so it doesn't plain for browser globals:

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

As to why Image is not defined, this would not happen on a modern browser environment. It has to be something with your environment setup. Is there any information you could provide about how you are running this code?

Try setting the onload callback before you set the image's src.

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

If the image is cached, then onload would be fired as soon as src is set, i.e. before it is assigned to start see this question.

本文标签： javascriptERROR Image is not defined (trouble using Image() function)Stack Overflow