Javascript error on webpage console

Question

I am trying to have an image change when you put in a URL and click a button. But i keep on getting this error:

[object%20HTMLInputElement]:1 GET file:///Users/asbrown/Desktop/MLforSite/[object%20HTMLInputElement] net::ERR_FILE_NOT_FOUND

Here is my code:

$(function() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  function drawimg(image) {
    ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, 400, 300);
  }

  img = new Image();
  img.onload = function() {
    canvas.width = 400;
    canvas.height = 300;
  }
  img.src = document.getElementById("newURL");
}); // end $(function(){});

body {
  background-color: ivory;
}
canvas {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width=100 height=100></canvas>
<form>
  <fieldset>
    <legend>Input Data for Training</legend>
    <p>
      <label>Image URL</label>
      <input type="text" id="newURL" value="" />
      <br>
    </p>
    <script>
      var newURLF = document.getElementById("newURL").innerHTML;
    </script>
    <input type="button" value="Add to Training Data" onclick=drawimg(newURLF);/>

Does anyone know which part of my code is causing this error? I think it has something to do with the way i used the drawImage() function but i don't know what I am doing wrong. Any help would be appreciated.

img.src=document.getElementById("newURL") -> img.src=document.getElementById("newURL").value — Andreas
– Andreas, Commented Feb 10, 2017 at 17:48

Andreas · Accepted Answer · 2017-02-10 18:57:06Z

So there's alot going on here. I'll try and walk you through it.

The ctx.drawImage function can take several objects to draw an image. None of them are a URL however. We first have to create an image object, set the src to be the users supplied URL, then wait for it to load before drawing it on the canvas. (the onload function gets called after the image is finished loading. )

See this for more info in the canvas drawImage function: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

A couple of things to keep in mind.

You have to wait for the image to load before you can draw it on the canvas. This is what the image.onload is doing for us.

You don't need jQuery. I see you're using stuff like document.getElementById. that'll work without jQuery.

Hopefully this is helpful.

function loadImg() {
  // setup canvas and 2d context
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  
  // get the url entered by the human
  var newURL = document.getElementById("newURL").value;
  
  // create an image
  var image = new Image();
  // this gets run once the image loads
  image.onload = function() {
      ctx.drawImage(image, 0, 0, 300, 400, 0, 0, 100, 100);
    }
    // set the image source to the url entered by the user
  image.src = newURL;
}

canvas {
  border: 1px solid red;
}

<canvas id="canvas" width="100" height="100"></canvas>
<form>
  <fieldset>
    <legend>Input Data for Training</legend>
    <p>
      <label>Image URL</label>
      <input type="text" id="newURL" value="" />
    </p>
    <input type="button" value="Load image" onclick="loadImg();" />
  </fieldset>
</form>

Thanks i would make the canvas.height and canvas.width the image.height and image.width but other wise it works. Thanks!
Thanks, you should accept one of the answers. Hopefully this one. ;)

Cesar Bielich · Accepted Answer · 2017-02-10 18:35:04Z

2

You need to get the value from the input like this

var newURLF = document.getElementById("newURL").value;

edited Feb 10, 2017 at 18:35

answered Feb 10, 2017 at 17:52

Cesar Bielich

4,96510 gold badges42 silver badges90 bronze badges

2 Comments

Andreas Over a year ago

This still doesn't explain the wrong url. newURLF is only used when you click the button (which is another construction site...)

some_person Over a year ago

Still gives me the same error whether i try .src or .value

Collectives™ on Stack Overflow

Javascript error on webpage console

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related