Functional description

  • Need front-end drawing picture + text export;
  • Text editable, font only TTF;
  • You can export images to oss;

Jane version requirements

  • Forget the font, it’s pretty easy to do,load the image onto the canvas, and draw the text in the callback;

  • Text can be edited: clearRect => drawImg => drawText;

    • This can be tweaked slightly:
    • Image and text are used as one layer respectively, so you can draw the text layer without waiting for the image to load. When redrawing the text, you only need to redraw the text part.

  • When you need to export, call canvas toDataURL to export BASE64 data;

    • Due to data transfer costs, images should not be exported on the front end, so the final solution is:
    • The front end does a drawing for preview effect, the configuration file is sent synchronously to the background for the server to generate and store oss, and then returned to the front end is only a URL;

Complete function

  • Since the font is only TTF, the original consideration is to batch generate the corresponding WOFF font file for each batch of text input;

  • However, there will be too many temporary fonts, so continue to use the server to export images, then need to add the font function:

  • The compositing service is implemented using Node-Canvas;

  • This library can call the local TTF font to render text, so the above problem is easy to solve;

  • The current flow is as follows:

    • Use the text configuration information to call the text to picture service to generate the font picture;
    • Draw the front end to the text layer, which is actually an Image layer.

Process design

  • Generate complete graphic information

    • Obtain the configuration file, preload the font file according to the text information in the configuration file, and save the font file to the local PC.
    • Get the image from the network, transfer to Base64 and start drawing
    • Use Base64 data to draw the background, read the font locally to draw the text, export the picture

  • Generate text picture service

    • Download it locally from the Web font, then invoke the text rendering service to generate base64 data

  • To optimize the

    • The downloaded font file will contain arbitrary text, so it will be large and marked with the font name
    • Before downloading, match the font name and local file in the parameters, if the corresponding, no longer download, ignore the font name cheating behavior
    • If font name spoofing occurs, it will cause all corresponding fonts cannot be used normally, add an interface to delete the specified font

The problem record

There are always problems with doing this, especially in unfamiliar situations (some of the problems are trivial)

  1. The text is a string array, there are multiple text to convert, how to ensure that the font and picture download complete?

    • Use promise.all to download images in parallel and proceed to the next step after all are returned (some failures are not processed)

  2. How to download pictures (simple question)

    • Github found base64-img, which is not a star, but it is really convenient for novicers.
    import base64Img from "base64-img";
    base64Img.requestBase64(url, function (err, res, body) {
            if (err) {
                reject(err);
            } else{ resolve(body); }});Copy the code

  1. Do you have any problems with drawing text pictures

    • It does. Canvas text has offsets
    • Stackoverflow found several errors in calculating the offset
    • I used PS to test the pictures drawn by various sizes, but I did not find the general offset and proportion
    • Researching font rendering on your own is obviously a lot of work, and there’s not that much time to get stuck on a problem for too long
    • The library node-canvas-text was found

  2. What else are you having problems with?

    • There is a library that needs to use ES6 export default,require can not obtain, temporarily change the export mode, online always cannot change;

    • Just changed all the code to ES6(crap level) and then more problems….

    • All was well with the local tests, but the server had to be on Linux, so Vagrant tested it and it didn’t work;

    • Warning:

      • fs: re-evaluating native module sources is not supported.
      • if you are using the graceful-fs module, please update it to a more recent version.

    • It has nothing to do with this,Y just doesn’t support Linux

    • Not find Promise Module (!!!!

    • !!!!! ? Then I remembered that ES6 itself had this guy, and I named it again, Promise

    • Delete later as expected OK!!

ps

  • Don’t forget Google and Github when you encounter the features you need. If you have good quality, don’t always think about your own work, and focus on the period you have to do.
  • If you have any questions, welcome to StackOverflow. It’s a good site.

This article was published on my blog on August 12, 2016 using the article Synchronization Assistant