За последние 24 часа нас посетили 55305 программистов и 1725 роботов. Сейчас ищут 1130 программистов ...

Конвертация HTML в JPG (или PNG) средствами PHP

Тема в разделе "Прочие вопросы по PHP", создана пользователем kit, 3 ноя 2015.

  1. kit

    kit Активный пользователь

    С нами с:
    18 дек 2006
    Сообщения:
    331
    Симпатии:
    1
    Адрес:
    местный
    Всем привет!
    Задача обозначена в заголовке. Надо сделать что-то на подобии скриншота страницы. Вопрос: есть ли реализация?
    Из всего что удалось найти он-лайн сервис http://www.websnapr.com/, да и тот не работает (хотя и платный).
    Может кто сталкивался и есть наработки?
     
  2. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    phantomjs если надо реально отрендереную или нет?
     
  3. kit

    kit Активный пользователь

    С нами с:
    18 дек 2006
    Сообщения:
    331
    Симпатии:
    1
    Адрес:
    местный
    что значит "реально отрендереную"?
     
  4. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
  5. kit

    kit Активный пользователь

    С нами с:
    18 дек 2006
    Сообщения:
    331
    Симпатии:
    1
    Адрес:
    местный
    как в браузере

    Добавлено спустя 1 минуту 11 секунд:
    Читаю въехать не могу. Денис будь другом напиши что скачать и как подключить его.
     
  6. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    А у тебя какая ОС? Искал как phantomjs на неё установить?
    Я дал ссылку на github там написано как через composer установить пакет, который облегчает работу с phantomjs.
     
  7. kit

    kit Активный пользователь

    С нами с:
    18 дек 2006
    Сообщения:
    331
    Симпатии:
    1
    Адрес:
    местный
    Сижу гуглю... пока все печально...(((
    Куда он устанавливается? На сервер где лежит мой сайт или локальный комп?
     
  8. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    обычно ставят на том компьютере где хотят запускать, гугли дальше
     
  9. kit

    kit Активный пользователь

    С нами с:
    18 дек 2006
    Сообщения:
    331
    Симпатии:
    1
    Адрес:
    местный
    может я не правильно задачу обрисовал?
    мне надо что бы мой сайт, выдавал скриншоты страниц моего же сайта.
    мне надо просить своего хостера "Дяденька поставьте на вашем сервере phantomjs"?
     
  10. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Да, всё верно, но думаю тебе предложат купить VDS рублей за 150 в месяц, там можно устанавливать всё что душе угодно в разумных рамках.
     
  11. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Есть способ с помощью JS, как в похожей теме советуют, на библиотеке html2canvas.
    Я предлагал с помощью браузера, встроенного в AIR.
    Есть ещё подобные способы, предполагающие использование твоего копьютера.
    Потом скрины можно расшаривать, передавать на сервер (может, Я.Диск подойдет или Гугл), откуда уже и смотреть в браузере.
     
  12. kit

    kit Активный пользователь

    С нами с:
    18 дек 2006
    Сообщения:
    331
    Симпатии:
    1
    Адрес:
    местный
    не, это не вариант. с таким успехом можно кнопочку принтскрин нажать и не париться - это еще проще
    надо все на серверной стороне делать
    пошел гуглить дальше...(((

    Добавлено спустя 39 минут 25 секунд:
    В общем план такой (не хороший)
    1) Конвертируем хтмл в пдф (это я умею)
    2) Делаем конвертирование PDF в JPG на php (http://blog.bados.org.ua/convert-pdf-to-jpg-on-php.html)
    Все это на серверной стороне, юзер увидит только готовую ратинку
    Ничего умнее не придумал(((
    Пошел курить ImageMagick
    У кого будут мысли - пишите
     
  13. [vs]

    [vs] Суперстар
    Команда форума Модератор

    С нами с:
    27 сен 2007
    Сообщения:
    10.559
    Симпатии:
    632
    У меня есть самописное готовое решение для VPS с линуксом, на основе браузера хром. Грузит с флешем. Могу установить за $50.
     
  14. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
  15. VLK

    VLK Старожил

    С нами с:
    15 дек 2013
    Сообщения:
    3.010
    Симпатии:
    58
    есть такая сайт - https://onlinezakladki.ru/
    вот ты добавляешь ссылку а тебе делается на нее скриншот, я так понимаю автару нужно что то подобное, в смысле делать такой же скриншот.

    Я когда то хотел сделать сервис типа этих onlinezakladki, но выяснилось что он уже существует.

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

    Есть так же уже готовые платные сервисы которые делают подобное.
     
  16. [vs]

    [vs] Суперстар
    Команда форума Модератор

    С нами с:
    27 сен 2007
    Сообщения:
    10.559
    Симпатии:
    632
    это требует участия пользователя =) а моё решение автоматическое.
     
  17. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    [vs] ага, я понял твоё решение это headless браузер
     
  18. kit

    kit Активный пользователь

    С нами с:
    18 дек 2006
    Сообщения:
    331
    Симпатии:
    1
    Адрес:
    местный
    Ну все ребята, вроде вкурил тему!
    Выкладываю всем бесплатно, а для [vs] за 50 баксов! :p
    Решение как и писал выше такое: с помощью mPDF сохраняю скриншот страницы в pdf, а затем с помощью imagick перевожу в jpg. В последствии файл pdf удаляем (по необходимости).
    Решение, мягко говоря, далеко не мгновенное, но поскольку для моих потребностей это надо делать один раз в сутки да и то курлом, то вполне себе жизнеспособное.
    Ушел сводить все в один код. Если нужен листинг могу потом выложить.
    Всем спасибо и удачи. Пока!
     
  19. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Выкладывай решение
     
  20. romach

    romach Старожил

    С нами с:
    26 окт 2013
    Сообщения:
    2.904
    Симпатии:
    719
    А javascript он умеет? Вообще, вариант с phantomjs наиболее разумный, правда я бы взял nightmarejs - это обертка, работать с которой на порядок удобнее.
     
  21. kit

    kit Активный пользователь

    С нами с:
    18 дек 2006
    Сообщения:
    331
    Симпатии:
    1
    Адрес:
    местный
    Код еще "сырой" но рабочий. В общем надо доработать "напильником".
    Переменную $style лучше конечно не прописывать, а спарсить с сайта, но в моем случае вполне приемлемо.
    Самая большая проблема на мой взгляд в том, что mPDF не читает стили, прописанные в тэгах (только в файле стиля). По этому данный способ НЕ УНИВЕРСАЛЬНЫЙ, то есть сделать скниншот любой страницы не получится.
    Но, повторюсь, для моей задачи вполне себе приемлемо. Для начала надо скачать и распаковать на сервере mPDF (в моем случае версия 5.7, хотя наверняка уже есть посвежее).
    Если страница не влезет в формат А4, то imagick сделает картинку только с последней страницы файла пдф, кому надо можно доточить до сохранения скриншотов всех страниц файла пдф.
    Про js боюсь даже предположить)))
    По поводу phantomjs, хостер предлагает его на тарифах с VPS, примерно полторы тыщи в месяц. Так что точим код дальше)))
    Код (PHP):
    1. <?php
    2. $url'="www.site.com";
    3. $style=""style.css;
    4. $fh = fopen('$url','r');
    5. if($fh) 
    6. {
    7.     while(!feof($fh)) $text.=fread($fh,40096);
    8.     fclose($fh);
    9. }
    10. include("MPDF57/mpdf.php");
    11. $mpdf = new mPDF('utf-8', 'A4', '7.5', '', 12, 7, 7, 7, 10, 10); /*задаем формат, отступы и.т.д.(кодировка, формат, шрифт, , слева, справа, сверху, снизу, , ,)*/
    12. //    $mpdf->charset_in = 'cp1251'; /*не забываем про русский по необходимости*/
    13. $stylesheet = file_get_contents('$style'); /*подключаем css*/
    14. $mpdf->WriteHTML($stylesheet, 1);
    15. $mpdf->list_indent_first_level = 0; 
    16. $mpdf->WriteHTML($text, 2); /*формируем pdf*/
    17. $mpdf->Output('result/file.pdf', 'F');
    18. $pdf_file = 'result/file.pdf';
    19. $im = new imagick($pdf_file);
    20. $i=0;
    21. foreach($im as $_img) {
    22.    $i++;
    23.    $_img->setResolution(300, 300);
    24.    $_img->setImageFormat('png');
    25.    $_img->writeImage('result/image.png');
    26. }
    27. $im->destroy();
    28. echo "<img src='result/image.png'>";
    29. ?>
    PHP, JavaScript, SQL и другой код пишите внутри тегов
    Код ( (Unknown Language)):
    1. [b]php][/b]Тут код[b][/[/b][b]code][/b][/color]
     
  22. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    вот это самое главное

    90 рублей в месяц https://firstvds.ru/products/vds_vps_cheap только у тех поддержи спроси какую ОС ставить, чтобы phantomjs пошёл.
     
  23. kit

    kit Активный пользователь

    С нами с:
    18 дек 2006
    Сообщения:
    331
    Симпатии:
    1
    Адрес:
    местный
    ну это круто, спасибо
     
  24. romach

    romach Старожил

    С нами с:
    26 окт 2013
    Сообщения:
    2.904
    Симпатии:
    719
    DigitalOcean - 5 баксов, есть даже машины с предустановленной нодой.

    https://www.npmjs.com/package/phantomjs
    http://phantomjs.org/screen-capture.html - вот пример специально для тебя )
    http://expressjs.com/ru/starter/basic-routing.html - фреймворк для быстрого написания api

    Тратишь вечер на чтение доков по ноде, затем ставишь все что необходимо, пишешь простую апишку, в которую можно будет передавать ссылку и получить картинку правильно отрендеренной странички, точно в таком же виде, в каком её рендерит хром. Профит.
     
  25. kit

    kit Активный пользователь

    С нами с:
    18 дек 2006
    Сообщения:
    331
    Симпатии:
    1
    Адрес:
    местный
    Не могу разобраться с качеством изображения... Как его поменять в imagick? Пробую поменять параметры - результат ноль((
    Код (PHP):
    1. $pdf_file = 'result/file.pdf';
    2. $_img = new imagick($pdf_file);
    3. $_img->setResolution(1000, 1000);
    4. $_img->setCompressionQuality(1000); 
    5. $_img->setImageFormat('jpg');
    6. $_img->setOption('density','1000x1000');
    7. $_img->writeImage('result/image.jpg');
    8. $_img->destroy();
    9.  
    Здесь вот viewtopic.php?t=39209 человек тоже искал решение и нашел.
    Только где чего поменял не понятно.
    Может в курсе кто?