Convert html pages into images

Source: Internet
Author: User
Tags wkhtmltopdf

Problem Analysis: You need to generate an image with different description rules based on the game you select and different years. If you use java to draw this image, it is obviously unreliable, some Open-Source graphics tools are all modified on the basis of the original graph and are not generated according to the specified rules. After research and discussion, I feel that freemarker can customize the style template you want. If you use a template customized by freemarker to generate a static html page, then convert the html page into an image, in this case, you can generate an image of the specified style, but how can you convert html into an image. There are many written code implementations on the Internet. However, after testing, these codes cannot parse the dynamic css styles and js of html pages, resulting in inconsistent images and static pages, including open-source html2image jar packages, the results do not meet the project requirements. Solution: Use the templates customized by freemarker to generate static pages and use the open-source wkhtmltoimage software to capture static pages. Because static pages are screenshots, all styles of static pages are retained. Wkhtmltoimage is completely open-source and free of charge. It is easy to install and easy to use. Application Scenario: This method is recommended to generate unused slices based on different user behaviors. Step 1: Create an ftl template page based on your needs. The template style varies with your needs. Second: generate a static html page. Call the wk command to generate an image template + Data = output. Based on this principle, load the template, process the data, and output a static page. [Java] public void createSpaceImage (Configuration config) throws Throwable {// absolute path of the Static Page String htmlDirectory = ""; String imageDirectory = ""; String templatePath = ""; string htmlFileName = htmlDirectory + "/" + file name + ". html "; String imageFileName = imageDirectory +"/"+ file name + ". png "; File htmlFile = new File (htmlFileName); if (! HtmlFile. getParentFile (). exists () {htmlFile. getParentFile (). mkdirs () ;}if (! HtmlFile. exists () {htmlFile. createNewFile ();} File imageFile = new File (imageFileName); if (! ImageFile. getParentFile (). exists () {imageFile. getParentFile (). mkdirs ();} config. setNumberFormat ("#"); // generate static HTML Template = config Based on the template and data. getTemplate (templatePath, "UTF-8"); Writer out = new BufferedWriter (new OutputStreamWriter (new FileOutputStream (htmlFile), "UTF-8"); Map <String, object> data = new HashMap <String, Object> (); template. process (data, out); // generate the htmlFileName Static Image Based on the static HTMl Page path imageFileName Image path size HtmlToImage.html 2 Image (htmlFileName, imageFileName, 600,400);} method parameters need to be rewritten based on the actual situation for data processing. The html2Image method is as follows: [java] public static void html2Image (String filePath, String targetPath, int I, int j) throws Throwable {String command = ApplicationConfig. getValue ("annalsImage. command "); command = command +" -- crop-w "+ I +" -- crop-h "+ j +" "+ filePath +" "+ targetPath; runtime.getruntime(cmd.exe c (command);} [java] String command = ApplicationConfig. getValue ("annalsImage. command "); its Command in is the wkhtmltoimage command. in linux, you can connect to the context strength or configure environment variables. Step 3: download and install wkhtmltoimage (1) download $ wget http://wkhtmltopdf.googlecode.com/files/wkhtmltoimage-0.11.0_rc1-static-i386.tar.bz2 Or $ wget http://wkhtmltopdf.googlecode.com/files/wkhtmltoimage-0.11.0_rc1-static-amd64.tar.bz2 Note: Use the following command to determine the version to be downloaded: $ uname-a (2) unzip and install Wkhtmltoimage as an executable file, decompress it, and decompress it to a specific path, you need to configure environment variables so that the executable file can be called in any path. Unzip the command as follows: $ tar-jxvf wkhtmltoimage-0.11.0_rc1-static-i386.tar.bz2 or $ tar-jxvf wkhtmltoimage-0.11.0_rc1-static-amd64.tar.bz2 (3) run $. /wkhtmltoimage-i386 www.baidu.com baidu.jpg (4) environment requirements ensure that the system font is UTF-8, use the following command to view the system Font: $ at/etc/sysconfig/i18n my computer display result is: LANG = "zh_CN.UTF-8" must install glibc and openssl must install x11 and correct x11 fonts use the following command: rpm-qa | grep x11 the font to be installed: xorg-x11-font-utils -... xorg-x11-fonts-Type1 -... xo Rg-x11-fonts-chinese -... After the installation is successful, you can convert the html page to an image using the preceding method.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.