Quiero cargar una imagen en un HTML-Canvas y quiero verla inmediatamente después de que finalice la carga. ¿Cómo puedo mantener la relación de aspecto adecuada para las imágenes?

1. Las imágenes enormes tienen que ser redimensionadas a un tamaño de lienzo determinado porque no se les debe permitir que ocupen toda la ventana gráfica.

2. Las imágenes pequeñas también deben cambiar de tamaño para llenar el lienzo.

3. Solo haciendo uso de HTML + CSS + vanilla JS

Lo que hice hasta ahora:

 var fileUpload = document.getElementById('fileUpload'); var canvas = document.getElementById("renderCanvas"); var ctx = canvas.getContext("2d"); var img = new Image() function scaleImage() { const windowWidth = window.screen.width const windowHeight = window.screen.height ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; var scaledWidth, scaledHeight; if(img.width > img.height){ scaledWidth = ctx.canvas.width; scaledHeight = (ctx.canvas.width / img.width) * img.height }else if(img.width < img.height){ scaledWidth = (ctx.canvas.height / img.height) * img.width scaledHeight = ctx.canvas.height; }else{ scaledWidth = ctx.canvas.width; scaledHeight = ctx.canvas.height; } ctx.drawImage( img, (ctx.canvas.width / 2) - (scaledWidth / 2), (ctx.canvas.height / 2) - (scaledHeight / 2), scaledWidth, scaledHeight ); }; // readImage ersetzt das Bild function readImage() { if ( this.files && this.files[0] ) { var fileReader = new FileReader(); fileReader.onload = function(e) { this.img = img this.img.src = e.target.result; img.onload = scaleImage }; fileReader.readAsDataURL( this.files[0] ); } } fileUpload.onchange = readImage; window.onresize = scaleImage;

Puedo cargar un archivo Img y mostrarlo. Realmente no se ajusta al tamaño del lienzo y si cambio el tamaño de la ventana de mi navegador, sigue cambiando de tamaño y creciendo más allá de los bordes de mi lienzo.