Ridimensionare l'immagine in modo proporzionale per adattarla alla tela HTML5

Question

Sto provando a scrivere un plugin jQuery che avrà funzionalità simili all'editor di prodotti basati su Flash su Zazzle.com. Quello che devo sapere è come, usando la funzione canvas context.drawImage(), posso inserire un'immagine e ridimensionarla per adattarla alla tela senza distorcerla.

L'immagine è 500x500px e così è la tela, ma per qualche motivo quando ho impostato 500x500 per le dimensioni dell'immagine è molto grande.

Ecco il mio codice completo finora:

(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); 

Qualsiasi altra critica costruttiva inoltre accolto con favore.

Answer 1

Questo è il problema:

$ (tela) .attr ('id', options.id) css ({width: options.width, altezza: options.height});

Si sta impostando la larghezza/altezza CSS dell'area di disegno quando è necessario impostare direttamente gli attributi di larghezza e altezza. Non stai distorcendo l'immagine disegnata, stai distorcendo la tela stessa. Il canvas è ancora 300x150 (il valore predefinito) ed è stato semplicemente allungato da CSS per essere 500x500. Quindi adesso stai disegnando un'immagine 500x500 su una tela tesa 300x150!

quello che devi fare:

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 

Nota che cambiare la larghezza o l'altezza di una tela libera quindi questo deve essere fatto prima di utilizzare drawImage.