ウェブページのコンソールでJavascriptエラーが発生しました

Question

URLを入力してボタンをクリックしたときにイメージが変わってしまいました。 しかし、私はこのエラーを取得し続ける：ここ

[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に設定してからキャンバスに描画する前にロードするまで待機する必要があります。 （画像の読み込みが終了した後のonload関数が呼び出されます）

キャンバスの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>

Answer 2

そんなにたくさんここにあり起こっているこの

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