2

¿como podría hacer para achicar una imagen antes de dibujarla en un canvas, para que la imagen no pierda su aspecto original?

Intente Utilizar la función drawImage() y le pase valores de alto y ancho pero solo logre que se distorsione la imagen.

drawImage(imagen, posX, posY, anchura, altura);
1
  • Si amplias una imagen siempre se va a distorsionar a no ser que el tamaño de la imagen original sea bien grande, mientras que si es alrevez (Intentar achicar una imagen), simplemente si mucho perderas un poco de calidad de la imagen, (Pero solo un poco).
    – Layer
    Commented el 5 ago. 2019 a las 11:53

2 respuestas 2

3

Jugar con el tamaño de la imagen en un canvas sin deformarlo requiere dos cosas:

  1. Que el tamaño de la foto sea conocido, para poder respetar las proporciones.
  2. Que el tamaño interno del del canvas y el tamaño externo sean conocidos, para tratar deformaciones.

El primer punto es sencillo de entender: si tenemos una imagen de 400 px de largo y 300 px de ancho, este tamaño será el que se muestre por defecto, pero podemos usar estilos para cambiar esto:

document.querySelector('button')
  .addEventListener('click', function() {
    document.querySelector('img').classList.toggle('dieciseis-novenos');
  }
);
.dieciseis-novenos {
   width: 533px;
   height: 300px;
}
<img src="https://www.fillmurray.com/400/300" alt="Imagen de 400x300" title="Imagen de 400x300"/>
<button>Aplicar estilo 16/9</button>

El segundo punto requiere entender cómo funciona el elemento Canvas: tiene un tamaño, definido por los atributos width y height, que es el número de pixels "lógicos" que lo componen. Si tengo un canvas de 200*200 pixels, un círculo con 100px de radio ocupará todo.

Pero sin variar este tamaño "interno" del canvas, puedo cambiar la vista por CSS: haciéndolo más grande o pequeño, respetando sus proporciones o no, lo que puede deformar la imagen creada:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 100, 0, 2 * Math.PI); //círculo de 100 de radio
ctx.stroke();
canvas {
  border: 1px solid blue;
  width: 175px;
  height: 100px;
}
<canvas id="canvas" width="200" height="200"></canvas>

Es decir, el canvas (recordemos que canvas se traduce literalmante como lienzo) sigue teniendo un espacio para dibujar de 200x200, independientemente del tamaño en pixels que tenga su visualización.

Por tanto, si queremos dibujar una imagen sin deformarla en un canvas tenemos que tener en cuenta las proporciones de la imagen Y del canvas: Puedes no deformar la imagen en sí, pero que el canvas la deforme o viceversa... o puedes deformar la imagen pero que el canvas la deforme en el sentido opuesto, cancelando la deformación original:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const image = new Image();
image.src = 'https://www.fillmurray.com/400/300';
image.onload = function(){
   ctx.drawImage(image, 0, 0, 200, 150); //mantiene la proporcion, mitad de tamaño
   ctx.drawImage(image, 250, 0, 200, 300); // no mantiene la proporción
}

document.querySelector('button')
  .addEventListener('click', function() {
    document.querySelector('canvas').classList.toggle('dieciseis-novenos');
  }
);
canvas {
  border: 1px solid blue;
}

.dieciseis-novenos {
   width: 600px;
   height: 150px;
}
<canvas id="canvas" width="600" height="300"></canvas>
<button>Deformar Canvas</button>

1

Se me ocurre que obtengas el tamaño original de la imagen primero desde sus propiedades width y height, y para que la imagen no pierda su aspecto original, simplemente dividir en una escala cada uno de estos valores y usarlos:

let imagen = new Image();
imagen.src = "Algun archivo local en alguna carpeta o URL.extension";

let dimensionesOriginales = {width: imagen.width, height: imagen.height};

y segun que tanto requieras ampliar o reducir una imagen simplemente haces algo como:

//Reduccion de tamaño original manteniendo el aspecto de la imagen a la mitad.

dimensionesOriginales[width] /= 2;
dimensionesOriginales[height] /= 2;

//Ampliacion a 1.3 vecez el tamaño original de la imagen manteniendo su aspecto:

dimensionesOriginales[width] *= 1.3;
dimensionesOriginales[height] *= 1.3;

Dibujando la imagen:

//Aqui supongamos que posx y posy son valores (variables declaradas ya existentes), y que centran la imagen en el canvas.
drawImage(imagen, posX, posY, dimensionesOriginales[width], dimesionesOriginales[height]);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.