Разработка инструмента веб-скриншотов jcrop (плагина)

Скопируйте код кода следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Jcrop » Учебные пособия » Привет, мир</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<тип сценария="текст/javascript">

jQuery(функция($){

// Насколько это просто??
$('#target').Jcrop();

});

</скрипт>
</голова>

<тело>
<div id="внешний">
<дел>
<дел>

<h1>Jcrop – Привет, мир</h1>
<img src="demo_files/pool.jpg" id="target" />

<р>
<b>Этот пример демонстрирует поведение Jcrop по умолчанию.</b>
Поскольку обработчики событий не подключены, он выполняет только
поведение обрезки.
</p>

<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Главная страница Jcrop</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">Руководство (документы)</a>
</div>

</div>
</div>
</div>
</тело>
</html>

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial2.html

Скопируйте код кода следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Jcrop » Учебные пособия » Обработчик событий</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<тип сценария="текст/javascript">
jQuery(функция($){
$('#target').Jcrop({
onChange: showCoords,
onSelect: showCoords,
onRelease: ClearCoords
});
});
// Простой обработчик событий, вызываемый из onChange и onSelect
// обработчики событий, как указано выше при вызове Jcrop
функция showCoords(c)
{
$('#x1').val(cx);
$('#y1').val(cy);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(cw);
$('#h').val(ch);
};
функция ClearCoords()
{
$('#ввод координат').val('');
};
</скрипт>
</голова>
<тело>
<div id="внешний">
<дел>
<дел>
<h1>Jcrop — обработчики событий</h1>

<img src="demo_files/pool.jpg" id="target" />

<form id="координаты"
класс="координаты"
onsubmit="вернуть ложь;"
действие="http://example.com/post.php">
<дел>
<label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
<label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
<label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
<label>W <input type="text" size="4" id="w" name="w" /></label>
<label>H <input type="text" size="4" id="h" name="h" /></label>
</div>
</форма>
<р>
<b>Пример с базовым обработчиком событий.</b> Здесь мы связали
несколько значений формы вместе с простым вызовом обработчика событий.
В результате значения формы обновляются в режиме реального времени по мере
выбор изменяется с помощью обработчика <em>onChange</em> Jcrop.
</p>
<р>
Вот как легко можно интегрировать Jcrop в традиционную веб-форму!
</p>
<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Главная страница Jcrop</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">Руководство (документы)</a>
</div>
</div>
</div>
</div>
</тело>
</html>

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial3.html

 Скопируйте код кода следующим образом:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <голова>
 <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
 <title>Jcrop » Учебные пособия » AspectRatio с предварительным просмотром</title>
 <script src="../js/jquery.min.js" type="text/javascript"></script>
 <script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
 <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
 <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
 <тип сценария="текст/javascript">
 jQuery(функция($) {
 // Создаём переменные (в этой области) для хранения API и размера изображения
 вар jcrop_api,boundx,boundy;
 $('#target').Jcrop({
 onChange: updatePreview,
 onSelect: updatePreview,
 соотношение сторон: 1
 }, функция() {
 // Используйте API, чтобы получить реальный размер изображения
 вар границы = this.getBounds();
 boundx = границы [0];
 граница = границы [1];
 // Сохраняем API в переменной jcrop_api
 jcrop_api = это;
 });
 функция updatePreview(c) {
 если (parseInt(cw) > 0) {
 вар rx = 100/cw;
 вар ry = 100/ч;
 $('#предварительный просмотр').css({
 ширина: Math.round(rx *boundx) + 'px',
 высота: Math.round(ry *boundy) + 'px',
 MarginLeft : '-' + Math.round(rx * cx) + 'px',
 MarginTop: '-' + Math.round(ry * cy) + 'px'
 });
 }
 }
 });
 </скрипт>
 </голова>
 <тело>
 <div id="внешний">
 <дел>
 <дел>
 <h1>Jcrop – соотношение сторон с панелью предварительного просмотра</h1>
 <таблица>
 <тр>
 <тд>
 <дел>
 <img src="demo_files/pool.jpg" id="target"/>
 </div>
 </td>
 <тд>
 <дел>
 <img src="demo_files/pool.jpg" id="preview" />
 </div>
 </td>
 </tr>
 </таблица>
 <р>
 <b>Пример реализации панели предварительного просмотра.</b> Очевидно, это наиболее наглядная демонстрация. Панель предварительного просмотра полностью реализована за пределами Jcrop с помощью простого обратного вызова на основе jQuery. Этот тип интерфейса может быть полезен для создания миниатюры или аватара. Обработчик событий onChange используется для обновления представления на панели предварительного просмотра.
 </p>
 <div id="dl_links">
 <a href="http://deepliquid.com/content/Jcrop.html">Главная страница Jcrop</a> | <a href="http://deepliquid.com/content/Jcrop_Manual.html">Руководство (документы) )</a>
 </div>
 </div>
 </div>
 </div>
 </тело>
 </html>

 /Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial4.html

Скопируйте код кода следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Jcrop » Учебные пособия » Анимации/переходы</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
<script src="../js/jquery.color.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.Jcrop.extras.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<тип сценария="текст/javascript">
jQuery(функция($){
вар jcrop_api;
$('#target').Jcrop({
bgFade: правда,
bgOpacity: .3,
setSelect: [60, 70, 540, 330]
},функция(){
jcrop_api = это;
});
$('#fadetog').change(function(){
jcrop_api.setOptions({
bgFade: это.проверено
});
}).attr('проверено','проверено');
$('#shadetog').change(function(){
if (this.checked) $('#shadetxt').slideDown();
еще $('#shadetxt').slideUp();
jcrop_api.setOptions({
оттенок: это.проверено
});
}).attr('проверено',ложь);
// Определение разделов страницы
разделы вар = {
anim_buttons: 'Анимировать выделение',
bgo_buttons: 'Изменить bgOpacity',
bgc_buttons: 'Изменить bgColor'
};
// Определим кнопки анимации
вар переменный = {
аним1: [217 122 382 284],
аним2: [20,20,580,380],
аним3: [24,24,176,376],
аним4: [347 165 550 355],
аним5: [136,55,472,183]
};
// Определить кнопки bgOpacity
вар бго = {
Низкий: .2,
Середина: 0,5,
Высокий: 0,8,
Полный: 1
};
// Определить кнопки bgColor
вар bgc = {
Красный: «#900»,
Синий: '#4BB6F0',
Желтый: '#F0B207',
Зеленый: «#46B81C»,
Белый: «белый»,
Черный: «черный»
};
// Создаём целевые поля для кнопок
for(я в разделах)
InsertSection (я, разделы [я]);
// Создаем кнопки анимации
для (я в переменном токе) {
$('#anim_buttons').append(
$('<button />').append(i).click(animHandler(ac[i])), ' '
);
}
// Создаём кнопки bgOpacity
for(я в bgo) {
$('#bgo_buttons').append(
$('<button />').append(i).click(setoptHandler('bgOpacity',bgo[i])), ' '
);
}
// Создаём кнопки bgColor
for(я в BGC) {
$('#bgc_buttons').append(
$('<кнопка />').append(i).css({
Цвет фона: bgc[i],
цвет: ((i == 'Черный') || (i == 'Красный'))?'white':'black'
}).click(setoptHandler('bgColor',bgc[i])), ' '
);
}
// Функция для вставки именованных разделов в интерфейс
функция InsertSection(k,v) {
$('#interface').append(
$('<fieldset></fieldset>').attr('id',k).append(
$('<legend></legend>').append(v)
)
);
};
// Обработчик кнопок настройки опций
функция setoptHandler(k,v) {
функция возврата() {
вар Опт = {};
опт[к] = v;
jcrop_api.setOptions(опт);
вернуть ложь;
};
};
// Обработчик кнопок анимации
функция animHandler(v) {
функция возврата() {
jcrop_api.animateTo(v);
вернуть ложь;
};
};
$('#anim_buttons').append(
$('<button></button>').append('Пока!').click(function(){
jcrop_api.animateTo(
[300,200,300,200],
функция() { this.release() };
);
вернуть ложь;
})
);
$('#interface').show();
});
</скрипт>
</голова>
<тело>
<div id="внешний">
<дел>
<дел>
<h1>Jcrop – Анимация/переходы</h1>
<img src="demo_files/sago.jpg" id="target" />
<div id="interface" style="margin: 1em 0;"></div>
<div><label><input type="checkbox" id="fadetog" /> Включить затухание (bgFade: true)</label></div>
<div><label><input type="checkbox" id="shadetog" /> Использовать экспериментальный шейдер (тень: true)</label></div>
<p id="shadetxt" style="display:none; color:#900;">
<b>Экспериментальный шейдер активен.</b>
Jcrop теперь включает режим затенения, который облегчает создание
лучшие прозрачные экземпляры Jcrop. Экспериментальный шейдер меньше.
более надежный, чем метод затенения по умолчанию Jcrop, и его следует использовать только
используется, если вам нужна эта функция.
</p>
<р>
<b>Анимация/переходы.</b>
Демонстрация метода API animateTo и переходов для bgColor
и параметры bgOpacity для затухания цвета требуют включения John Resig.
jQuery <a href="http://plugins.jquery.com/project/color">Цвет
Плагин Animations</a> Если он не включен, цвета не будут исчезать.
</p>
<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Главная страница Jcrop</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">Руководство (документы)</a>
</div>
</div>
</div>
</div>
</тело>
</html>

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial5.html

Скопируйте код кода следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Jcrop » Учебные пособия » Демо API</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<style type="text/css">
.optdual { позиция: относительная }
.optdual .offset { позиция: абсолютная слева: 18em }
.optlist label { ширина: 16em; дисплей: блок };
#dl_links {margin-top: .5em }
</стиль>
<тип сценария="текст/javascript">
jQuery(функция($){
// Переменная jcrop_api будет содержать ссылку на
// API Jcrop после создания экземпляра Jcrop.
вар jcrop_api;
// В этом примере, поскольку Jcrop может быть прикреплен или отсоединен
// по желанию пользователя я обернул вызов в функцию
инициализацияJcrop();
// Функция довольно простая
функция initJcrop()//{{{
{
// Скрываем все элементы интерфейса, требующие Jcrop
// (Это для части локального пользовательского интерфейса.)
$('.requiresjcrop').hide();
//Вызов Jcrop обычным способом
$('#target').Jcrop({
onRelease: ReleaseCheck
},функция(){
jcrop_api = это;
jcrop_api.animateTo([100,100,400,300]);
// Настраиваем и отображаем интерфейс для «включенного»
$('#can_click,#can_move,#can_size').attr('проверено','проверено');
$('#ar_lock,#size_lock,#bg_swap').attr('проверено',false);
$('.requiresjcrop').show();
});
};
//}}}
// Используйте API, чтобы найти размеры обрезки
// Затем генерируем случайный выбор
// Эта функция используется кнопками setSelect и animateTo
// В основном для демонстрационных целей
функция getRandom() {
вар dim = jcrop_api.getBounds();
возвращаться [
Math.round(Math.random() * dim[0]),
Math.round(Math.random() * dim[1]),
Math.round(Math.random() * dim[0]),
Math.round(Math.random() * dim[1])
];
};
// Эта функция привязана к обработчику onRelease...
// В определенных обстоятельствах (например, если вы установили minSize
// и аспектное соотношение вместе), вы можете случайно потерять
// выбор. Этот обратный вызов повторно позволяет создавать выборки.
// в таком случае Хотя необходимость это сделать обусловлена.
// поведение с ошибками, рекомендуется каким-то образом отловить
// обратный вызов onRelease, если вы используетеallowSelect: false
функция ReleaseCheck()
{
jcrop_api.setOptions({allowSelect: true });
$('#can_click').attr('проверено',false);
};
//Прикрепляем кнопки интерфейса
// Может показаться, что кода много, но на самом деле это просто
$('#setSelect').click(function(e) {
// Устанавливает случайный выбор
jcrop_api.setSelect(getRandom());
});
$('#animateTo').click(function(e) {
// Анимирует случайный выбор
jcrop_api.animateTo(getRandom());
});
$('#release').click(function(e) {
// Метод Release очищает выделение
jcrop_api.release();
});
$('#disable').click(function(e) {
// Отключаем экземпляр Jcrop
jcrop_api.disable();
// Обновляем интерфейс, чтобы отразить отключенное состояние
$('#enable').show();
$('.requiresjcrop').hide();
});
$('#enable').click(function(e) {
// Повторно включаем экземпляр Jcrop
jcrop_api.enable();
// Обновляем интерфейс, чтобы отразить включенное состояние
$('#enable').hide();
$('.requiresjcrop').show();
});
$('#rehook').click(function(e) {
// Эта кнопка видна, когда Jcrop уничтожен
// Он выполняет повторное подключение и обновляет пользовательский интерфейс
$('#rehook,#enable').hide();
инициализацияJcrop();
$('#unhook,.requiresjcrop').show();
вернуть ложь;
});
$('#unhook').click(function(e) {
// Уничтожаем виджет Jcrop, восстанавливаем исходное состояние
jcrop_api.destroy();
// Обновляем интерфейс, чтобы отразить неприсоединенное состояние
$('#unhook,#enable,.requiresjcrop').hide();
$('#rehook').show();
вернуть ложь;
});
// Подключаем три кнопки смены изображений
$('#img1').click(function(e) {
jcrop_api.setImage('demo_files/sago.jpg');
jcrop_api.setOptions({bgOpacity: .6 });
вернуть ложь;
});
$('#img2').click(function(e) {
jcrop_api.setImage('demo_files/pool.jpg');
jcrop_api.setOptions({bgOpacity: .6 });
вернуть ложь;
});
$('#img3').click(function(e) {
jcrop_api.setImage('demo_files/sago.jpg',function(){
this.setOptions({
бгНепрозрачность: 1,
externalImage: 'demo_files/sagomod.jpg'
});
this.animateTo(getRandom());
});
вернуть ложь;
});
// Флажки просто устанавливают параметры на основе отмеченного значения
// Параметры изменяются путем передачи нового объекта параметров
// Также, чтобы предотвратить странное поведение, они изначально проверяются
// Это соответствует начальному состоянию Jcrop по умолчанию
$('#can_click').change(function(e) {
jcrop_api.setOptions({allowSelect: !!this.checked });
jcrop_api.focus();
});
$('#can_move').change(function(e) {
jcrop_api.setOptions({allowMove: !!this.checked });
jcrop_api.focus();
});
$('#can_size').change(function(e) {
jcrop_api.setOptions({allowResize: !!this.checked });
jcrop_api.focus();
});
$('#ar_lock').change(function(e) {
jcrop_api.setOptions(this.checked?
{AspectRatio: 4/3}: {AspectRatio: 0});
jcrop_api.focus();
});
$('#size_lock').change(function(e) {
jcrop_api.setOptions(this.checked? {
минимальный размер: [80, 80],
максимальный размер: [350, 350]
}: {
минразмер: [0, 0],
максимальный размер: [0, 0]
});
jcrop_api.focus();
});
});
</скрипт>
</голова>
<тело>
<div id="внешний">
<дел>
<дел>
<h1>Jcrop – демонстрация API</h1>
<img src="demo_files/sago.jpg" id="target" />
<div style="margin: .8em 0 .5em;">
<диапазон>
<button id="setSelect">setSelect</button>
<button id="animateTo">animateTo</button>
<button id="release">Выпустить</button>
<button id="disable">Отключить</button>
</span>
<button id="enable" style="display:none;">Включить повторно</button>
<button id="unhook">Уничтожить!</button>
<button id="rehook" style="display:none;">Прикрепить Jcrop</button>
</div>
<набор полей>
<legend>Переключение опций</legend>
<дел>
<label><input type="checkbox" id="ar_lock" />Соотношение сторон</label>
<label><input type="checkbox" id="size_lock" />настройка minSize/maxSize</label>
</div>
<дел>
<label><input type="checkbox" id="can_click" />Разрешить новый выбор</label>
<label><input type="checkbox" id="can_move" />Выделенный фрагмент можно переместить</label>
<label><input type="checkbox" id="can_size" />Выбор с возможностью изменения размера</label>
</div>
</fieldset>
<fieldset style="margin: .5em 0;">
<legend>Изменить изображение</legend>
<диапазон>
<button id="img2">Бассейн</button>
<button id="img1">Саго</button>
<button id="img3">Саго с внешним изображением</button>
</span>
</fieldset>
<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Главная страница Jcrop</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">Руководство (документы)</a>
</div>
</div>
</div>
</div>
</тело>
</html>