Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

Область для выделения части изображения - plug+js?

29K
14 апреля 2012 года
webdev
56 / / 08.05.2010
Здравств, вот не знаю с какой стороны подойти...
Есть у меня картинка которую я получаю с сервера,
есть вот такой плагин http://odyniec.net/projects/imgareaselect/,
это все работает, тоисть я выделяю кусочек картинки, данные отправляются на сервер и так д... С этим вопросов нет.
Дело в том, что нужно ограничить область выделения тоисть сделать возможным выделять не всю картинку, а только ее часть
К примеру, я получил картинку а позволить выделять только определенную область, вот наглядней http://dl.dropbox.com/u/26399837/Forums/flower2.jpg


Вот какой у меня код для выделения всей картинки. Использую jQuery.

Код:
<head>
<script type="text/javascript" src="./jQuery/jquery-1.7.2.js"></script>
<link rel="stylesheet" type="text/css"
    href="./jQuery/imgareaselect-0.9.8/css/imgareaselect-default.css" />
<script type="text/javascript"
    src="./jQuery/imgareaselect-0.9.8/scripts/jquery.min.js"></script>
<script type="text/javascript"
    src="./jQuery/imgareaselect-0.9.8/scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
            $(document).ready(function() {
                $('#target').imgAreaSelect({
                    handles : true,
                    movable : false,
                    resizable : false,
                        autoHide : true,
                    onSelectEnd : function(img, selection)
                        $("#target").attr("src","/JFreeeChartServlet/generateImg?x1=" + selection.x1
                                                                                  + "&y1=" + selection.y1
                                                                                  + "&x2=" + selection.x2
                                                                                  + "&y2=" + selection.y2
                                                                                  + "&width=" + selection.width
                                                                                  + "&height=" + selection.height);
                    }
                });
            });

        </script>
<title>JFreeChart_Bsp</title>
</head>
<body>
    <img src="/JFreeeChartServlet/generateImg" id="target"
        alt="generateImg" height="750" width="1450" />
</body>
285
14 апреля 2012 года
Romik
479 / / 24.11.2002
Могу предложить использовать две картинки и одну располагать над другой и одно меньше другого - визуально будет выглядеть, словно это одно изображение. То изображение, что поменьше, будет соответствовать допустимой области выделения - располагайте его сверху и натравите на него свой плагин. А то, что побольше, будет оставаться фоном и его нельзя будет выделять. В сущности вы добьётесь желаемого результата.

P.S.
"тоисть" это на клингонском? подозреваю всё же имелось в виду "то есть"
29K
14 апреля 2012 года
webdev
56 / / 08.05.2010
Цитата: Romik
Могу предложить использовать две картинки и одну располагать над другой и одно меньше другого - визуально будет выглядеть, словно это одно изображение. То изображение, что поменьше, будет соответствовать допустимой области выделения - располагайте его сверху и натравите на него свой плагин. А то, что побольше, будет оставаться фоном и его нельзя будет выделять. В сущности вы добьётесь желаемого результата.

P.S.
"тоисть" это на клингонском? подозреваю всё же имелось в виду "то есть"

- да, вы совершенно правильно поняли, что мне нужно, можно и таким способом, не подскажете, где почитать, как определять прозрачное изображение поверх моего?

285
14 апреля 2012 года
Romik
479 / / 24.11.2002
Зачем вам прозрачное изображение? Используйте часть своего целевого изображения., выбрав из него область, которую нужно править. Это можно сделать, как отдельным запросом к серверу, так и средствами браузера, скопировав часть изображения.
29K
14 апреля 2012 года
webdev
56 / / 08.05.2010
Цитата: Romik
Зачем вам прозрачное изображение? Используйте часть своего целевого изображения., выбрав из него область, которую нужно править. Это можно сделать, как отдельным запросом к серверу, так и средствами браузера, скопировав часть изображения.

- ааа, я чуток не правильно понял, что вы написали... Теперь остается найти как вырезать из изображения часть, и положить точно сверху... Нужно задействовать только js(jQuery). html, css.. скорее всего на стороне клиента..
Спасибо.

29K
16 апреля 2012 года
webdev
56 / / 08.05.2010
Вот, пока что статически настроил, но раньше функция брала id="target" и у дива и у картинки, таким образом, все было синхронно, сейчас у меня див над картинкой, и не выделяется, тоисть на нем нельзя произвести выделение. Можно только на определенных участках картинки, что видно из под дива.
Чуток как-то сумбурно получилось, надеюсь кто захочет помочь, поймет

Вопрос в том: как мне выделять див и чтоб при этом происходило обновление и на картинке? ТОисть чтоб функция обрабатывала id="target" и дива и картинки, но выделять можно только див. ..

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style type="text/css">
            .divName {
                width: 100px;
                height: 700px;
                background: #ccc;
                overflow: hidden;
                position: relative;
                width: 1300px;
                height: 585px;
                margin: -690px 0px 0px 93px;
            }
            .divName img {
                position: absolute;
                top: -60px;
                left: -93px;
            }

        </style>
        <script type="text/javascript" src="./jQuery/jquery-1.7.2.js"></script>
        <link rel="stylesheet" type="text/css"
        href="./jQuery/imgareaselect-0.9.8/css/imgareaselect-default.css" />
        <script type="text/javascript"
        src="./jQuery/imgareaselect-0.9.8/scripts/jquery.min.js"></script>
        <script type="text/javascript"
        src="./jQuery/imgareaselect-0.9.8/scripts/jquery.imgareaselect.pack.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                var id = $('#target').imgAreaSelect({
                    handles : true,
                    movable : false,
                    resizable : false,
                    autoHide : true,
                    onSelectEnd : function(img, selection) {
                        console.log("---------------------------");
                        console.log('left corner: ' + 'x1:' + selection.x1 + ', y1:' + selection.y1);
                        console.log('right corner: ' + 'x2:' + selection.x2 + ', y2:' + selection.y2);
                        console.log('width: ' + selection.width + '; height: ' + selection.height);
                        console.log("---------------------------");
                        $("#target").attr("src", "/JFreeeChartServlet/generateImg?x1=" + selection.x1 + "&y1=" + selection.y1 + "&x2=" + selection.x2 + "&y2=" + selection.y2 + "&width=" + selection.width + "&height=" + selection.height);
                    }
                });

            });

        </script>
        <title>JFreeChart_Bsp</title>
    </head>
    <body>
        <img src="/JFreeeChartServlet/generateImg" id="target"
        alt="generateImg" height="750" width="1450" />
        <div class="divName" >
            <img src="/JFreeeChartServlet/generateImg" id="target"
            alt="generateImg" height="750" width="1450" />
        </div>
    </body>
</html>
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог