已上傳的圖像填充畫布Javascript

Question

我想通過將畫布大小設置爲圖像大小來使上傳的圖像填充畫布的大小。畫布大小設置正確，但圖像變小，並且不填充畫布。我怎樣才能讓圖像填充畫布？這是我到目前爲止所嘗試的。

<canvas id="canvas" style="border: 1px solid #000; width: 400px; height: 300px"></canvas> 
<input type="file" name="photo" id="image" accept="image/*"> 

JS

var image = document.getElementById('image'); 
var canvas = document.getElementById('canvas'); 
var canvasWidth = 400; 
var canvasHeight = 300; 

if (image) { 
    image.addEventListener('change', function() { 
     var context = canvas.getContext('2d'); 
     if (this.files && this.files[0]) { 
      var fr = new FileReader(); 
      fr.onload = function (ev) { 
       var img = new Image(); 
       img.onload = function() { 
        canvasWidth = img.width; 
        canvasHeight = img.height; 
        canvas.style.width = canvasWidth + 'px'; 
        canvas.style.height = canvasHeight + 'px'; 
        context.drawImage(img, 0, 0); 
       }; 
       img.src = ev.target.result; 
      }; 
      fr.readAsDataURL(this.files[0]); 
     } 
    }, false); 
} 

Answer 1

  var image = document.getElementById('image'); 
var canvas = document.getElementById('canvas'); 
var canvasWidth = 400; 
var canvasHeight = 300; 

if (image) { 
image.addEventListener('change', function() { 
var context = canvas.getContext('2d'); 
if (this.files && this.files[0]) { 
var fr = new FileReader(); 
fr.onload = function (ev) { 
var img = new Image(); 
img.onload = function() { 
canvasWidth = img.naturalWidth; 
canvasHeight = img.naturalHeight; 
canvas.width = canvasWidth; 
canvas.height = canvasHeight; 
context.drawImage(img, 0, 0, canvasWidth, canvasHeight); 
}; 
img.src = ev.target.result; 
}; 
fr.readAsDataURL(this.files[0]); 
} 
}, false);} 

這裏是你的HTML代碼

<canvas id="canvas" width="400" height="300" style="border:1px solid red"></canvas> 
<input type="file" name="photo" id="image" accept="image/*">