Question

当您输入网址并单击按钮时，我尝试更改图像。但我继续得到这个错误：

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

这是我的代码：

＆＃13;

$(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(){});

＆＃13;

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

＆＃13;

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

＆＃13;

有谁知道我的代码的哪一部分导致了这个错误？我认为它与我使用drawImage（）函数的方式有关，但我不知道我做错了什么。任何帮助将不胜感激。

Answer 1

您需要从输入中获取此值

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

Answer 2

所以这里有很多事情要做。我会试着带你走过去。

ctx.drawImage函数可以使用多个对象来绘制图像。但它们都不是URL。我们首先要创建一个图像对象，将src设置为用户提供的URL，然后在画布上绘制之前等待它加载。（onload函数在图像加载完成后调用。）

有关canvas drawImage函数的更多信息，请参阅此处： https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

要记住几件事。

您必须先等待图像加载，然后才能在画布上绘制它。这就是image.onload为我们做的事情。

你不需要jQuery。我看到你正在使用像document.getElementById这样的东西。这将在没有jQuery的情况下工作。

希望这很有帮助。

＆＃13;

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

＆＃13;

canvas {
  border: 1px solid red;
}

＆＃13;

<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>

＆＃13;

网页控制台上的Javascript错误

2 个答案: