將圖片上傳到畫布上時需要單個動作

Question

我可以通過畫布html控件上傳圖片，但問題是當我第一次上傳圖片時，該圖片未在canvas中上傳並且再次，如果我選擇了同樣的圖像，那麼該圖像在畫布中上傳得非常好。這意味着，在我的場景中，如果用戶首先將圖像上載到畫布上，那麼他們應該上傳圖像兩次，但是當用戶第一次上載圖像時需要上傳圖像，然後該圖像應該顯示在畫布上。請檢查下面的腳本和html5標記是否我做了一些錯誤，請告訴我如何解決這類問題。提前致謝。

<!--HTML5 tags Implementation--> 

    <input type="file" id="imageLoader" name="imageLoader" onchange="readURL(this);"/> 
    <canvas id="imageCanvas"></canvas> 

<!--JavaScript Implementation--> 
    <script type="text/javascript"> 
     var imageLoader = ''; 
     var canvas = ''; 
     var ctx = ''; 

     function readURL(input) { 
      //alert('test'); 
      imageLoader = document.getElementById('imageLoader'); 
      //imageLoader.addEventListener('change', handleImage,false); 
      imageLoader.addEventListener('change', this.handleImage.bind(this), false); 
      canvas = document.getElementById('imageCanvas'); 
      ctx = canvas.getContext('2d'); 

     }; 

     function handleImage(e) { 
      var reader = new FileReader(); 
      reader.onload = function (event) { 
       var img = new Image(); 
       console.log(img); 
       img.onload = function() { 
        canvas.width = img.width; 
        canvas.height = img.height; 
        ctx.drawImage(img, 0, 0); 
       } 
       img.src = event.target.result; 
      } 
      reader.readAsDataURL(e.target.files[0]); 
     }; 
    </script> 

Answer 1

我發現這個issue.Actually的解決方案，我正在執行的JavaScript並呼籲改變事件是用戶上傳的圖片超過起初time.So畫布它創建問題兩次，我很熟悉與jQuery的，所以我正在實施jQuery和解決這個問題，請徹底檢查下面的代碼，然後你會明白。

<input type="file" id="imageLoader" name="imageLoader" /> 
    <canvas id="imageCanvas"></canvas> 

<!--JQuery Implementation--> 

<script type="text/javascript> 

$(document).ready(function() { 
$('#imageLoader').on('change', function (e) { 
      imageLoader = document.getElementById('imageLoader'); 
      canvas = document.getElementById('imageCanvas'); 
      ctx = canvas.getContext('2d'); 
      handleImage(e); 

     }) 
}); 
function handleImage(e) { 
     alert('check'); 
     var reader = new FileReader(); 
     reader.onload = function (event) { 
      var img = new Image(); 
      //console.log(img); 
      img.onload = function() { 
       canvas.width = img.width; 
       canvas.height = img.height; 
       ctx.drawImage(img, 0, 0); 
      } 
      img.src = event.target.result; 
     } 
     reader.readAsDataURL(e.target.files[0]); 
    }; 
</script>