Измените размер изображения пропорционально, чтобы соответствовать HTML5 холст - PullRequest
Новая
       7

Измените размер изображения пропорционально, чтобы соответствовать HTML5 холст

6 голосов
/ 12 октября 2011

Я пытаюсь написать плагин jQuery, который будет иметь функциональность, аналогичную редактору продуктов на основе Flash на Zazzle.com. Что мне нужно знать, так это то, как с помощью функции context.drawImage() canvas можно вставить изображение и изменить его размер, чтобы оно поместилось на холсте без искажения.

Изображение 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 );

Любая другая конструктивная критика также приветствуется.

1 Ответ

9 голосов
/ 12 октября 2011

Это проблема:

$ (canvas) .attr ('id', options.id) .css ({ширина: options.width, высота: options.height});

Вы устанавливаете CSS ширину / высоту холста, когда вам нужно установить атрибуты ширины и высоты напрямую. Вы не искажаете нарисованное изображение, вы искажаете сам холст. Холст по-прежнему 300x150 (по умолчанию) и просто растянут CSS, чтобы быть 500x500. Таким образом, прямо сейчас вы рисуете изображение 500x500 на натянутом холсте 300x150!

Вам нужно сделать: 

    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.

...