Cambiar el tamaño de la imagen proporcionalmente para caber en el lienzo de HTML5

Question

Estoy tratando de escribir un complemento jQuery que tendrá una funcionalidad similar al editor de producto basado en Flash en Zazzle.com. Lo que necesito saber es cómo, utilizando la función de lienzo context.drawImage(), puedo insertar una imagen y cambiar su tamaño para que quepa en el lienzo sin distorsionarla.

La imagen es de 500x500px y también lo es el lienzo, pero por alguna razón cuando establezco 500x500 en las dimensiones de la imagen es demasiado grande.

Aquí está mi código completo hasta el momento:

(function($) { 

    jQuery.fn.productEditor = function(options) { 

     var defaults = { 
      'id'  : 'productEditor', 
      'width'  : '500px', 
      'height' : '500px', 
      'bgImage' : 'http://www.wattzup.com/projects/jQuery-product-editor/sampleProduct.jpg' 
     }; 


     return this.each(function() { 

      var $this = $(this) 

       var options = $.extend(defaults, options); 

      // Create canvas 
      var canvas = document.createElement('canvas'); 

      // Check if their browser supports the canvas element 
      if(canvas.getContext) { 
       // Canvas defaults 
        var context = canvas.getContext('2d'); 
        var bgImage = new Image(); 
        bgImage.src = options.bgImage; 
        bgImage.onload = function() {   
        // Draw the image on the canvas 
        context.drawImage(bgImage, 0, 0, options.width, options.height); 
       } 

       // Add the canvas to our element 
       $this.append(canvas); 
       // Set ID of canvas 
       $(canvas).attr('id', options.id).css({ width: options.width, height: options.height }); 




      } 
      // If canvas is not supported show an image that says so 
      else { 

       alert('Canvas not supported!'); 


      } 


     }); 

    }; 
})(jQuery); 

Cualquier otra crítica constructiva también dio la bienvenida.

Answer 1

Este es el problema:

$ (lona) .attr ('id', options.id) Css ({width: options.width, altura: options.height});

Está configurando el ancho/alto de CSS del lienzo cuando necesita establecer los atributos de ancho y alto directamente. No está distorsionando la imagen dibujada, está distorsionando el lienzo en sí. El lienzo sigue siendo 300x150 (el valor predeterminado) y simplemente se ha estirado CSS para que sea de 500x500. Por lo tanto, en este momento está dibujando una imagen de 500x500 en un lienzo estirado de 300x150.

que tiene que hacer:

var defaults = { 
     'id'  : 'productEditor', 
     'width'  : '500', // NOT 500px, just 500 
     'height' : '500', // NOT 500px, just 500 
     'bgImage' : 'http://www.wattzup.com/projects/jQuery-product-editor/sampleProduct.jpg' 
    }; 

... 

// Create canvas 
var canvas = document.createElement('canvas'); 
canvas.width = options.width; 
canvas.height= options.height; 

... 

$(canvas).attr('id', options.id); // DON'T change CSS width/height 

Tenga en cuenta que el cambio de la anchura o la altura de un lienzo borra tan Esto debe hacerse antes de usar drawImage.