首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >网页控制台上的Javascript错误

网页控制台上的Javascript错误
EN

Stack Overflow用户
提问于 2017-02-10 17:47:25
回答 2查看 130关注 0票数 0

当您输入一个URL并单击一个按钮时,我正在尝试进行图像更改。但我一直在犯这样的错误:

对象%20 20HTMLInputElement:1 GET file:///Users/asbrown/Desktop/MLforSite/object%20HTMLInputElement net::ERR_FILE_NOT_FOUND

这是我的代码:

代码语言:javascript
运行
复制
$(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(){});
代码语言:javascript
运行
复制
body {
  background-color: ivory;
}
canvas {
  border: 1px solid red;
}
代码语言:javascript
运行
复制
<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);/>

有人知道我的代码的哪一部分导致了这个错误吗?我认为这与我使用drawImage()函数的方式有关,但我不知道我做错了什么。任何帮助都将不胜感激。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-02-10 18:38:17

所以这里发生了很多事。我试着带你走过去。

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,这将是可行的。

希望这能帮上忙。

代码语言:javascript
运行
复制
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;
}
代码语言:javascript
运行
复制
canvas {
  border: 1px solid red;
}
代码语言:javascript
运行
复制
<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>

票数 2
EN

Stack Overflow用户

发布于 2017-02-10 17:52:39

您需要从输入中获得如下值

代码语言:javascript
运行
复制
var newURLF = document.getElementById("newURL").value;
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42165627

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档