Redimensionner l'image proportionnellement pour tenir dans la toile HTML5

Question

J'essaie d'écrire un plugin jQuery qui aura des fonctionnalités similaires à l'éditeur de produit Flash sur Zazzle.com. Ce que j'ai besoin de savoir, c'est comment, en utilisant la fonction canvas context.drawImage(), je peux insérer une image et la redimensionner pour l'adapter à la toile sans la déformer.

L'image est de 500x500px, tout comme la toile, mais pour une raison quelconque, lorsque je règle 500x500 sur les dimentions d'image, elle est trop grande.

Voici mon code complet à ce jour:

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

Toute autre critique constructive aussi bien accueillie.

Answer 1

C'est le problème:

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

Vous définissez la largeur CSS/hauteur du canevas lorsque vous devez définir directement les attributs de largeur et de hauteur. Vous ne déformez pas l'image dessinée, vous déformez la toile elle-même. La toile est toujours 300x150 (la valeur par défaut) et a simplement été étiré CSS pour être 500x500. Donc maintenant vous dessinez une image 500x500 sur une toile tendue 300x150!

que vous devez faire:

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 

Notez que la modification de la largeur ou la hauteur d'une toile efface si cela doit être fait avant d'utiliser drawImage.