JavaScript. Кадрирование картинки с использованием jQuery

Возможности и интерфейс

Использует библиотеку JQuery. Для управления элементом используется 2 метода.

$(element).CropImageCreate(src, src_width, src_height, min_width, min_height, proportion, options);

Создает в указанном блочном элементе структуру элемента управления кадрирования

где element    - контейнер в котором создасться структура элемента управления
    src        - URL картинки
    src_width  - реальная ширина картинки
    src_height - реальная высота картинки
    min_width  - минимальная ширина обрезанного изображения
    min_height - минимальная высота обрезанного изображения
    proportion - сохранять пропорции или нет (0/1)
    options    - настраиваемые параметры элемента управления в виде объекта
                   {
                     background: '#fffcc4',            // цвет заливки блока отсекаемой части
                     opacity: 70,                      // прозрачность блока отсекаемой части
                     img_lt: '/data/cropimage_lt.gif', // иконка для левого верхнего угла
                     img_rt: '/data/cropimage_rt.gif', // иконка для правого верхнего угла
                     img_lb: '/data/cropimage_rt.gif', // иконка для левого нихнего угла
                     img_rb: '/data/cropimage_1t.gif', // иконка для правого нижнего угла
                     img_w: 10,                        // ширина иконки
                     img_h: 10                         // высота иконки
                   }


$(element).CropImageGetData());
Возвращает данные о кадрированном изибражении в виде объекта {src, left, top, width, height}

где element - контейнер, в котором уже должна быть создан элемент управления
    left    - X левой верхней точки в вырезанном изображении
    top     - Y левой верхней точки в вырезанном изображении
    width   - ширина вырезанного изображения
    height  - высота вырезанного изображения

Пример

С сохраненмем пропорций


Без сохранения пропорций


Код примера:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="/data/cropimage_sergiusd.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#crop_div').CropImageCreate('/data/cropimage_1.jpg', 337, 500, 75, 100, 1);
		$('#crop_btn').click(function() {showData($('#crop_div').CropImageGetData());});
		$('#crop2_div').CropImageCreate('/data/cropimage_2.jpg', 241, 360, 75, 100, 0);
		$('#crop2_btn').click(function() {showData($('#crop2_div').CropImageGetData());});
	});
	function showData(obj) {
		alert("src: "+obj.src+"\nleft: "+obj.left+', top: '+obj.top+', '+
			'width: '+obj.width+', height: '+obj.height);
	}
</script>
<table width="100%">
	<tr>
		<td valign="top" align="center" width="50%">
			С сохраненмем пропорций<br><br>
			<div id="crop_div"></div><br/>
			<input type="button" id="crop_btn" value="Показать данные"/>
		</td>
		<td valign="top" align="center" width="50%">
			Без сохранения пропорций<br><br>
			<div id="crop2_div"></div><br/>
			<input type="button" id="crop2_btn" value="Показать данные"/>
		</td>
	</tr>
</table>

Ресурсы

Для работы контрола необходима библиотека jQuery.

К скрипту имеется 295 комментариев

Добавить комментрий


Главный редактор: SergiusD
Издается с 2005 года