Automatically generate web page screenshots using the web page screenshot API interface

Background

Recently I am developing a small program, which has a help module, the content is a list of help articles, and the article content is rich text edited by the website background Format. In view of the particularity of the applet, its support for rich text in HTML format is not friendly.

At first someone developed the wxparse plug-in, and later WeChat provided the rich-text component, but there were some problems with both.

Thoughts

After the article styles edited in the background are displayed through wxparse or richtext components, there are some compatibility issues. If we make the article content into a picture and then use the image to display it, we should be able to achieve a more ideal effect.

But for every article, it is time-consuming and laborious to go to the art area to design a picture, and it is also laborious to modify.

It would be perfect if the article we edited in the background could automatically generate a picture.

Plan

After querying, we found that the foreign website thumb.io provides a similar service. You can use the API interface to save the specified address as an image. However, after testing, it was found that the picture was not clear and the access speed was very slow. Then I installed phantomjs myself and tested it, and the effect was ideal.

Screenshot of Baidu homepage saved with phantomjs

In order to achieve automation, I also made a web api. Screenshots can be automatically generated (asynchronously) by sending the URL of the corresponding article to the specified API. The specific method is to save the request to the database when there is a screenshot request, then run a program on the server to perform screenshot operations one by one, and modify the status of the corresponding request after taking the screenshot.

----------------------------------------------- --------

API interface (the content in {} is the parameter value)

Usage: A screenshot will be required The URL is passed to the screenshot request interface. After a period of time (10 seconds is recommended), the query interface is queried. If the returned code=0, status=1, just save the thumbbush locally.

Generate screenshot request: http://thumb.loxn.cn/?url={URL}

Description: URL parameters must be specified urlencode, otherwise errors may occur

Example: http://thumb.loxn.cn/?url=http%3a%2f%2fwww.cnblogs.com%2fdragondean%2f

Return: JSON Format

　　　　　code　　0 Success, 　　 URL format error, 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

#　　　 　　　 　　 　　　 　　　 　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　      ' The URL format

already exists

It is needed when querying the secret key (when the code is 0 or 2)

If it exists, this status will be returned. -1 means failure, 0 means processing, 1 means completed

　　　　 Thumb　 Screenshot address, you can directly download this image to the local (when code is 2 and status is 1)

　　　　　err_msg　Error message, only exists when status=-1

Query task status: http://thumb.loxn.cn/?a=query&task_id={TASK_ID} &key={KEY}

　　　　　　　　　　　　　　　　　　　　　　　　　　　　 cessure in the task_id and key are returned when generating a request, required

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 cessure in >> Task_id and key are returned when generating a request, required

EB8578633E5CB22377EE85641204494F

Return: json

# Code Return status, 0 success, 3 tasks do not exist, 4 query secrets

Status codes are 0, status = -1 means indicating Failed, status=0 means processing, status=1 means completed

　　thumb　When the code bit is 0 and status is 1, screenshot address, you can directly download this picture to the local

　　　err_msg　Error Information, only exists when status=-1

---------------------------------- ------------------

###

The above is the detailed content of Automatically generate web page screenshots using the web page screenshot API interface. For more information, please follow other related articles on the PHP Chinese website!