JavaScriptの機能のブラウズ、ファイルボタン用のHTMLページに

Question

HTMLコードを動作していない

<input type="file" multiple="false" accept="image/*" id="filein" onclick="filo()"> 

はJavaScript

function filo(){ 
    var canin= document.getElementByID("c5"); 
    var imgin = document.getElementById("filein"); 
    var xct = canin.getContext("2d"); 
    var img = new Image(filein); 
    xct.drawImage(canin); 
} 

Answer 1

いくつかの問題があります。

• あなたはあなたではなくラインに比べて、スクリプトを使用してイベントリスナーを追加clickイベント

  <input type="file" multiple="false" accept="image/*" id="filein">

  onchangeイベントを使用する必要はありません。

  <script> // this script must be place after the element filein or use an onload event. filein.onchange = filo(); </script>

• 要素ではない文字列を返す関数getElementById。要素のfilesプロパティからファイル名（URL）を取得する必要があります。

• イメージURLを引数として取らないので、イメージの構造を変更してください。 URLにimg.srcを設定し、画像が読み込まれるまで待ちます。

• 関数drawImage関数には、イメージと少なくとも2つの引き数を必要とします。

変更の例。

function filo() { 
    // Get the filename of the input element 
    var imgin = document.getElementById("filein").files[0]; // <<Get the file URL 

    // Typo its getElementById not getElementByID 
    var canin= document.getElementById("c5"); 
    var xct = canin.getContext("2d"); 

    // Image does not take a URL via the constructor 
    var img = new Image(); 

    // set the URK here 
    var img.src = imgin; 

    // you need to wait for the image to load then you can draw it 
    img.onload = function() { 

     // drawImage function requires the image and at least 2 arguments 
     // that are the location to draw at  
     xct.drawImage(this, 0, 0); // this is the image in the onload event 
    } 
}