Свой сервис скриншотов для спокойного сна

Довольно часто в разработке, да и не только, нужно поделиться с кем-нибудь скриншотом. Поэтому удивить кого-либо сервисами Clip2Net, Joxi или Gyazo уже сложно.

Но есть несколько нюансов, которые могут мешать их использовать. Для меня это реклама или множество мусорной информации вокруг скриншота (например, из какого окна браузера и когда я его сделал — я параноик), десяток кликов до заветной ссылки в браузере и буфере обмена. А хранить свой скриншот с изображением самой важной и сверх секретной информации непонятно где — это вообще непонятно как.

Нужно так: нажал горячую клавишу для прямоугольника или экрана, или для окна с прокруткой и все. Картинка открылась в браузере, а ссылка на нее скопировалась в буфер обмена. Все это на своем хостинге рядом со своими сайтами. Опционально на скриншоте можно еще порисовать разные стрелочки и кружочки.

Эти задачи отлично решает программка Fast Stone Capture плюс свой FTP, куда можно загружать созданные скриншоты. Но есть нюансы, о которых, если подумать, можно перестать спокойно спать. Под катом рассказываю о нюансах и как их решить, если вам тоже нужны только картинки, только на своем сервере и, чтобы спать спокойно.

Вот стандартный вариант настройки генерируемого имени файла и параметров для фтп загрузки.

Вроде все хорошо. Сделали скрншот, он загрузился на фтп, открылась ссылка и она же попала в буфер обмена. Все у себя, ничего лишнего, просто сказка.

Однако видим, что первый скриншот получился с именем example.com/_ss/screenshot0001.png, второй example.com/_ss/screenshot0002.png, третий example.com/_ss/screenshot0003.png и все они так и лежат на вашем фтп. Интересно, как быстро кто-то догадается из ваших знакомых, особенно разработчиков, что можно так легко пройтись по всем вашим картинкам?

Ведь наверняка найдется то, что не для всех предназначено. Спустя пару лет такого использования этого скриншотера, боюсь представить, что могло быть. Но лучше об этом и не думать. Даже если использовать шаблоны с датами, понимание такого нюансика уже не даст уснуть.

Идея номер 1
На секунду даже показалось, что можно пользоваться и клиптунетом с ёхи или гязо. Там ссылки довольно сложно перебрать. Попробовал. Но нет. Это единственное преимущество не победило все недостатки против собственного фтп с картинками. Особенно после многолетней привычки делать скриншот одним нажатием горячей клавиши и получать именно то, что задумывалось — скриншот без мусора, а еще и на своем сервере.

Идея номер 2
Можно еще и в поддержку программки было бы написать, но это пока ответ, пока появится, если и появится. За 30 минут можно все самому сделать.

В общем, будем тюнинговать то, к чему душа лежит.

Решение номер 1
Делаем шаблон вида H$YE$SL$M01$D$S$H####$N$SABC$S — добавляем множество мусора между датами, порядковым номером скриншота, секунды с минутами дублируем по несколько раз в разных местах и т.п. Определенно название файла H2014E41L080115411600085941ABC41.png уже дает намного меньше повода для беспокойства.

Можно было бы и остановиться на этом, но мысль о переборе все еще не дает покоя. Хотя, кому ж они нужны эти мои картинки? Но дело ж принципа: разработка, безопасность, все дела. То есть я еще не спокоен. Наверняка кто-то еще тоже окажется.

Решение номер 2
Делаем такой же не простой шаблон названия и добавляем к нему свой какой-нибудь пароль (соль). Например,
2G35nl0OJb4FkZH$YE$SL$M01$D$S$H####$N$SABC$S. И пишем свой маленький скриптец, который при открытии ссылки будет еще шаманить над этим файлом. На самом деле тут уже можно было бы обойтись просто мусором в шаблоне файла, шаблон то по итогу никто не узнает. Но мало ли.

В итоге окно параметров FTP стало выглядеть так:

Добавляем в URL ссылку на свой скрипт, который сможет открывшийся файл переименовать как нужно и откроет его в браузере уже по новому адресу. Совершенно секретному, как положено. Вы то первый откроете новый скриншот, а дальше для всех ссылка уже будет новая. Добавим здесь же опцию удаления старых скриншотов.

<?

$key = 'JLWWJLjfsdlf99234ged2340'; // соль для md5 в названии файла.
$folder = 'files'; // имя папки со скриншотами, которая находится рядом с ss.php
$lifetime = 86400 * 7; // чистка старых скриншотов после 7 суток


// дальше все работает само
$link = '';
$cd  = dirname(__FILE__) . '/';

// Если автоматически открыли ссылку после создания скриншота
if (!empty($_GET['file']))
{
	$file = ltrim($_GET['file'], '/'); // FS добавляет слеш после ?file=

	if (preg_match('#^[0-9a-z_-]+.(png|jpg|jpeg|gif)$#si', $file, $f))
	{
		$dest = $cd . $folder . '/' . md5($key . $file) . '.' . $f[1];

		$url = 'http://' . getEnv('HTTP_HOST')
				. str_replace(basename(__FILE__), '', $_SERVER['SCRIPT_NAME'])
				. $folder . '/';

		$src = $cd . $file;

		$link = $url . basename($dest);

		if (file_exists($src))
		{
			rename($src, $dest);
		}
	}
}

// Чистка старых скриншотов
$dest = $cd . $folder . '/';
$files = scandir($dest);
foreach ($files as $file)
{
	if ($file[0] == '.')
		continue;

	$file = $dest . $file;
	if (time() - filectime($file) > $lifetime)
		unlink($file);

}
?>
<? if ($link):
	//header('Location: ' . $link);
	//exit();
?>
<html>
  <body>
    <button id="copy-button" data-clipboard-text="<?= $link; ?>" style="padding: 20px; margin: 50px auto; display: block;"><?= $link; ?></button>
    <script src="zc/ZeroClipboard.js"></script>
    <script type="text/javascript">
    	// main.js
		var client = new ZeroClipboard( document.getElementById("copy-button") );

		client.on( "ready", function( readyEvent ) {

			client.on( "aftercopy", function( event ) {
				document.location.href = event.data["text/plain"];
			});

		});

    </script>
  </body>
</html>
<? endif; ?>

Появился один большущий нюанс.
После переименования файла ссылка в буфере обмена будет кривой, на кодировщик имен. Пришлось добавить большую кнопку, которая браузерными средствами копирует новую ссылку на картинку и открывает ее в браузере. Но с этим уж как-то придется мириться. Помогла библиотека zeroclipboard.

В итоге, жмем Ctrl+PrtSc, выделяем нужную область, получаем в браузере кнопку для копирования в буфер обмена ссылки

И идеальную ссылку на скриншот без ничего лишнего: www.grinkevich.by/_ss/files/9bf30316a61ee1f8caf078ebac1f7dda.png который удалится через 7 дней. Надеюсь, кому-нибудь еще будет полезно такое решение.

Возможно, кому-то это будет смешно, а кому-то и совсем грустно от таких извращений. Но кому как, да и программка немного платная и здесь тоже кому как :)

Берегите свои скриншоты и с пятницей всех!

Автор: ewgenij

Источник