Как получить все изображение внутри элемента холста?

Question

У меня есть элемент canvas и я хочу загрузить entire изображение внутри.
Холст должен иметь максимальную ширину 50%.
Загруженные изображения имеют разную ширину и высоту, но в любом случае мне нужно все изображениевнутри, а не только их часть.
Возможно ли это?

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

4-й и 5-й параметры

drawImage - это ширина и высота.Пример ниже займет весь холст.

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" />

---

Если вы хотите пропорциональное изображение, мы можем использовать решение здесь при расчете

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" />

---

Если вы хотите централизованное изображение, вы можете:

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;
}