Я пытаюсь написать плагин jQuery, который будет иметь такие же функциональные возможности, что и редактор продуктов на основе Flash на Zazzle.com. Мне нужно знать, как, используя функцию холста context.drawImage ()
, я могу вставить изображение и изменить его размер, чтобы он поместился в холсте, не искажая его.
Размер изображения 500x500 пикселей, как и холст, но по какой-то причине, когда я установил размер изображения 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 );
Любая другая конструктивная критика также приветствуется.