Javascript Fehler auf der Webseite Konsole

Question

Ich versuche, ein Bild zu ändern, wenn Sie eine URL eingeben und klicken Sie auf eine Schaltfläche. Aber ich halten auf diesen Fehler:

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

Hier ist mein Code:

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

Weiß jemand, welcher Teil von meinem Code diesen Fehler verursacht? Ich denke, es hat etwas damit zu tun, wie ich die Funktion drawImage() benutzt habe, aber ich weiß nicht, was ich falsch mache. Jede Hilfe wäre willkommen.

Answer 1

So bekommen es eine Menge ist hier los ist. Ich werde versuchen, dich durch es zu führen.

Die Funktion ctx.drawImage kann mehrere Objekte aufnehmen, um ein Bild zu zeichnen. Keine von ihnen ist jedoch eine URL. Zuerst müssen wir ein Image-Objekt erstellen, den src als Benutzer-URL festlegen und dann darauf warten, dass es geladen wird, bevor es auf der Zeichenfläche gezeichnet wird. (. Die onload-Funktion aufgerufen wird, nachdem das Bild fertig geladen ist)

dies für weitere Informationen siehe in der Leinwand drawImage Funktion: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

Ein paar Dinge im Auge zu behalten.

Sie müssen warten, bis das Bild geladen ist, bevor Sie es auf der Zeichenfläche zeichnen können. Dies ist es, was image.onload für uns tut.

Sie benötigen keine jQuery. Ich sehe, dass Sie Dinge wie document.getElementById verwenden. das funktioniert ohne jQuery.

Hoffentlich ist das hilfreich.

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

Sie müssen den Wert aus dem Eingang wie dieses

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