网页控制台上的Javascript错误

Question

我试图在放入网址并单击按钮时更改图像。 但我不断获取此错误：

[object%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（）函数的方式有关，但我不知道我做错了什么。任何帮助，将不胜感激。

Answer 1

所以有很多事情在这里。我会尽力引导你通过它。

ctx.drawImage函数可以用几个对象来绘制图像。但是，它们都不是一个URL。我们首先必须创建一个图像对象，将src设置为用户提供的URL，然后等待它加载，然后在画布上绘制它。在画布drawImage方法的详细信息（图像加载完成后在onload函数被调用）

看到这个： 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>

Answer 2

您需要从输入获得的价值这样

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