В FabricsJS загрузить пиктограмку картинки

[mstdmstd]

Всем привет,

Используя FabricsJS мне нужно загрузить картинку в уменьшеном размере и в "view" mode.

Я загружаю картинку  width = 2480 и height = 1755 кодом:

 

    <div class='dashboard-layer1'>

        <div class="flyer-previews">

        </div>

    </div>



...







        var predefinedWidth= 380 // SIZE OF IMAGE I NEED

        var predefinedHeight= 380

        _obj= '<?php print json_encode($templateObj); ?>'; // data ofor image generating

        var _orientation = '';

        var _link = <?php print json_encode( "dashboard/flyers"); ?>;



        // Add canvas and link it to its template

        jQuery('<canvas>').attr({

            id: 'preview-'

        }).appendTo('.flyer-previews').wrap( jQuery('<a>').attr({

            href: tmbn__findUrls( _link )[0]+'/'+_obj['format']+'/'+_obj['sku']

        }) );



        // Set Canvas object

        var _stage_flag = new fabric.Canvas('preview-');



        // Set stage dimensions

        _stage_flag.setDimensions({

            width: predefinedWidth,

            height: predefinedHeight

        });



        // Set orientation

        if( predefinedWidth > predefinedHeight ) { _orientation = 'landscape'; } else { _orientation = 'portrait'; }



        // Load templates

        _stage_flag.loadFromJSON( _obj, _stage_flag.renderAll.bind(_stage_flag), function( _object, _klass ) {

            // Deactivate objects

            _klass.selectable = false;

            // Resize view

            tmbn__dynamicScale( 'preview-', _orientation );

        });



        /**

         * Scale thumbnails

         */

        function tmbn__dynamicScale( _id, _orientation ) {

            jQuery('#'+_id).parent().addClass(_orientation);

            jQuery('#'+_id).parent().children('canvas').addClass(_orientation);

        }



        /**

         * Get URL from Text

         */

        function tmbn__findUrls( text ) {

            var source = (text || '').toString();

            var urlArray = [];

            var url;

            var matchArray;

            // Regular expression to find FTP, HTTP(S) and email URLs.

            var regexToken = /(((ftp|https?):\/\/)[\-\w@:%_\+.~#?,&\/\/=]+)|((mailto:)?[_.\w-]+@([\w][\w\-]+\.)+[a-zA-Z]{2,3})/g;

            // Iterate through any URLs in the text.

            while( (matchArray = regexToken.exec( source )) !== null ) {

                var token = matchArray[0];

                urlArray.push( token );

            }

            return urlArray;

        }

И я получаю картинку со всеми загруженными обьектами на canvas, но размер canvas-ы  380/380 (переменные predefinedWidth и predefinedHeight)

а размер самой картинки 2480 / 1755, так что на canvas я вижу только правый верхний угол картинки...

Как вывести картинку ва нужном мне размере?

 

Спасибо!   

 

[Great Rash]

http://fabricjs.com/docs/fabric.Image.filters.Resize.html