Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.03.2011, 17:50
Новичок на форуме
Отправить личное сообщение для Xasim Посмотреть профиль Найти все сообщения от Xasim
 
Регистрация: 30.03.2011
Сообщений: 6

Выделить участок изображения
Добрый день!
Подскажите, пожалуйста, как можно с помощью jQuery или (и) CSS выделить участок изображения? Т.е. вся картинка затемняется, а нужный участок остается прозрачным. Подобный эффект присутствует на сайте vkontakte и называется "отметить на фото".
Ответить с цитированием
  #2 (permalink)  
Старый 30.03.2011, 18:03
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

jQuery Image Crop
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #3 (permalink)  
Старый 30.03.2011, 18:12
Новичок на форуме
Отправить личное сообщение для Xasim Посмотреть профиль Найти все сообщения от Xasim
 
Регистрация: 30.03.2011
Сообщений: 6

На этот плагин я натыкался, вот только предназначен он для редактирования картинок. Хотя эффект выделения то что нужно.
Может кто-нибудь знает как он достигается?
Ответить с цитированием
  #4 (permalink)  
Старый 30.03.2011, 18:21
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

imgAreaSelect — jQuery-плагин для выделения области изображения
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #5 (permalink)  
Старый 30.03.2011, 18:31
Новичок на форуме
Отправить личное сообщение для Xasim Посмотреть профиль Найти все сообщения от Xasim
 
Регистрация: 30.03.2011
Сообщений: 6

Спасибо! Это то, что нужно.
Вот только никак не пойму каков механизм выделения. Как можно добиться подобного эффекта затемнения изображения вокруг...
Ответить с цитированием
  #6 (permalink)  
Старый 30.03.2011, 21:19
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

Берешь 6 DIV'ов где то к примеру)))
1-й див будет поверх фотки, будет как площадка где будут все остальные дивы.
2-й див будет селектор как бы, то есть то самый квадрат которым ты выделяешь.
Остальные 4 дива будут затемнять остальное пространство фотографии (сверху, слева, снизу, справа)

Наверное как то так.
$(document).ready(function() {
	$('#photo').load(function() {
		var img = $(this).offset(), 
		    imgWidth = $(this).width(), 
		    imgHeight = $(this).height();
		$(document.body).append('<div style="position: absolute;top:'+
			img.top+'px;left: '+img.left+'px;width: '+imgWidth+'px;height: '+imgHeight+'px;" id="area"></div>');
		$('#area').append('<div style="position: relative;z-index: 5;top: 0px;left: 0px;width: '+imgWidth+'px;height: '+imgHeight+'px;border: 2px red dotted;" id="select"></div>');
		$("#select").resizable({
			containment: '#area',
			handles: 'all',
			resize: function(event, ui) {
				$('#top').css('top', '0').css('left', '0').css('height', $("#select").position().top).css('width', imgWidth);
				$('#left').css('top', $("#select").position().top).css('height', $("#select").height()+2).css('width', ui.position.left).css('left', '0');
				$('#bottom').css('top', $("#select").position().top+$("#select").height()+2).css('height', $('#area').height()-($("#select").position().top+$("#select").height())).css('width', imgWidth).css('left', '0');
				$('#right').css('top', $("#select").position().top).css('height', $("#select").height()+2).css('width', $('#area').width()-(ui.position.left+$("#select").width())).css('left', ui.position.left+$("#select").width());
			}
		});
		$('#area').append('<div style="background-color: black;position: absolute;opacity: 0.5;" id="top"></div>');
		$('#area').append('<div style="background-color: black;position: absolute;opacity: 0.5;" id="left"></div>');
		$('#area').append('<div style="background-color: black;position: absolute;opacity: 0.5;" id="bottom"></div>');
		$('#area').append('<div style="background-color: black;position: absolute;opacity: 0.5;" id="right"></div>');
	});
});

Код конечно ооооооочень далеко от идеального, но думаю суть прояснить сможет)) Требуется еще и плагин resizable.
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай

Последний раз редактировалось walik, 30.03.2011 в 21:25.
Ответить с цитированием
  #7 (permalink)  
Старый 30.03.2011, 23:35
Новичок на форуме
Отправить личное сообщение для Xasim Посмотреть профиль Найти все сообщения от Xasim
 
Регистрация: 30.03.2011
Сообщений: 6

Сложновато... Я надеялся всё делается по-проще.
walik, спасибо за объяснения.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проверка размера изображения Bizarre Общие вопросы Javascript 4 09.03.2011 18:02
отрисовка изображения по произвольным координатам Th0m@$ Events/DOM/Window 14 23.01.2010 16:04
Динамически увеличивающиеся изображения: как реализовать? cforest Events/DOM/Window 6 24.06.2009 17:16
как при добавлении изображения на сервер считывать имя в БД? solomusic Серверные языки и технологии 3 12.06.2008 23:28
Визуальное выделение части изображения Гость Общие вопросы Javascript 0 25.02.2008 19:44