How We Built a Rich Cover Image Editor with 9‑Patch Rendering and Multi‑Platform Canvas

Background

The overall framework of the publisher solved business integration efficiency, but we still needed to address business effectiveness. Short‑video publishing performance is a current focus; compared with competitors like Kuaishou, Xiaohongshu, and Douyin, their cover images are richer. Therefore, we added image editing capabilities to support cover editing, unified multi‑platform protocols, and connected the material center for a single protocol across devices.

Not Just Copying Competitors

We studied Douyin and Kuaishou’s cover editing features and found them relatively simple, mainly offering decorative text and templates. We aim to provide richer capabilities with Taobao‑specific features to better serve our customers.

Competitor Analysis

Comparison of capabilities among Douyin, Kuaishou, and Taobao platforms.

Core Feature: Decorative Text

The challenge of decorative text lies in implementing a single protocol for multi‑platform rendering, considering differences between mobile and PC rendering, and enabling rapid expansion of new effects.

Challenge 1: 9‑Patch Images

What is a 9‑Patch image? Why is it difficult? A 9‑Patch image is a special style that keeps the key part unchanged when stretched. Mobile systems support 9‑Patch rendering, but PC requires a custom 9‑Patch rendering engine.

Ordinary images become distorted at corners when stretched. We need the corners to remain unchanged to meet visual requirements. Most 9‑Patch images focus on preserving corner areas, which can be defined using padding in four directions.

9‑Patch Implementation: Three Steps (Three Canvases)

Step 1: Crop Region (SourceCanvas crops the source image).

Step 2: Stretch Region (ScaleCanvas stretches or tiles a region).

Step 3: Merge Regions (TargetCanvas stitches processed regions together to produce the final image).

Stretching Block Deformation Issue

For some assets, stretchable blocks may contain patterns. We define a width‑height ratio; within that ratio we stretch, then concatenate two original images and stretch again, repeating the process. This also solves frame effects because a frame is essentially a transparent 9‑Patch block.

Challenge 2: Positioning and Linear Layout

We defined a positioning protocol with five binary directions (top, bottom, left, right, center). By bitwise operations we derive nine points for a 3×3 grid positioning. For linear layout, originally a mobile concept, we implemented both horizontal and vertical configurations on PC.

/* positioning protocol */
上：00001 (binary)
左：00010
下：00100
右：01000
中：10000
// After setting the five direction values, perform OR operations to combine them.
上左 = 上|左 = 00001 | 00010 = 00011 (decimal: 3)
上中 = 上|中 = 00001 | 10000 = 10001 (decimal: 17)
上右 = 上|右 = 00001 | 01000 = 01001 (decimal: 9)
左中 = 左|中 = 00010 | 10000 = 10010 (decimal: 18)
中 = 10000 (decimal: 16)
右中 = 右|中 = 01000 | 10000 = 11000 (decimal: 24)
下左 = 下|左 = 00100 | 00010 = 00110 (decimal: 6)
下中 = 下|中 = 00100 | 10000 = 10100 (decimal: 20)
下右 = 下|右 = 00100 | 01000 = 01100 (decimal: 12)

How to implement?

Initialize positions based on each image’s configuration. Merge decorative text elements into a single Group. Align all elements to the Group’s top‑left corner with no initial offset. Calculate the Group’s maximum width and height as OriginSize. For each element, apply offset; e.g., if positioning value is 17, its left should be (OriginSize.width - Self.width) / 2 . After initialization, record distances between sub‑elements and text; when text changes, reposition each sub‑element accordingly.

(In the illustration, the yellow texts “VLOG MY LIFE” and “HAVE A NICE DAY” are rendered as images with positioning values 17 and 20 respectively.)

In a linear layout with multiple decorative texts, vertical and horizontal offsets accumulate the widths and heights of preceding elements; when editing text, positions are recalculated based on the original layout and the text box’s size changes.

Future Development

Although the basic capability components are implemented, applying them to concrete business scenarios still has a long way to go. Moving from 0 to 1 is crucial, but creating real value starts from 1.

Because user devices vary, frequent Canvas drawing can cause performance burdens. We plan to use multiple Canvas layers for effects, managing each layer’s performance cost separately and merging them for export.

We aim to cover over 80% of requirements. Beyond decorative text, other effects lack rich material support and user configurability. We will first align with professional image‑editing competitors, then refine and optimize effects based on user feedback.