Project introduction

I developed a service that uses SVG elements as posters.

The general business logic is that users upload pictures as materials, and add some artistic text as materials;

Support the 2D transformation of each material, finally the whole export a picture of the project;

At present, the best competitive product on the market is the draft design;

Effect reference:

The conversion process

  • Get SVG DOM content using jQuery
  • Pass the SVG content and text information for each asset to the back end
  • Back-end Java uses phantomJS-wrapped libraries to convert SVG to images

Package defects

  • The PhantomJS kernel is a bit behind The Times, resulting in inconsistencies between the user’s chrome preview and actual rendering
  • It takes a long time. Each image conversion process involves opening the Chrome instance, opening the TAB page, converting the image, and closing the browser
  • The back end knows very little about PhantomJS and can only call the front end when something goes wrong
  • Third party libraries are not open source, there is no way to extend them, and there is no way to fix these problems

Optimization scheme

  • Puppeteer was used briefly when puppeteer was first released. This package is very up-to-date on the Chromium version. Consider using this to refactor the backend.
  • The new scheme mainly solves the problem of inconsistent rendering effect and slow rendering;

New problems

  • The new scheme causes multiple tasks to be queued in temporary queues when they come in
  • Temporary queues can cause job loss when an EGG instance dies and need to be optimized later

The follow-up to optimize

  • Understand the common backend schemes: Kafka message queue, mysql database, Redis cache
  • Finally, I chose to implement it based on Redis, and found a simple and easy to use open source solution: Bull on Github
  • After the final adjustment, the task processing process is as follows:

Link to the reference

  • The Puppeteer warehouse
  • Puppeteer In Chinese
  • Bull warehouse

This article was published on my blog on 2020-01-04 using the post Sync Assistant