var ajaxCall;
jQuery(document).ready(function(){
$("#body").on('click', '.imgPre', function(event) {
// Получим объект, по событию click
$this = $(this);
// Прочитаем ссылку из data-link
var dataSrc = $this.attr('data-link');
// Прочитаем идентификатор из data-id
var id = $this.attr('data-id');
console.log('Получили идентификатор гифки '+id);
// Прочитаем ссылку из src тега img
var linkSrc = $('#gifIMG'+id).attr('src');
// Получим текущее состояние анимации off - висит заглушка, on - гиф воспроизводится, load - гиф загружается
var dataPlay = $this.attr('data-play');
// Если отображается предпросмотр
if(dataPlay == 'off'){
console.log('Нажали на просмотр гифки');
// Отработаем ajax запрос
ajaxCall = $.ajax({
// устанавливаем параметры запроса
url: dataSrc,
processData: false,
contentType: false,
beforeSend: function(p)
{console.log('Перед отправкой запроса, прячем кнопку запуска');
$('#play'+id).hide('slow'); // Прячем кнопку запуска
$this.attr('data-play','load'); // Изменим статус на "загружается"
console.log('Ставим статус "загружается" ');
$('#progress'+id).show('slow'); // покажем прогресс бар
},
success: function(p) {
// Установим ссылку на статическую картинку для этапа отключения анимации
$this.attr('data-link',linkSrc);
// Прячем прогресс бар
$('#progress'+id).hide('slow');
// Запустим анимацию файла
$('#gifIMG'+id).attr('src',dataSrc);
$this.attr('data-play','on'); // Изменим статус на "загружено/воспроизводится"
console.log('Ставим статус "загружено/воспроизводится" ');
},
xhr: function(){
console.log('Обработка ajax-запроса - xhr');
xhr = $.ajaxSettings.xhr(); // получаем объект XMLHttpRequest
console.log('Получили объект xhr');
xhr.onprogress = function(e) { // добавляем обработчик события progress (onprogress)
if(e.lengthComputable) { // если известно количество байт
// высчитываем процент загруженного
var percentComplete = Math.ceil(e.loaded / e.total * 100);
// Выводим процент на экран
//$('#body_gif'+id).css('width', percentComplete + '%');
//$('#text_gif'+id).text(percentComplete + '%');
$('#progressBody'+id).html(percentComplete+ '%');
}
}
return xhr;
}
});
}
// Если статус "загружается" - значит нажали отмену загрузки
if(dataPlay == 'load'){
console.log('Статус загружается. Убиваем процесс загрузки', ajaxCall);
ajaxCall.abort();$('#progress'+id).hide('slow'); // Отменим запрос и скроем прогресс бар
$this.attr('data-play','off'); // Изменим статус на "предпросмотр"
// Покажем кнопку запуска
$('#play'+id).show('slow');
$('#circle'+id).html('');
}
// Если статус "загружено/воспроизводится" - значит нажали остановку воспроизведения
if(dataPlay == 'on'){
console.log('Нажали остановить воспроизведение ');
// Установим ссылку на анимацию для этапа запуска
$this.attr('data-link',linkSrc);
// Остановим анимацию файла
$('#gifIMG'+id).attr('src',dataSrc);
// Покажем кнопку запуска
$('#play'+id).show('slow');
$this.attr('data-play','off'); // Изменим статус на "предпросмотр"
$('#circle'+id).html('');
console.log('Остановили воспроизведение гифки');
}
}); });
$draw = new ImagickDraw(); // Для работы с текстом
$bg = new Imagick($image_bg); // работа с самой картинкой
$fontPath = BASE_DIR.'/watermark/Impact.ttf';
$draw->setFont($fontPath);
$draw->setFillColor('#FFF');
$draw->setFontSize(32);
$draw->setStrokeColor('black');
$draw->setStrokeWidth(1);
// 1 это x - Слева на право / 2 это y - Сверху вниз / Сам текст
$bg->annotateImage($draw, 50, 50, 0, 'The quick brown fox jumps over the lazy dog');
$bg->writeImage($image_new);