如何在画布元素中获取整个图像？

Question

I have a canvas element and want to load an entire image inside.
The canvas should be max 50% width.
The loaded images have different widths and heights but in any case I need entire image inside and not just a part of them.
Is it possible?

 var URL = window.webkitURL || window.URL; window.onload = function() { var input = document.getElementById('input'); input.addEventListener('change', handleFiles, false); } function handleFiles(e) { var ctx = document.getElementById('canvas').getContext('2d'); var url = URL.createObjectURL(e.target.files[0]); var img = new Image(); img.onload = function() { ctx.drawImage(img, 10, 10); } img.src = url; } 

 #canvas{ max-width:50%; } 

 <input type="file" id="input"/> <canvas id="canvas"/> 

Answer 1

drawImage 's 4th and 5th parameter is the width and height. The example below will occupy the whole canvas.

 var URL = window.webkitURL || window.URL; window.onload = function() { var input = document.getElementById('input'); input.addEventListener('change', handleFiles, false); } function handleFiles(e) { var ctx = document.getElementById('canvas').getContext('2d'); var url = URL.createObjectURL(e.target.files[0]); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height); } img.src = url; } 

 #canvas { background-color: salmon; max-width: 50%; } 

 <input type="file" id="input" /> <canvas id="canvas" /> 

---

If you want a proportional image, we can use the solution here in calculating

 var URL = window.webkitURL || window.URL; window.onload = function() { var input = document.getElementById('input'); input.addEventListener('change', handleFiles, false); } function handleFiles(e) { var ctx = document.getElementById('canvas').getContext('2d'); var url = URL.createObjectURL(e.target.files[0]); var img = new Image(); img.onload = function() { var newDimen = calculateAspectRatioFit(img.width, img.height, ctx.canvas.width, ctx.canvas.height); ctx.drawImage(img, 0, 0, newDimen.width, newDimen.height); } img.src = url; } function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) { var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight); return { width: srcWidth * ratio, height: srcHeight * ratio }; } 

 #canvas { background-color: salmon; max-width: 50%; } 

 <input type="file" id="input" /> <canvas id="canvas" /> 

---

If you want a centralized image, you can:

function handleFiles(e) {
    var ctx = document.getElementById('canvas').getContext('2d');
    var url = URL.createObjectURL(e.target.files[0]);
    var img = new Image();
    img.onload = function() {

        var newDimen = calculateAspectRatioFit( img.width, img.height, ctx.canvas.width, ctx.canvas.height );
        var tSpace = ( ctx.canvas.height - newDimen.height ) / 2;
        var lSpace = ( ctx.canvas.width - newDimen.width ) / 2;
        ctx.drawImage(img, lSpace, tSpace, newDimen.width, newDimen.height);
    }
    img.src = url;
}