استخدام Java PhantomJs لإخراج صور html

باستخدام phantomJs لتحويل صفحة html إلى صورة

I. الخلفية

كيف يمكن إنشاء صورة في تطبيق صغير وشاركتها في دائرة الإحباط؟ يبدو أن هناك حلاً جيدًا في الجانب الأمامي، لذا يمكن أن يتم دعمه بشكل مريع من قبل الخادم، فكيف يمكن اللعب؟

إنشاء الصور بسيط

الساحات البسيطة يمكن دعمها مباشرة باستخدام jdk، عادةً لا تحتوي على منطق معقد

لقد كتبت سابقًا منطق تكوين الصور، باستخدام awt: تكوين الصور

القوالب العامة المعقدة

القوالب البسيطة يمكن دعمها مباشرة، لكن القوالب المعقدة، دعمها من قبل الخادم، يبدو مروعًا، وقد بحثت في github عن مكتبات مفتوحة المصدر لعرض html، لا أعرف إذا كانت طريقة البحث خاطئة أو ماذا، لم أجد نتائج مرضية

الآن كيف يمكن دعم القوالب المعقدة؟

هذا الدليل هو دليل هذا المقال، باستخدام phantomjs لتحقيق عرض html، دعم إنشاء pdf، إنشاء صورة، تحليل dom جيد، وبعد ذلك سأقوم بشرح كيفية دمج phantomjs لإنشاء خدمة عرض صفحة الويب كصورة

II. التحضير اللازم

1. تثبيت phantom.js

# 1. تنزيل
## نظام ماك
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
## نظام لينكس
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
## windows 系统
## 就不要玩了，没啥意思
# 2. 解压
sudo su 
tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2
# 如果解压报错，则安装下面的
# yum -y install bzip2
# 3. 安装
## 简单点，移动到bin目录下
cp phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin
# 4. 验证是否ok
phantomjs --version
# 输出版本号，则表示ok

2. java依赖配置

maven 配置添加依赖

<!--phantomjs -->
<dependency>
  <groupId>org.seleniumhq.selenium</groupId>
  <artifactId>selenium-java</artifactId>
  <version>2.53.1</version>
</dependency>
<dependency>
  <groupId>com.github.detro</groupId>
  <artifactId>ghostdriver</artifactId>
  <version>2.1.0</version>
</dependency>
<repositories>
  <repository>
    <id>jitpack.io</id>
    <url>https://jitpack.io</url>
  </repository>
</repositories>

开动

主要调用phantomjs来实现html渲染图片的逻辑如下

public class Html2ImageByJsWrapper {
  private static PhantomJSDriver webDriver = getPhantomJs();
  private static PhantomJSDriver getPhantomJs() {
    //设置必要参数
    DesiredCapabilities dcaps = new DesiredCapabilities();
    //ssl证书支持
    dcaps.setCapability("acceptSslCerts", true);
    //دعم التقاط الشاشة
    dcaps.setCapability("takesScreenshot", true);
    //دعم البحث عن الكسس
    dcaps.setCapability("cssSelectorsEnabled", true);
    //دعم الجافا سكربت
    dcaps.setJavascriptEnabled(true);
    //دعم المحرك
    //fixme هنا تم كتابة التنفيذ، يمكن النظر في التحقق من تثبيت النظام الموجود، والحصول على المسار المناسب أو فتحه لتعيين المسار
    dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY, "/usr/local/bin/phantomjs");
    //إنشاء جهاز استقبال غير ذي واجهة مستخدم
    return new PhantomJSDriver(dcaps);
  }
  public static BufferedImage renderHtml2Image(String url) throws IOException {
    webDriver.get(url);
    File file = webDriver.getScreenshotAs(OutputType.FILE);
    return ImageIO.read(file);
  }
}

اختبار الحالة

public class Base64Util {
  public static String encode(BufferedImage bufferedImage, String imgType) throws IOException {
    ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
    ImageIO.write(bufferedImage, imgType, outputStream);
    return encode(outputStream);
  }
  public static String encode(ByteArrayOutputStream outputStream) {
    return Base64.getEncoder().encodeToString(outputStream.toByteArray());
  }
}
@Test
public void testRender() throws 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("تكلفة: " + (end - start));
  }
  System.out.println(Base64Util.encode(img, "png"));
}

لن أرفق الصور المولدة، ولكن يمكنك تجربتها مباشرة على موقعي إذا كنت مهتمًا

الفرع III. القياسات الشبكية

تم إعداد تطبيق web بسيط على خادم AliCloud، يدعم إخراج صور html؛ بسبب أنني اشتريت النسخة الميسورة التكلفة، والنموذج الأمامي المستخدم هو رائع جدًا، لذلك يفتح ببطء.

عرض العمل:

الفرع V. المشروع

عنوان المشروع:

quick-media

QuickMedia هو مشروع مفتوح المصدر مكرس لمعالجة الصور، الصوت، الفيديو، رموز القارئ، والخدمات المتعددة الأوجه

النصوص المقدمة أعلاه قد تم اختبارها من قبلنا، إذا كان لديك أي أسئلة أو تحتاج إلى مناقشة، يمكنك ترك تعليق في الأسفل، شكرًا لدعمك لتعليمات النقاهة.