Imgareaselect

Компонент нужен для выделения области на картинке.
Официальная страница компонента: http://odyniec.net/projects/imgareaselect/examples.html

Механизм работы таков: на страницу добавляется img у которого задан id или class. Этот id или class передается в компонент вместе с параметрами, которые задают поведение компонента.

Описание парметров находится на этой странице: http://odyniec.net/projects/imgareaselect/usage.html#options.

Кроме описанных на этой странице параметров, существуют еще 4 дополнительных: postX1, postY1, postX2, postY2.

Они задают имена input-ов в value которых нужно записать координаты выделенной области.

Следующий пример полностью описывает работу компонента:


        
    <?php

        IncludeCom("dev/imgareaselect", array("data" => 
            array(
                ".imgareaselect2" => array(
                    "maxWidth"  => 500,
                    "maxHeight" => 300,

                    "postX1" => "#x1",
                    "postX2" => "#x2",
                    "postY1" => "#y1",
                    "postY2" => "#y2",
                ),
                ".imgareaselect3" => array(
                )
            )
        ));

    ?>


    <img class="imgareaselect2" src="<?= Root("i/image/test.jpg") ?>">

    <form action="<?= GetCurUrl() ?>" method="post">
        <input type="hidden" id="x1" name="x1" value="" />
        <input type="hidden" id="y1" name="y1" value="" />
        <input type="hidden" id="x2" name="x2" value="" />
        <input type="hidden" id="y2" name="y2" value="" />
        <input type="submit" name="submit" value="Submit" />
    </form>

    <p>
        x1: <?= Post("x1", "0") ?>
    </p>
    <p>
        x2: <?= Post("x2", "0") ?>
    </p>
    <p>
        y1: <?= Post("y1", "0") ?>
    </p>
    <p>
        y2: <?= Post("y2", "0") ?>
    </p>

По умолчанию в компоненте задан один класс ".imgareaselect" со следующими параметрами:
handles: true
postX1: #x1
postY1: #y1
postX2: #x2
postY2: #y2

Скачать