compare plan
Presumably, many people will encounter a troublesome function when writing small programs - generating and sharing pictures of Moments. There are several commonly used schemes for generating pictures in the circle of friends :
- Use canvas to draw and generate
- Use the back-end drawing library to draw and return to the applet
- Use the server to open a browser for HTML rendering, and return the screenshot to the applet
The first solution: higher requirements, canvas and pure html layout are far away, the cost of zero-based learning is high , and the effect is unpredictable in different WeChat browsers. It is not easy to make beautiful and controllable generated images in a short time. easy. During the actual operation, I found a very troublesome thing: neither the network image nor the base64 image can be directly rendered and displayed in the canvas, and it must be downloaded and passed in first.
The second solution: The back-end library can fulfill relatively simple requirements, but the effects of font loading, shadows, rounded corners, transparency, etc. need to be fine-tuned. If the text needs to be truncated or dynamically stretched, it is not easy to handle. The image capture and scaling are also not flexible. Moreover, choosing this solution is equivalent to leaving the UI layout work to the back-end engineers to solve. This is not their area of expertise, and the effect may not be good.
The third solution: In terms of page drawing, pure front-end technology can be completed , with low difficulty and high degree of completion, but it is necessary to start a node service in the back end to open puppeteer to control the server-side Chrome browser. The disadvantage of this solution is that the cost is too high . We have measured it with our peers in the industry, and the results are similar: the QPS of pictures generated by a 4-core 16G server is only about 10-20, which is equivalent to only 10 pictures can be generated in one second. , which cannot meet the sudden demand for a large number of sharing, and the server with this configuration cannot deploy other services, and only running this service will use up most of the resources.
background
The first version of our project adopted the first solution—canvas drawing. Not to mention the high learning cost, and there was a compatibility problem when it was published online. Therefore, when developing the second edition, I considered finding a plugin written by someone else. On GitHub, I found an open source project painter of the mp-vue framework. If your project is built with mp-vue, you can give it a try. But our applet uses uniapp, because we didn't know how to introduce mp-vue components in uniapp, we gave up this solution. After looking for it again, in the DCloud plug-in market, I finally found it - Poster Artboard . This plugin is very quick to use, and I will write down the steps from the very beginning to the use of it.
How to use poster board
- import plugin
- After importing the plugin, it will be imported under the uni_modules directory of your project file, and you can import it directly where you need it.
3. The specific usage of the plug-in will not be repeated here .
Attachment: (If you draw a poster in base64 format, you need to convert it to a local temporary image)
dealBase64(imageData) {
return new Promise((reslove, reject) => {
// 如果图片字符串不含要清空的前缀,可以不执行下行代码.
// var imageData = base64.replace(/^data:image\/\w+;base64,/, "");
// 声明文件系统
const fs = uni.getFileSystemManager();
// 随机定义路径名称
var times = new Date().getTime();
var codeimg = wx.env.USER_DATA_PATH + '/share' + times + '.png';
// 将base64图片写入
var that = this;
fs.writeFile({
filePath: codeimg,
data: imageData,
encoding: 'base64',
success: (res) => {
// 写入成功了的话，新的图片路径就能用了
reslove(codeimg);
}
});
})
}
复制代码