Используйте Phantomjs для вывода веб -страниц HTML в качестве изображений
I. Фон
Как создать картинку в мини -программе и поделиться ею с кругом друзей? В настоящее время, кажется, нет хорошего решения для фронта, поэтому его можно поддерживать только за пределами. Так как это можно сыграть?
Генерировать изображения проще
В простых сценариях вы можете напрямую использовать JDK, чтобы поддержать их, вообще говоря, нет слишком сложной логики.
Я писал логику для синтеза изображения раньше, используя AWT для реализации: синтез изображения
Общие, сложные шаблоны
Простые могут быть непосредственно поддерживать, но более сложные, и, несомненно, отвратительно позволить бэкэнд поддержать его. Я также искал некоторые библиотеки с открытым исходным кодом для рендеринга HTML на GitHub. Я не знаю, не неправильная поза или что -то в этом роде, но у меня не было очень удовлетворительного результата.
Как поддержать сложные шаблоны сейчас?
То есть руководство этой статьи, использующее Phantomjs для реализации рендеринга HTML, поддержки генерации PDF, генерирующих изображений и DOMS, - это в порядке. Далее мы продемонстрируем, как объединить Phantomjs, чтобы создать веб -страницу, чтобы привести ее в картинки.
II Предварительная подготовка
1. Phantom.js Установка
# 1. Скачать ## Mac System Wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip## linux system Wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2## Система Windows ## больше не играйте, это бессмысленное# 2. unzip sudo su tar -jxvf phantomjs-2.1.1 происходит, установите следующую #yum -y install Bzip2# 3. Установите ##, чтобы быть простым, перейдите в Bin Directory Phantomjs-2.1.1-Linux-X86_64/bin/phantomjs/usr/loc
2. Конфигурация зависимости Java
Конфигурация Maven Добавить зависимости
<!-Phantomjs-> <Dependency> <groupId> org.seleniumhq.selenium </GroupId> <straCactId> selenium-java </artifactid> <sersion> 2.53.1 </version> </artemendy> <DegePuction> <groupId> com.github.detro </GroupD> <ratifactId> chorgeDriver </artifactid> artifactid> artifactid> </artifactid> </artifactid> </artifactid> </artifactid> </artifactid> artifactid> <sersion> 2.1.0 </version> </degestency> <prepositories> <perpository> <id> jitpack.io </id> <url> https://jitpack.io </url> </Repository> </Repositories>
начинать
Логика в основном призывов Phantomjs для реализации изображения рендеринга HTML заключается в следующем
открытый класс html2imagebyjswrapper {private static phantomjsdriver webdriver = getphantomjs (); Частный статический phantomjsdriver getphantomjs () {// установить необходимые параметры желаемые Dcaps = new DesiredCapabilities (); // Сертификат SSSL поддерживает dcaps.setCapability ("AccessSlcerts", True); // экраны скриншот поддерживает dcaps.setCapability ("Takesscreenshot", True); // Поиск CSS поддерживает dcaps.setCapability ("cssselectorsEnabled", true); // JS поддерживает dcaps.setJavascripTenabled (true); // Поддержка драйвера (второй параметр указывает путь, в котором расположен ваш двигатель Phantomjs, который можно просмотреть Phantomjs) // FixMe записывает выполнение здесь, вы можете рассмотреть возможность определения, установлена ли система и получить соответствующий путь или открыть указанный путь dcaps.SetCapability (phantomJsdrierserService.FhantomJs_Executable_papability (phantomjsdriverservice.phantomjs_executable_papatability (phantomjsdrierservice.phantomjs_executable_papability. "/usr/local/bin/phantomjs"); // Создать межребесного объекта браузера возвращать новый PhantomJsdriver (DCAPS); } public Static BufferedImage renderhtml2image (String URL) бросает ioException {webdriver.get (url); File file = webdriver.getscreenshotas (outputtype.file); return imageio.read (file); }}Тестовый случай
открытый класс base64util {public Static String Encode (BufferedImage BufferedImage, String imgtype) бросает ioException {bytearrayOutputStream outpertStream = new BytearRayOutputStream (); Imageio.write (BufferedImage, Imgtype, OutputStream); вернуть Encode (outputStream); } public Static String Encode (BytearRayoutputStream outpertStream) {return Base64.getencoder (). EncodeToString (outputStream.TobyTearRay ()); }}@Testpublic void testrender () бросает ioException {bufferedimage img = null; for (int i = 0; i <20; ++ i) {string url = "https://my.oschina.net/u/566591/blog/1580020"; long start = System.currentTimeMillis (); img = html2imagebyjswrapper.renderhtml2image (url); Long End = System.CurrentTimeMillis (); System.out.println ("stost:" + (end - start)); } System.out.println (base64util.encode (img, "png"));}Я не буду публиковать сгенерированные картинки. Если вы заинтересованы, вы можете перейти прямо на мой сайт, чтобы проверить их.
Iii. Сетевой тест
Простое веб -приложение было развернуто на облачном сервере Alibaba, поддерживая функцию изображений HTML вывода; Поскольку я купил версию «Бешеный», а шаблон интерфейса, который я использовал, был прохладнее, она открывалась медленно.
Операция Демо:
V. Project
Адрес проекта:
Quick-Media
QuickMedia - это проект с открытым исходным кодом, посвященный графике, текстовым, аудио и видео, QR -обработке и другим мультимедийным услугам.
Приведенный выше код был проверен нашим. Если вы все еще не понимаете, что вам нужно обсудить, вы можете оставить сообщение ниже. Спасибо за поддержку Wulin.com.