examples - create canvas javascript

Escalar una imagen para que quepa en el lienzo

Question

Tengo un formulario que permite que un usuario cargue una imagen.

Una vez que se carga la imagen, realizamos algunas escalas para reducir su tamaño de archivo antes de volver a pasarlo al servidor.

Para hacer esto, lo colocamos en el lienzo y lo manipulamos allí.

Este código representará la imagen escalada en el lienzo, con el lienzo de tamaño 320 x 240px:

ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

... donde canvas.width y canvas.height es la altura y el ancho de la imagen xa un factor de escala basado en el tamaño de la imagen original.

Pero cuando voy a usar el código:

ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height

... Solo obtengo parte de la imagen en el lienzo, en este caso, la esquina superior izquierda. Necesito que toda la imagen ''se haya escalado'' para que quepa en el lienzo, a pesar de que el tamaño real de la imagen es mayor que el tamaño del lienzo de 320x240.

Por lo tanto, para el código anterior, el ancho y las alturas son 1142x856, ya que ese es el tamaño de la imagen final. Necesito mantener ese tamaño para pasar al servidor cuando se envíe el formulario, pero solo quiero que aparezca una vista más pequeña en el lienzo para el usuario.

¿Que me estoy perdiendo aqui? ¿Puede alguien señalarme en la dirección correcta, por favor?

Muchas gracias de antemano.

Answer 1

Hiciste el error, para la segunda llamada, para establecer el tamaño de la fuente al tamaño del objetivo.
De todos modos, apuesto a que quieres la misma relación de aspecto para la imagen escalada, por lo que debes calcularla:

var hRatio = canvas.width / img.width    ;
var vRatio = canvas.height / img.height  ;
var ratio  = Math.min ( hRatio, vRatio );
ctx.drawImage(img, 0,0, img.width, img.height, 0,0,img.width*ratio, img.height*ratio);

También supongo que quieres centrar la imagen, por lo que el código sería:

function drawImageScaled(img, ctx) {
   var canvas = ctx.canvas ;
   var hRatio = canvas.width  / img.width    ;
   var vRatio =  canvas.height / img.height  ;
   var ratio  = Math.min ( hRatio, vRatio );
   var centerShift_x = ( canvas.width - img.width*ratio ) / 2;
   var centerShift_y = ( canvas.height - img.height*ratio ) / 2;  
   ctx.clearRect(0,0,canvas.width, canvas.height);
   ctx.drawImage(img, 0,0, img.width, img.height,
                      centerShift_x,centerShift_y,img.width*ratio, img.height*ratio);  
}

puedes verlo en un jsbin aquí: http://jsbin.com/funewofu/1/edit?js,output

Answer 2

Proporcione el tamaño de la imagen de origen (img) como primer rectángulo:

ctx.drawImage(img, 0, 0, img.width,    img.height,     // source rectangle
                   0, 0, canvas.width, canvas.height); // destination rectangle

El segundo rectángulo será el tamaño de destino (a qué rectángulo de origen se aplicará la escala).

Actualización 2016/6 : para la relación de aspecto y el posicionamiento (método de "cubierta" de ala CSS), consulte:
Fondo de simulación: cubierta en lienzo