我正在尝试编写一个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 );
任何其他建设性的批评也受到欢迎.
解决方法
这就是问题：
$(canvas).attr(‘id’,height: options.height });
您需要直接设置宽度和高度属性时设置画布的CSS宽度/高度.你没有扭曲绘制的图像,你扭曲了画布本身.画布仍然是300×150(默认值),并且仅仅是CSS拉伸为500×500.因此,现在您正在300×150拉伸画布上绘制500×500图像！
你需要这样做：
var defaults = {
'id' : 'productEditor','width' : '500',// NOT 500px,just 500
'height' : '500',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之前完成此操作.