当您输入一个URL并单击一个按钮时,我正在尝试进行图像更改。但我一直在犯这样的错误:
对象%20 20HTMLInputElement:1 GET file:///Users/asbrown/Desktop/MLforSite/object%20HTMLInputElement net::ERR_FILE_NOT_FOUND
这是我的代码:
$(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);/>
有人知道我的代码的哪一部分导致了这个错误吗?我认为这与我使用drawImage()函数的方式有关,但我不知道我做错了什么。任何帮助都将不胜感激。
发布于 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,这将是可行的。
希望这能帮上忙。
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>
发布于 2017-02-10 17:52:39
您需要从输入中获得如下值
var newURLF = document.getElementById("newURL").value;
https://stackoverflow.com/questions/42165627
复制相似问题