Область для выделения части изображения - plug+js?
Здравств, вот не знаю с какой стороны подойти...
Есть у меня картинка которую я получаю с сервера,
есть вот такой плагин http://odyniec.net/projects/imgareaselect/,
это все работает, тоисть я выделяю кусочек картинки, данные отправляются на сервер и так д... С этим вопросов нет.
Дело в том, что нужно ограничить область выделения тоисть сделать возможным выделять не всю картинку, а только ее часть
К примеру, я получил картинку а позволить выделять только определенную область, вот наглядней http://dl.dropbox.com/u/26399837/Forums/flower2.jpg
Вот какой у меня код для выделения всей картинки. Использую jQuery.
Есть у меня картинка которую я получаю с сервера,
есть вот такой плагин 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>
<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>
Могу предложить использовать две картинки и одну располагать над другой и одно меньше другого - визуально будет выглядеть, словно это одно изображение. То изображение, что поменьше, будет соответствовать допустимой области выделения - располагайте его сверху и натравите на него свой плагин. А то, что побольше, будет оставаться фоном и его нельзя будет выделять. В сущности вы добьётесь желаемого результата.
P.S.
"тоисть" это на клингонском? подозреваю всё же имелось в виду "то есть"
P.S.
"тоисть" это на клингонском? подозреваю всё же имелось в виду "то есть"
Цитата: Romik
Могу предложить использовать две картинки и одну располагать над другой и одно меньше другого - визуально будет выглядеть, словно это одно изображение. То изображение, что поменьше, будет соответствовать допустимой области выделения - располагайте его сверху и натравите на него свой плагин. А то, что побольше, будет оставаться фоном и его нельзя будет выделять. В сущности вы добьётесь желаемого результата.
P.S.
"тоисть" это на клингонском? подозреваю всё же имелось в виду "то есть"
P.S.
"тоисть" это на клингонском? подозреваю всё же имелось в виду "то есть"
- да, вы совершенно правильно поняли, что мне нужно, можно и таким способом, не подскажете, где почитать, как определять прозрачное изображение поверх моего?
Зачем вам прозрачное изображение? Используйте часть своего целевого изображения., выбрав из него область, которую нужно править. Это можно сделать, как отдельным запросом к серверу, так и средствами браузера, скопировав часть изображения.
Цитата: Romik
Зачем вам прозрачное изображение? Используйте часть своего целевого изображения., выбрав из него область, которую нужно править. Это можно сделать, как отдельным запросом к серверу, так и средствами браузера, скопировав часть изображения.
- ааа, я чуток не правильно понял, что вы написали... Теперь остается найти как вырезать из изображения часть, и положить точно сверху... Нужно задействовать только js(jQuery). html, css.. скорее всего на стороне клиента..
Спасибо.
Вот, пока что статически настроил, но раньше функция брала id="target" и у дива и у картинки, таким образом, все было синхронно, сейчас у меня див над картинкой, и не выделяется, тоисть на нем нельзя произвести выделение. Можно только на определенных участках картинки, что видно из под дива.
Чуток как-то сумбурно получилось, надеюсь кто захочет помочь, поймет
Вопрос в том: как мне выделять див и чтоб при этом происходило обновление и на картинке? ТОисть чтоб функция обрабатывала 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>
<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>