html5 js可以抠图片大小,javascript – 按比例调整图像大小以适合HTML5画布

我正在尝试编写一个jQuery插件,该插件将具有与Zazzle.com上基于Flash的产品编辑器类似的功能.我需要知道的是,使用context.draw

Image()canvas函数,我可以插入一个图像并调整大小以适应画布而不会扭曲它.

图像是500x500px,画布也是如此,但出于某种原因,当我将500×500设置为图像尺寸时,它是大的.

到目前为止,这是我的完整代码：

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

任何其他建设性的批评也受到欢迎.