Javascript：將圖像設置爲畫布無法正常工作

Question

我基本上試圖從輸入對話框中獲取選定的圖像文件，並將其設置爲HTML中的畫布。 但是，圖像被裁剪，只有一部分圖像顯示爲。

的Javascript：

function onSS1Change(file) { 
    var ctx = document.getElementById('canvas').getContext('2d'); 
    var img = new Image; 
    img.onload = function() { 
     ctx.drawImage(img, 20, 20); 
    } 
    img.src = URL.createObjectURL(file.target.files[0]); 
} 

HTML：

<input id="ss1-inputdiag" type="file" onchange="onSS1Change(event)" /> 

小提琴：http://jsfiddle.net/tdy9tqfh/

我需要得到原始的高度和寬度

我在做什麼錯？

Answer 1

的jsfiddle：http://jsfiddle.net/CanvasCode/tdy9tqfh/2/

只需更新畫布高度和寬度以適應圖像，還你在位置繪製你的圖像x 20和y 20，所有的圖像將在右側稍切斷底部。

var input = document.getElementById（'input'）; input.addEventListener（'change'，handleFiles）;

function handleFiles(e) { 
    var c = document.getElementById('canvas'); 
    var ctx = c.getContext('2d'); 

    var img = new Image; 
    img.src = URL.createObjectURL(e.target.files[0]); 
    img.onload = function() { 
     c.width = img.width; 
     c.height = img.height; 
     ctx.drawImage(img, 0,0); 
     alert('the image is drawn'); 
    } 
}