CODEWITHSUNDEEP
javascriptjqueryhtml
some_person
some_person

Reputation: 197

Javascript error on webpage console

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.

Upvotes: 0

Views: 138

Answers (2)

Dave
Dave

Reputation: 6652

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>

Upvotes: 2

Cesar Bielich
Cesar Bielich

Reputation: 4945

You need to get the value from the input like this

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

Upvotes: 2

Related Questions