網頁控制檯上的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;