During application development, we will encounter a variety of sharing scenarios, such as invite, pull new, share content, etc. Sharing link is a common form of sharing in the Web era, and it is relatively easy to implement. But now people spend most of their time on apps, so sharing between apps is becoming more and more important. However, sharing links between apps is not so smooth and effective. Often subject to the following constraints:

1. Pure text link, rely on text to convey information to the outside world, the amount of information is small, low credibility. There’s a link in the group, no description, and most people don’t click on it. Link descriptions are usually not too long or informative.

2. Share the target application’s out-link strategy. Taobao shopping links can not be shared to wechat, and marketing links are easy to be blocked by wechat, both of which are affected by wechat external chain strategy.

3. Restrictions on platform sharing mechanism. The forward function of applets allows users to share applets directly with their contacts, but not in moments. If the developer wants the user to be able to share the small program to the circle of friends, usually need to generate share poster pictures, share pictures to the circle of friends.

Therefore, in APP, H5, mini program and other applications, sharing functions, in addition to the realization of sharing links, also need to generate sharing posters and pictures to show richer content, a picture is worth a thousand words.

How to generate rich posters and pictures at low cost is the problem we want to solve.

Common Technical Solutions

According to the location of the image generation, the scheme can be divided into two types: client generation and server generation.

To generate a picture on the client side is to download all the elements in the picture to the local, and then use the drawing API to draw. A typical scheme is to use Canvas to draw pictures.

Generate pictures on the server side, and can be divided into two kinds, one is to use the drawing library on the server side to draw, and then return pictures or pictures link to the client side; The other is to use HTML + CSS to generate styled web pages on the server side, and then use a headless browser to take screenshots and return images or image links to the client side.

In short, the following three methods are commonly used:

1. Use Canvas to generate images on the client side

2. The style rendering is done using a web page on the server, and the screenshot is returned to the client

3. Draw using the back-end drawing library and return it to the client

The advantages and disadvantages of generating poster pictures are analyzed one by one.

The client uses Canvas to generate poster images

Advantages:

1. The rendering process is done in each client, rendering is relatively independent and there is almost no need to worry about concurrency.

2. Canvas features rich, can achieve complex style image rendering.

The disadvantages are also obvious:

1. The threshold to get started is high, and Canvas API needs to be used flexibly

2. The code readability is poor and the debugging process is complicated.

3. Low level of code reuse, each end needs to be re-coded. There are many client models, and the performance on the user’s device may differ from that on the development machine. Poor compatibility, which is the biggest pain point for client rendering.

4. If a remote image exists, it may fail to be downloaded due to cross-domain problems.

Recommended reading: Canvas poster drawing applet

Server headless browser, screenshot of web page

Use HTML + CSS to complete web page layout and content filling in the headless browser on the server, and then use the screenshot API provided by the headless browser to save the generated web page screenshot. Headless browsers are usually Puppeteer.

Puppeteer is a Node.js library developed by The Google team. Puppeteer provides apis to control the behavior of the browser, such as opening web pages, simulating input, clicking buttons, and taking screenshots. I’m going to use the screen capture function.

The pros and cons of this approach are also clear.

Advantages:

1. Easy to get started, just need to understand HTML, CSS can

2. The code is highly readable and easy to debug

3. Effective in HTML, CSS, strong expression. As long as it can be implemented on the web, it can be applied to poster images.

4. The image link is returned to the client, regardless of compatibility.

The biggest benefit of server-side image generation is multiterminal compatibility. But it also introduces the problem of high cost.

The backend requires a Node service to run Puppeteer to control a browser, which is low performance. A 4-core 16GB server generates images with a peak QPS of only 10-20, or 10 images per second in poor cases.

Recommended reading: Building a unified poster rendering service using Puppeteer

The server draws pictures from the library

In the server side, use the drawing library, draw the picture, and then save the picture to the CDN, and then return the picture link to the client. Common programming languages have drawing libraries, such as PHP’s GD library. This solution provides better performance than controlling browser screenshots and has the benefit of server-side rendering, but it is not as flexible as using CSS control styles.

Advantages:

1. High performance

2. The server architecture is unified, so developers do not have to maintain a separate Node.js service.

3. High code readability

Disadvantages:

1. Complex style, long development time, need fine tuning.
2. Adaptive layout is difficult.

Recommended reading: PHP using GD library synthesis with two-dimensional code poster steps and source code implementation

Above introduced three kinds of common schemes to generate shared poster pictures, understand the implementation principle. Developers need to implement these solutions independently, maintaining complex style code and maintaining a copy of style code for each new poster.

Poster is only a small part of the business, their own maintenance of a poster rendering service, the cost of paying is not proportional to the benefits. Therefore, we recommend using a third-party poster/image rendering service to complete the implementation of our idea.

Imgrender.cn dynamic image rendering service

Imgrender is a free image rendering service that quickly generates images of different content through an API that dynamically renders images according to configuration. The rendering template configuration is simple, especially suitable for applications with different sharing posters, fast and dynamic generation of sharing posters. Imgrender supports “text”, “Picture”, “QR code”, “rectangle” and “line segment”, which can meet the rendering requirements of most posters.

• 👏 free

• 📝 API is preferred

• 🛣 Dynamic rendering, content can be adjusted dynamically

• 🖥 is easy to configure and debug

• 📱 high compatibility, rendering results only depend on configuration

• ⚡️ is fast and stable with an average response time of 400ms

Imgrender has a single core API that delivers poster content and dynamically generates images of different content. The content of the poster is fully configured. After completing the design draft, the configuration can be generated according to the design size and position.

Use of the service is also very simple, only need to request a POST at https://api.imgrender.cn/open/v1/pics. Copy the following curl command to your terminal to get a link to your rendered poster image.

Curl command the Apikey is temporary and may fail. Replace it with imgrender- start debugging API_KEY.

curl -X "POST" "https://api.imgrender.cn/open/v1/pics" \ -H "Authorization: Apikey 183666749185461475.PLbfIpBpeMkpgbj1Tr+177Mv3Jo3wIIySyf8V5ZeDhs=" \ -H "Content-Type: application/json; charset=utf-8" \ -d '{ "width": 640, "height": 1050, "backgroundColor": "#d75650", "blocks":[ { "x": 15, "y": 268, "width": 610, "height": 770, "backgroundColor": "#fff", "borderColor": "#fff" } ], "texts":[ { "x": 320, "y": 185, "text": "Davinci Li", "font": "jiangxizhuokai", "fontSize": 22, "color": "#fff", "width": 320, "textAlign": "Center"}, {" x ": 320," y ": 220," text ", "invite you to participate in the lottery," "font" : "jiangxizhuokai", "fontSize" : 22, "color" : "# FFF", "width" : 320, "textAlign" : "center"}, {" x ": 30," y ": 640," text ", "the prize: Honda - CB650R motorcycle", "font" : "jiangxizhuokai", "fontSize": 22, "color": "#000", "width": 580, "textAlign": "left" }, { "x": 30, "y": 676, "text": Font: "JIANGxizhuokai ", "fontSize": 18, "color": "# 9a9a9A ", "width": 580, "textAlign": "Left"}, {"x": 320, "y": 960, "text": "Long press to identify the TWO-DIMENSIONAL code, participate in the lottery "," FONT ": "JIANGxizhuokai ", "fontSize": 22, "color": "#9a9a9a", "width": 580, "textAlign": "center" } ], "lines":[ { "startX": 30, "startY": 696, "endX": 610, "endY": 696, "width": 1, "color": "#E1E1E1", "zIndex": 1 } ], "images":[ { "x": 248, "y": 25, "width": 120, "height": 120, "url": "https://img-chengxiaoli-1253325493.cos.ap-beijing.myqcloud.com/bikers_327390-13.jpg", "borderRadius": 60, "zIndex": 1 }, { "x": 108, "y": 285, "width": 400, "height": 300, "url": "https://img-chengxiaoli-1253325493.cos.ap-beijing.myqcloud.com/cb650R.jpeg", "zIndex": 1 } ], "qrcodes":[ { "x": 208, "y": 726, "size": 200, "content": "http://weixin.qq.com/r/yRzk-JbEbMsTrdKf90nb", "foregroundColor": "#000", "backgroundColor": "#fff", "zIndex": 1 } ] }'Copy the code

Request to return:

{ "code":0, "message":"OK", "data":"https://davinci.imgrender.cn/c3037d467c163bd903760f96a34f3bcd.jpg?sign=1616722062-plQZQ4xtth9tEthx-0-2a98ba98e5f d44cc6dffb3aec6d3398f" }Copy the code

The data field is a dynamically rendered poster image link that can be saved by downloading or opening the link.

Imgrender.cn recommends the following best practices for using poster generation services:

All the poster configuration is managed on the server, which only needs to provide an API to the client. The client requests different share graphs through this API. After receiving the request, the server checks whether the server caches the share graph. If the image is not cached, the poster configuration is used to dynamically generate the poster to ImGrender, and the generated image link is returned to the client for the user to download and save.

Using imgrender.cn to render posters dynamically can greatly reduce development costs and improve multi-end compatibility while meeting your needs. Whether it’s developing a widget poster, or a poster in a native app, one set of code will do.

The original link: mp.weixin.qq.com/s/6ss1D4wne…

Keywords: poster, poster sharing, poster generation, image generation, small program poster generation