按比例調整圖像大小以適應HTML5畫布

我正在嘗試編寫一個jQuery插件，該插件將具有與Zazzle.com上基於Flash的產品編輯器類似的功能。我需要知道的是，使用context.drawImage()畫布功能，我可以插入圖像並調整其大小以適合畫布而不會使其變形。按比例調整圖像大小以適應HTML5畫布

圖像是500x500px，畫布也是這樣，但由於某些原因，當我將500x500設置爲圖像尺寸時，它的方式很大。

這是迄今爲止我全碼：

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

其他任何建設性的批評，也受到歡迎。

來源

2011-10-12 watzon

這就是問題：

$（畫布）.attr（ 'ID'，options.id）的CSS（{寬度：options.width，高度：options.height}）;

當您需要直接設置寬度和高度屬性時，您正在設置畫布的CSS寬度/高度。你不扭曲所畫的圖像，你扭曲了畫布本身。畫布仍然是300x150（默認值），並且僅被CSS拉伸爲500x500。因此，您現在正在300x150的拉伸帆布上繪製500x500圖片！

你需要做的：

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

請注意，更改畫布的寬度或高度清除它因此必須使用的drawImage之前完成。

來源

2011-10-12 18:27:42

按比例調整圖像大小以適應HTML5畫布

回答

相關問題