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

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

解决方法

这就是问题：

$(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之前完成此操作.

原文地址：https://www.jb51.cc/js/150591.html