eo2suite Desktop Supports WPS Cell Image (DISPIMG) Formula Parsing

Background

Imagine you’re creating a spreadsheet and need to insert product images into certain cells. In Excel, you can only place images on the “top layer” of the spreadsheet, like sticking a sticker on the table. These images are independent, meaning they don’t move or copy along with the cells when you adjust them.

WPS creatively addresses this issue with the DISPIMG formula. This solution “embeds” the image into the cell, making it an integral part of the cell. As a result, no matter how you move or copy the cell, the image follows seamlessly.

Implementation Mechanism

WPS’s cell image feature is achieved through the collaboration of three key files:

1. Worksheet Reference (sheet1.xml) – The “Index Card” of Images

Think of searching for a book in a library by first checking the index card. The DISPIMG formula here acts as an index card, recording “which image to display in this cell.”

In the worksheet, the DISPIMG function is used to reference cell images:

<sheetData>
    <row r="1" ht="14.25">
        <c r="C1" t="str">
            <f>DISPIMG("ID_A16C8CE6E39B4F25934D584A1C41E1E1",1)</f>
            <v>=DISPIMG("ID_A16C8CE6E39B4F25934D584A1C41E1E1",1)</v>
        </c>
    </row>
</sheetData>

The DISPIMG function takes two parameters:

• The unique identifier (ID) of the image
• The display mode of the image

2. Image Definition (cellimages.xml) – The “Profile Card” of Images

Each image has a detailed “profile card” (stored in cellimages.xml), recording all important information about the image:

• The unique number of the image (like an ID number)
• The display method of the image (how to place it, size, etc.)
• Clues to the actual storage location of the image

Notably, WPS designed this “profile card” using the same standard format as Office documents (OOXML). This not only ensures that other software can understand this information but, more importantly, allows developers to reuse code logic for handling traditional Office floating images, significantly reducing redundant development work.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<etc:cellImages
    xmlns:xdr="http://schemas.openxmlformats.org/drawingml/2006/spreadsheetDrawing"
    xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"
    xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"
    xmlns:etc="http://www.wps.cn/officeDocument/2017/etCustomData">

    <etc:cellImage>
        <xdr:pic>
            <!-- 1. Image Identification Information -->
            <xdr:nvPicPr>
                <xdr:cNvPr id="1773908100" name="ID_A16C8CE6E39B4F25934D584A1C41E1E1"/>
                <xdr:cNvPicPr>
                    <a:picLocks noChangeAspect="1"/>
                </xdr:cNvPicPr>
            </xdr:nvPicPr>

            <!-- 2. Image Resource Reference -->
            <xdr:blipFill>
                <a:blip r:embed="rId1"/>
                <a:stretch/>
            </xdr:blipFill>

            <!-- 3. Image Display Properties -->
            <xdr:spPr bwMode="auto">
                <a:xfrm>
                    <a:off x="0" y="0"/>
                    <a:ext cx="59436000" cy="39623999"/>
                </a:xfrm>
                <a:prstGeom prst="rect">
                    <a:avLst/>
                </a:prstGeom>
            </xdr:spPr>
        </xdr:pic>
    </etc:cellImage>
</etc:cellImages>

3. Resource Mapping (_rels/cellimages.xml.rels)

Finally, a manifest (cellimages.xml.rels) is needed to record the actual storage location of each image, like a shelf list in a library, telling you exactly which shelf to find the book on.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
    <Relationship
        Id="rId1"
        Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/image"
        Target="media/image1.png"/>
    <Relationship
        Id="rId2"
        Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/image"
        Target="media/image2.png"/>
</Relationships>

Reference Chain Explanation

1. Worksheet to Image Definition Association

• The DISPIMG function in the worksheet references the image via the image ID
• The image ID corresponds to the name attribute of xdr:cNvPr in cellimages.xml
• This ensures each cell can accurately find its corresponding image definition

2. Image Definition to Actual Resource Association

• cellimages.xml references the image resource via the r:embed attribute
• The value of r:embed (e.g., “rId1”) corresponds to the Id in cellimages.xml.rels
• cellimages.xml.rels maps this Id to the actual image file path

3. Resource Storage Structure

xl/
├── _rels/
│   └── cellimages.xml.rels
├── media/
│   ├── image1.png
│   └── image2.png
└── worksheets/
    └── sheet1.xml
└── cellimages.xml

Why This Design?

The ingenuity of this design lies in:

1. Modularity: Each part has clear responsibilities, like the index system, archive system, and actual shelves in a library being managed separately. This facilitates maintenance and updates.
2. Standardization: Using the universal OOXML standard, like using a universal book classification system, ensures other software can also understand this information.
3. Flexibility: Images can easily move with cells, like books can be adjusted between shelves effortlessly, while the index system updates automatically.
4. Efficiency: Through IDs and reference relationships, the system can quickly locate the needed images, like a library’s coding system makes finding books simple and efficient.

This design makes the entire feature both practical and reliable, like a well-functioning library management system, with each part performing its role while cooperating closely.

Frontend Rendering Implementation

In the frontend implementation, special handling of the DISPIMG formula rendering logic is required:

1. Formula Identification

• In non-editing mode, first identify if the cell content is a DISPIMG formula
• Parse the formula parameters to get the image ID and display mode

1. Image Rendering

• Get the corresponding image resource based on the image ID
• Use the Canvas API for image drawing
• Use the canvas.clip() API to restrict the drawing area within the current cell, preventing images from overflowing into other cells
• Use the drawImage() API to draw the image onto the canvas

Example code:

function renderCellImage(ctx, cell, image) {
  // Save the current canvas state
  ctx.save();

  // Create a clipping path (restrict to cell bounds)
  ctx.beginPath();
  ctx.rect(cell.x, cell.y, cell.width, cell.height);
  ctx.clip();

  // Draw the image
  ctx.drawImage(image, cell.x, cell.y, cell.width, cell.height);

  // Restore the canvas state
  ctx.restore();
}

Conclusion

WPS’s cell image feature achieves image binding with cells through ingenious file organization and reference mechanisms. This implementation not only maintains compatibility with the standard Office Open XML but also provides flexible image management and display control capabilities. Understanding this implementation mechanism is of significant reference value for developing similar features or achieving file format compatibility.