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

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

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

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

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



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


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

    Однако видим, что первый скриншот получился с именем 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 стало выглядеть так:
    image

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

    Немного кода на PHP
    <?
    
    $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, выделяем нужную область, получаем в браузере кнопку для копирования в буфер обмена ссылки
    image

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

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

    Берегите свои скриншоты и с пятницей всех!
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 39

      +2
      Save and share screenshots

      With the latest version of the desktop application installed, take a screenshot using one of these keyboard shortcuts for the Windows operating system:

      Press Print Screen to save the screenshot to your Dropbox.
      Press Ctrl + Print Screen to save the screenshot to your Dropbox and copy a link to the screenshot that you can immediately paste anywhere, such as an email message or a Facebook post. Anyone who clicks on the link will see your screenshot on a preview page on the Dropbox website.

      Link
        0
        В последнее время по нажатию на «увеличить» (лупа) не показывает полноэкранную картину, а до этого долгое время не отображало анимированные гифки. Но, как ни странно, это (субъективно, разумеется) наиболее удобный инструмент, который мне по какой-то причине совершенно не хочется менять на другой (может быть отсутствие рекламы и возможность без проблем удалять старые скриншоты).
        +1
        Что в Jing, что в Shutter это делается «в 2 клика» при верной настройке. Уверен в других программах тоже
          0
          Возможно, но всех и не перепробовать. Главная верная настройка была важна — не перебираемое имя файла. А сервисы, как уже говорил, когда помимо картинки открывается целый сайт с непонятно чем, это перебор.
          –2
          Dropbox позволяет автоматически сохранять скриншоты, очень удобно. Ссылка сразу копируется в буффер обмена.
            0
            но не часть экрана?
              0
              А это уже как скриншот сделан. На Маке я пользуюсь шорткатом Cmd+Shift+4, выделяю квадрат, Дропбокс его автоматически подхватывает, сохраняет как файл и кладет мне ссылку в буффер. При желании по Cmd+Shift+3 уйдет скриншот всего экрана.
                0
                alt+prtsc — должно только активное окно помещаться в буфер.
                  +1
                  конечно же я имел в виду произвольную часть экрана.
              +4
              Как все сложно,

              help.yandex.ru/disk/screenshots.xml

              Скрытый текст
              Чтобы быстро сделать скриншот в программе «Яндекс.Диск», нажмите клавишу Print Screen. Также можно сделать скриншот отдельной области экрана с помощью сочетания клавиш Shift + Ctrl + 1. Новый скриншот автоматически откроется в графическом редакторе, где вы можете нарисовать линии с помощью кисти, вставить простые геометрические фигуры или текст, а также кадрировать изображение.
              Цвет и размер для каждого элемента можно изменить.

              Горячие клавиши
              Для удобства работы со скриншотами в программе «Яндекс.Диск» предусмотрены горячие клавиши:
              Создание скриншотов
              Сделать скриншот области
              Shift + Ctrl + 1
              Сделать скриншот и получить ссылку
              Shift + Ctrl + 2
              Сделать скриншот всего экрана
              Shift + Ctrl + 3
              Print Screen
              Сделать скриншот окна
              Shift + Ctrl + 4
              Alt + Print Screen
              Графический редактор
              Вырезать объект
              Ctrl + X
              Копировать объект
              Ctrl + C
              Вставить объект
              Ctrl + V
              Копировать скриншот (если не выбран объект)
              Ctrl + C
              Вставить текст или изображение на скриншот
              Ctrl + V
              Переместить объект
              ← ↑ → ↓
              Быстро переместить объект
              Shift + ← ↑ → ↓
              Увеличить масштаб
              Ctrl + +
              Уменьшить масштаб
              Ctrl + –
              Масштаб 100%
              Ctrl + 0
              Удалить объект
              Delete, Backspace
              Отменить последнее действие
              Ctrl + Z
              Повторить последнее действие
              Ctrl + Shift + Z
              Сохранить
              Ctrl + S



              Да теперь даже ВКонтакте поддерживает Clipboard API и позволяет вставлять и редактировать скриншот прямо в чате (можно самой себе посылать).
                0
                Здесь будет в тему недавнее расследование о плагине Awesome Screenshot: Awesome Screenshot URL tracking and niki-bot
                  +1
                  а я уже подумал что это был плагин для awesome :(
                  +8
                  Странно, человек пишет, что не хочет использовать сторонние сервисы, а ему тут же начинают говорить, что это можно было сделать сторонним сервисом.
                    0
                    Но есть несколько нюансов, которые могут мешать их использовать. Для меня это реклама или множество мусорной информации вокруг скриншота (например, из какого окна браузера и когда я его сделал — я параноик), десяток кликов до заветной ссылки в браузере и буфере обмена. А хранить свой скриншот с изображением самой важной и сверх секретной информации непонятно где — это вообще непонятно как.

                    Автор недоволен конкретными вещами в существующих сервисах, ему предлагают готовые решения без этих минусов.
                      0
                      Спасибо! уже с текущим решением все хорошо, но на будущее учту и новые варианты.
                    0
                    Скорее всего, решил бы эту задачу так:
                    1)При старте системы монтируется ssh папка, ведущая на /var/www своего сервера
                    2)По нажатию PrScr делается скриншот через scrot со случайным названием в эту папку
                    3)Ссылка на файл выводится через dbus в окно уведомлений, или что-нибудь в таком духе

                    profit

                      0
                      1)При старте системы монтируется ssh папка, ведущая на /var/www своего сервера

                      scp подходит значительно лучше.
                      –2
                      Ребята, когда же вы уже успокоитесь с этими скриншотами и скриншотерами. Откройте для себя ShareX — и будет вам счастье. Кроме всего прочего, можно там задать и произвольный шаблон имени сохраняемого файла, и соль добавить.
                        0
                        Ну а если хочется свой сервис использовать, то настроить Custom uploader в ShareX, и FTP там использовать тоже можно.
                          0
                            0
                            Более реалистичный сценарий:
                          0
                          Так чем же это решение не устраивает вас, ребята?
                          +3
                          у меня эту проблему решают аж целых 2 скрипта на баше.
                            +2
                            а второй-то зачем?
                              +1
                              true unix-way

                              первый делает скриншоты
                              второй их заливает на хост
                                0
                                я не угадал)
                                0
                                возможно второй является зачисткой старого мусора, или второй скрипт отображает картинку вместо прямого ее открытия, но это все догадки :) похоже не всех устраивают текущие скриншотеры раз так изголяются, кто может.
                                  0
                                  зачисткой занимается cron + find на хосте. проблем то.

                                  я не изголялся., а написал 5 строчек на баше. проблем на 10 минут.
                                    0
                                    вот и я такого же мнения. немного кода, немного минут и получилось, что хочется.
                                      0
                                      Спасибо вам большое за то что вы написали пост на хабр!!!
                                      Чем больше новых и оригинальных решений тем лучше для хабра!!!
                                        +1
                                        image
                                        показалось :)
                              +1
                              habrahabr.ru/post/132937/

                              и вопрос закрыт.
                                0
                                Очень близко, да. Только там такой же код. Плюс поправить под себя на C++ :) Скорее всего там не будет полезнейших штуки вида: скрин окна с прокруткой, минимального редактора точно нет, а иногда все же надо.
                                  0
                                  Вот только там уже ссылки померли…
                                  +1
                                  Видимо нет еще кроссплатформенного приложения, который удовлетворял бы все основные мои (я думаю и большинства пользователей) запросы, а именно:
                                  — захват скриншота и добное редактирование (как в Joxi, Sutter)
                                  — кастомная загрузка на фтп c формирование удобных ссылок (как в ShareX)
                                  — добавление различных эффектов (watermark, soft edges, ..) (как в Sutter)
                                  — загрузка на популярные облака: dropbox, onedrive, yandex.disk, mail.ru… c прямыми ссылками, сразу после копии.

                                  Если кто знает такое приложение или приближенный аналог — буду оч. признателен за ссылку.
                                    0
                                    delete
                                      0
                                      В свое время перешел с FastStone на Monosnap, который мощнее, умеет рандомизировать урл и бесплатный.

                                      image

                                      Вот пример настройки.

                                      Скрин, кстати, моноснапом. Тенюшку еще умеет прикольную делать :)
                                        0
                                        Очень прилично, спасибо! Но вроде на фтп не грузит и нельзя прокручивающееся окно фоткать + колорпикер и экранная линейка полезнее пока для меня, чем возможность вырезать фото с точностью до пикселя :) Тенюшка прикольная, да :)
                                          0
                                          Так и на фтп грузит (на скрине пример же файл-именования именно при загрузке на фтп). И колорпикер есть и он встроен в инструмент вырезания — нужно просто Стрл+С нажать вместо подтверждения выбора.
                                          Экранную линейку реализую в случае надобности как раз способом попиксельного выбора — оно ж показывает, сколько пикселей ты выбрал, вот и линейка :) (но признаю, что мне надо было пару раз всего в жизни. если надо часто возможно будет неудобно)

                                          Но вот скроллинг — да, вроде нет возможности.
                                          Тут видимо важно выбрать что важнее — скрин скроллабли-окна или рандомный урл (мне второе было важнее).

                                      Only users with full accounts can post comments. Log in, please.