Как да направите красиво добавяне на екранни снимки към вашите сайтове - За рублата

(не) научно-популярно списание за уеб администратори

направите

Два пътя - един пътДетска книга

Миналата седмица момчетата, които познавах, ме помолиха да им помогна с функционалността на директорията на сайта. Каталогът е като каталог, но те имат самостоятелно написан двигател и за красота искаха да имат снимка за всеки сайт - как изглежда в реален браузър.

Ясно е, че бутонът „Print Screen“ не е подходящ тук - има много сайтове и всичко трябва да работи автоматично. По принцип виждам два варианта за решаване на този проблем. Първият и най-очевиден е не да преоткривате колелото, а да използвате готови онлайн услуги, които предоставят готови екранни снимки на уебсайтове.

Наистина, много уеб администратори се нуждаят от изображения на уебсайтове (за директории, услуги за отметки, декориране на PPC емисии и т.н.), а търсенето винаги създава предлагане. Съответно в мрежата има няколко професионални услуги, които предоставят изображения на сайтове на търговска основа и безплатно в ограничено количество.

Ето обобщена таблица на онлайн услугите, които автоматично предоставят екранни снимки на сайтове и използват API:

Услуга Безплатна на месец Цена за 1000 скрийншота Размери на скрийншота
Услуга за миниатюри на сайт на Alexa00,20 долара111×82 201×147
Thumbshots.comза сайтове от DMOZ0,17 долара60×45 480×360
Thmbnl10000,17 долара60×45 100×75 160×120 320×240 800×600
Websnapr250 000$0,0990×70 202×152 400×300 640×480
Girafa Thumbnail Service60 0000,15 долара100×75 120×90 160×120
WebThumb2000$0,0980×60 160×120 320×240 640×480
WebShotsPro00,15 долара100×75 267×200 400×300 640×480
SnapCasaбез ограничение-100×75 140×105 200×150 280×210
ShrinkTheWeb250 000-120×90 200×150 200×150 320×240
Thumbalizr250 000$0,05150×112 320×240 640×480 800×600 1024×768 1280×1024
Artviper30000,08 доларавсякакви до 800×600

* ) - тези размери се предлагат само в платена версия.

Въпреки това, разглежданите услуги имат някои недостатъци:

  • Екранните снимки не са налични за всички сайтове, особено за нови или по-малко посещавани сайтове. Това е особено популярно за сайтове на български език, тъй като тези услуги са предназначени за англоезична аудитория. Освен това, по световните стандарти, посещаемостта на повечето .RU сайтове е много незначителна.
  • Не е известно предварително дали има екранна снимка или не в базата данни. Ако няма екранна снимка, на вашия сайт ще се покаже изображение на контейнер. Липсващите екранни снимки се създават със значително закъснение - обикновено в рамките на един ден. По правило тези услуги са предназначени да предоставят готови екранни снимки, а не бързо да създават нови.
  • Проблеми с български езикови сайтове– Не съм правил специално проучване по темата, но някои услуги не работят коректно с български език и текстовете в сайтовете изглеждат или като въпросителни, или в грешно кодиране.
  • Само готови екранни снимки на главните страници– ако имате нужда от екранни снимки на вътрешни страници за някаква целсайтове или поддомейни - повечето услуги няма да ви помогнат - те работят само с главните страници на основния домейн.
  • Маркет за безплатна услуга- присъства почти винаги, ако използвате безплатната версия на услугата. Немаркираните екранни снимки са достъпни за платени абонати.
  • Ограничени опции за размери на екранни снимки- ще трябва да избирате от набор от готови размери. Освен това почти никой не предоставя екранни снимки, по-големи от 640×400 пиксела.
  • Проблеми с показването на добавки– ако сайтът активно използва Flash, Java и CSS, екранната снимка може да показва сайта неправилно – не всички услуги работят като истински браузъри, тъй като обработката на Flash и Java изисква много ресурси.
  • Неизвестна дата на заснемане на екранна снимка- вероятно е снимката да е на година (или повече) - нямате контрол кога да направите екранна снимка.

Тези недостатъци не са фатални и е напълно възможно да използвате услугите. Сега обаче искам да ви кажа колко лесно и естествено можете да организирате услугата си за автоматично получаване на екранни снимки. Това ще бъде особено полезно, ако трябва да обработите само няколко хиляди сайта. Например за вашия малък тематичен каталог.

Правенето на екранни снимки ръчно не е опция за хиляди сайтове. И най-вероятно в базите данни на тези услуги има не по-малко посещавани сайтове на български език.

Всички решения за правене на екранни снимки в Unix/Linux се свеждат до стартиране на виртуален X сървър, който е доказал, че е Xvfb, който е включен във всички основни стандартни дистрибуции.

Първо, стартирайте Xvfb:

$ Xvfb :2 -screen 0 1024x768x24 -f "/usr/X11R6/lib/fonts/75koi8/,/usr/X11R6/lib/fonts/cyrillic/"

в този пример Xvfb работи с резолюция 1024x768, 24-битова дълбочина на цвета и български езикови шрифтове.

Правим кратка пауза, необходима за стартиране на сървъра и задаваме системна променлива с параметъра на виртуалния X сървър, така че графичните програми (браузърите) да знаят на кой виртуален екран да стартират:

Сега всичко е готово за стартиране на браузъра. Всички допълнителни манипулации се свеждат до това в кой браузър предпочитате да създавате екранни снимки. На *nix, Konqueror, Opera и Firefox работят добре. Има дори готови скриптове, които автоматизират по-нататъшната работа: платен khtml2png с помощта на KDE и Konqueror, безплатен html2jpg, базиран на двигателя на Mozilla.

Предпочитам Opera, тъй като има най-модерния команден ред. Можете да използвате любимия си браузър, ще дам примери за Opera. И така, стартираме браузъра и веднага му казваме кой сайт да изтегли, за да направи екранна снимка:

$ /usr/bin/opera -nomail -nosession -disableinputmethods -geometry 1024×768 -fullscreen “http://www.yandex.ru/”

Даваме време на сайта да се зареди напълно в браузъра и да направим екранна снимка:

$ xwd -root -silent xwdtopnm pamcut -left=5 -right=997 -top=27 -bottom=722 pnmtojpeg -quality=85 -optimize >screes/yandex.jpg

xwd прави екранна снимка на паметта на виртуалния X сървър, xwdtopnm я преобразува във формат pnm, подходящ за обработка от програми от стандартния пакет ImageMagick. В този случай pamcut изрязва контролите на браузъра, а pnmtojpeg записва цялата екранна снимка като JPG изображение.

Описаната процедура може лесно да се интегрира във всеки скрипт на познат ви език за програмиране. След това е въпрос на технология - стартирате програмата, а тя сама прави скрийншоти на нужните ви файлове.

защотоекранните снимки се създават от пълноценен браузър, след което работят всички плъгини, Java, Javascript, CSS и други джаджи. Картините се получават като на екрани на монитори. Ето какво получих за Yandex:

направите

Като имате оригинални екранни снимки в ръцете си, можете автоматично да ги промените сами, както желаете - преоразмерете, завъртете, нарисувайте рамки, хвърляйте сенки за красота, поставете вашето лого или етикет - като цяло, доколкото е достатъчно вашето въображение. И всичко това е напълно автоматично.

Надявам се да ви е харесало.

Анонимна регистрация на домейн - ако не искате вашите сайтове да изгорят вашия конкурент.

Прекрасна програма за проследяване в реално време на дейността на служителите и за контрол на работното време.