I did a couple of them on mobilecavnasThe need to generate posters, found that either the plug-in is not good enough or their own handwritten code to drawcavansVery troublesome, so take time to focus on this function.

List of features that need to be implemented

  1. Compatible with mainstream mobile platforms: H5 and wechat applets
  2. Like to writeCSSWrite the same style for the poster.
  3. Basic three kinds of geometry drawing: box (including border), picture, text; With these three basic geometric shapes, you can pretty much fit your everyday poster style.

Take a look at the final preview effect cavNAS – generated posters

The implementation process

The first point is very easy to solve, because it is mobile, so you can use uni-app directly. As for canvas API, it behaves differently on different platforms, which has been solved here, such as canvasContext.draw: The H5 native getContext(“2d”) gets the context by using context.save() and context.restore() to continue drawing the next image, but uni-app needs to add context.draw(true) to the native context. Otherwise, there will be very strange view problems. Other drawing order and call methods such as context.fill() and context.clip() are not consistent with the native Canvas API of the web page. I will not go into details because it has been dealt with.

Configure style parameter passing

Secondly, I hope that when I call this tool, I don’t need to remember some JS API for view operation, but like CSS to set the width, font size, border-radius, z-index and other common properties, compared to JS-API, CSS style is easy to see at a glance. Next we need to declare the CSS style types of the three geometries with TS. Here the code hints and constraints are obvious.

// Plain box
type CavansBox = {
    type: "box"
    /** Container background color */
    backgroundColor: string
    /** The width of the generated image */
    width: number
    /** The height of the generated image */
    height: number
    /** * border rounded *@description When 'width===height', setting 'borderRadius = width/2' or 'borderRadius =height /2' becomes a circle */borderRadius? :number
    /** Frame thickness */borderWidth? :number
    /** Border color */borderColor? :string
}

/ / text
type CavansText = {
    type: "text"
    /** Text content */
    text: string
    /** Font size */
    fontSize: number
    /** Font color */
    color: string
    // ** Specifies the width of the font, exceeding which will be squeezed */
    // width? : number
    // /** the behavior of 'CSS' is the same as' font-family '*/
    // fontFamily? : string
    / * * * with ` CSS ` ` text - align ` behavior consistent * - the default ` "left" ` * reference [] (HTTP: / / https://uniapp.dcloud.io/api/canvas/CanvasContext? id=canvascontextsettextalign) */textAlign? :"left"|"center"|"right"
    / * * * is used to set the level of the text alignment * - the default: ` normal ` * - reference [] (HTTP: / / https://uniapp.dcloud.io/api/canvas/CanvasContext? id=canvascontextsettextbaseline) */textBaseline? :"top" | "bottom" | "middle" | "normal"
}

/ / picture
type CavansImg = {
    type: "img"
    /** * - Network image address, if the image can be cross-domain request, wechat applet side needs to configure 'request' domain name whitelist * - (H5 end only) local relative path address * - (H5 end only) 'base64' image encoding, for example: data:image/jpge; base64,xxxxxxxx */
    src: string
    /** The width of the generated image */
    width: number
    /** The height of the generated image */
    height: number
    /** * border rounded *@description When 'width===height', setting 'borderRadius = width/2' or 'borderRadius =height /2' becomes a circle */borderRadius? :number
}

/** Generator parameter type */
interface CavansCreaterParams {
    /** * 'cavans' node' id '*@example
     * ```html
     * <cavans id="xxx" canvas-id="xxx"></cavans>
     * ```
    */
    cavansId: string
    /** 'cavans' width */
    width: number
    /** 'cavans' overall height */
    height: number
    /** Generated content list */
    list: Array<CavansImg | CavansBox | CavansText>
    /** * Generated image type * - default '" PNG "' */fileType? :"jpg"|"png"
    /** Successful callback */success? :(res: UniApp.CanvasToTempFilePathRes) = > void
    /** Failed to load image callback */fail? :(error: CavansFail) = > void
}

Copy the code

Finally, let’s see what it looks like

cavansCreater({
    cavansId: "the-cavans".width: 300.height: 500
    list: [{type: "box".width: 40.height: 40.backgroundColor: "#07c160".borderRadius: 1000.borderColor: "orange".borderWidth: 10.left: 20.top: 20.zIndex: 10}, {type: "box".width: 40.height: 40.backgroundColor: "#07c160".borderRadius: 1000.borderColor: "orange".borderWidth: 10.right: 20.top: 20.zIndex: 10}, {type: "box".width: 40.height: 40.backgroundColor: "orange".borderRadius: 1000.borderColor: "#07c160".borderWidth: 10.left: 20.bottom: 20.zIndex: 10}, {type: "box".width: 40.height: 40.backgroundColor: "orange".borderRadius: 1000.borderColor: "#07c160".borderWidth: 10.right: 20.bottom: 20.zIndex: 10}, {type: "box".width: 300.height: 500.backgroundColor: "#eee".borderRadius: 60
        },
        {
            type: "img".src: "https://muse-ui.org/img/img3.6e264e66.png".// src: ".. /static/logo.png",
            width: 300.height: 217.// borderRadius: 100
        },
        {
            type: "img".src: "https://game.gtimg.cn/images/lol/act/img/champion/Talon.png".// src: ".. /static/logo.png",
            width: 60.height: 60.borderRadius: 10.bottom: 50.left: 50.// zIndex: 12
        },
        {
            type: "img".src: "https://game.gtimg.cn/images/lol/act/img/champion/Zed.png".// src: ".. /static/logo.png",
            width: 60.height: 60.borderRadius: 50.bottom: 50.right: 50.// zIndex: 12
        },
        {
            type: "text".text: "Right-aligned text".color: "green".textAlign: "right".fontSize: 16.top: this.cavansSize.height / 2.right: 10.zIndex: 20}, {type: "text".text: "Bottom centered in Chinese".fontSize: 16.color: "orange".textAlign: "center".textBaseline: "middle".bottom: 20.left: this.cavansSize.width / 2}].success: (res) = > {
        console.log("Generated image information >>", res);
    },
    fail(err) {
        console.log("Error Message >>", err); }});Copy the code

Basic geometry drawing

Code snippet

Configure the parameter field, the last step is to achieve the drawing; No code here, just ideas:

  1. The first step is to get the configuration list in the methodlistAfter, according to firstzIndexTo sort it once, so that you realize the concept of hierarchy;
  2. Then it is to draw three kinds of geometric graphics, respectively encapsulated into three methods, and then the array traversal one by one to draw it out, and finally generate local path export can be;

Like ordinary boxes need rounded corners and borders will be cut out by the calculation of trigonometric functions, the calculation of coordinates and other methods are not expanded in detail, because they are more streamlined, there is nothing to say, see the specific code.

Need to mention is: wechat small program, picture loading and H5 picture loading is different, so this problem is also groped for a lot of time, so the code conditional compilation of two ways to deal with the picture, when setting up the picture, pay attention to see the code prompt notes, the problem is not big