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

mstdmstd

Дата 9.10.2015, 08:11 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 394
Регистрация: 30.12.2008

Репутация: нет
Всего: нет

Всем привет,
Используя 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 я вижу только правый верхний угол картинки...
Как вывести картинку ва нужном мне размере?

Спасибо!

ksnk

Дата 9.10.2015, 11:41 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386

Читать документацию про fabricsJs.
Вероятно, что-то про filter.Resize.

imho, сначала следовало создать объект Image, поиздеваться над ним, потом добавлять его в канвас, хотя по фабрике я не специалист...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »