Go语言CBZ图片拼接后仅显示首张的问题排查

问题背景 #

尝试读取.cbz漫画文件中的图片，合并为单个字节数组后作为单张图片在Web应用返回。测试时通过压缩.jpg文件并修改扩展名生成.cbz文件。现有Go代码合并后返回的文件大小约为所有图片总和，但访问localhost:8080/rendercbz时仅显示首张图片。因图片过大，使用jpeg.Encode会报错“jpeg: image is too large to encode”，单页选择功能已实现，需排查该问题。

当前代码 #

package main

import (
    "archive/zip"
    "fmt"
    "io"
    "log"
    "net/http"
    "os"
    "path/filepath"
)

func main() {
    http.HandleFunc("/rendercbz", handleRenderCBZ)
    log.Fatal(http.ListenAndServe(":8080", nil))
}

func handleRenderCBZ(w http.ResponseWriter, r *http.Request) {
    // Example path to .cbz file on the server filesystem
    filePath := "/home/my-home-dir/my-comic-book.cbz"

    // Open .cbz file from the filesystem
    file, err := os.Open(filePath)
    if err != nil {
        http.Error(w, fmt.Sprintf("Failed to open file: %v", err), http.StatusInternalServerError)
        return
    }
    defer file.Close()

    // Combine images from .cbz file into a single JPEG byte slice
    combinedData, err := combineImagesFromCBZ(file)
    if err != nil {
        http.Error(w, fmt.Sprintf("Failed to combine images from CBZ: %v", err), http.StatusInternalServerError)
        return
    }

    // Serve the combined image as response
    w.Header().Set("Content-Type", "image/jpeg")
    if _, err := w.Write(combinedData); err != nil {
        http.Error(w, fmt.Sprintf("Failed to write image response: %v", err), http.StatusInternalServerError)
        return
    }
}

func combineImagesFromCBZ(file *os.File) ([]byte, error) {
    var combinedData []byte
    var imageCount int

    // Get file info to determine file size
    fileInfo, err := file.Stat()
    if err != nil {
        return nil, fmt.Errorf("failed to get file info: %v", err)
    }

    // Create a zip.Reader from the file
    reader, err := zip.NewReader(file, fileInfo.Size())
    if err != nil {
        return nil, fmt.Errorf("failed to create zip reader: %v", err)
    }

    // Iterate through each file in the .cbz archive
    for _, zipFile := range reader.File {
        // Log which image is being processed
        log.Printf("Processing image: %s", zipFile.Name)

        // Skip files named "thumbnail.jpg" and non-image files
        if filepath.Base(zipFile.Name) == "thumbnail.jpg" {
            log.Printf("Skipping thumbnail file: %s", zipFile.Name)
            continue
        }
        ext := filepath.Ext(zipFile.Name)
        if ext != ".jpg" && ext != ".jpeg" && ext != ".png" && ext != ".gif" {
            log.Printf("Skipping non-image file: %s", zipFile.Name)
            continue
        }

        // Open each image file in the .cbz archive
        rc, err := zipFile.Open()
        if err != nil {
            log.Printf("Failed to open file in CBZ archive: %v", err)
            continue
        }

        // Read image file data
        fileData, err := io.ReadAll(rc)
        rc.Close()
        if err != nil {
            log.Printf("Failed to read file %s: %v", zipFile.Name)
            continue
        }

        // Validate that the image ends with 0xff, 0xd9
        if len(fileData) >= 2 && fileData[len(fileData)-2] == 0xff && fileData[len(fileData)-1] == 0xd9 {
            // Append image file data to combinedData
            combinedData = append(combinedData, fileData...)
            imageCount++
        } else {
            log.Printf("Invalid image ending for file: %s", zipFile.Name)
        }
    }

    // Append a single EOF marker to the end of combinedData
    combinedData = append(combinedData, []byte{0xff, 0xd9}...)

    // Log the final size of combinedData and the number of valid images found
    log.Printf("Final combinedData size = %d", len(combinedData))
    log.Printf("Number of valid images found: %d", imageCount)

    // Check if we have any data
    if len(combinedData) == 0 {
        return nil, fmt.Errorf("no valid image data found in CBZ file")
    }

    return combinedData, nil
}

控制台日志 #

> go run main.go
2024/07/10 07:33:44 Processing image: 01.jpg
2024/07/10 07:33:44 Processing image: 02.jpg
2024/07/10 07:33:44 Processing image: 03.jpg
2024/07/10 07:33:44 Processing image: 04.jpg
2024/07/10 07:33:44 Processing image: 05.jpg
2024/07/10 07:33:45 Processing image: 06.jpg
2024/07/10 07:33:45 Processing image: 07.jpg
2024/07/10 07:33:45 Processing image: 08.jpg
2024/07/10 07:33:45 Processing image: 09.jpg
2024/07/10 07:33:45 Processing image: 10.jpg
2024/07/10 07:33:45 Processing image: 11.jpg
2024/07/10 07:33:45 Processing image: ComicInfo.xml
2024/07/10 07:33:45 Skipping non-image file: ComicInfo.xml
2024/07/10 07:33:45 Processing image: thumbnail.jpg
2024/07/10 07:33:45 Skipping thumbnail file: thumbnail.jpg
2024/07/10 07:33:45 Final combinedData size = 35750599
2024/07/10 07:33:45 Number of valid images found: 11

对比数据 #

• 原首张图片大小：5.01 MB
• 接口返回图片大小：34.0 MB（约为所有图片总和）

问题根源 #

直接拼接多张JPEG的字节数据是错误操作：JPEG是单图像容器格式，浏览器或图像解析器读取到第一个JPEG的EOF标记（0xff 0xd9）后就会停止解析，后续字节会被完全忽略，因此仅显示第一张图片。当前代码只是将多个独立JPEG文件的二进制内容简单拼接，并未生成合法的单张图像文件。

可行解决方案 #

方案1：生成竖排长图（规避官方JPEG编码大小限制） #

若需生成真正的单张长图，官方image/jpeg包的Encode方法存在尺寸上限，可使用支持大尺寸编码的第三方图像处理库实现：

1. 遍历CBZ中的所有图片，解码为image.Image对象
2. 计算所有图片的总高度（宽度可统一为第一张图片的宽度，或按需缩放）
3. 创建足够大的新画布，按顺序将每张图片绘制到画布上
4. 使用第三方库编码为JPEG格式返回

关键代码片段：

import (
    "bytes"
    "image"
    "image/color"
    "github.com/disintegration/imaging"
)

func combineImagesFromCBZ(file *os.File) ([]byte, error) {
    fileInfo, err := file.Stat()
    if err != nil {
        return nil, fmt.Errorf("failed to get file info: %v", err)
    }
    reader, err := zip.NewReader(file, fileInfo.Size())
    if err != nil {
        return nil, fmt.Errorf("failed to create zip reader: %v", err)
    }

    var images []image.Image
    totalHeight := 0
    targetWidth := 0

    // 解码所有图片并计算总高度
    for _, zipFile := range reader.File {
        if filepath.Base(zipFile.Name) == "thumbnail.jpg" {
            continue
        }
        ext := filepath.Ext(zipFile.Name)
        if ext != ".jpg" && ext != ".jpeg" && ext != ".png" && ext != ".gif" {
            continue
        }

        rc, err := zipFile.Open()
        if err != nil {
            log.Printf("Failed to open file: %v", err)
            continue
        }
        img, _, err := image.Decode(rc)
        rc.Close()
        if err != nil {
            log.Printf("Failed to decode image: %v", err)
            continue
        }
        images = append(images, img)
        if targetWidth == 0 {
            targetWidth = img.Bounds().Dx()
        }
        totalHeight += img.Bounds().Dy()
    }

    if len(images) == 0 {
        return nil, fmt.Errorf("no valid images found")
    }

    // 创建长图画布
    canvas := imaging.New(targetWidth, totalHeight, color.White)
    currentY := 0
    for _, img := range images {
        // 若图片宽度不一致，缩放至目标宽度
        resizedImg := imaging.Resize(img, targetWidth, 0, imaging.Lanczos)
        canvas = imaging.Paste(canvas, resizedImg, image.Pt(0, currentY))
        currentY += resizedImg.Bounds().Dy()
    }

    // 编码为JPEG
    buf := new(bytes.Buffer)
    err := imaging.Encode(buf, canvas, imaging.JPEG, imaging.JPEGQuality(80))
    if err != nil {
        return nil, fmt.Errorf("failed to encode long image: %v", err)
    }

    return buf.Bytes(), nil
}

方案2：返回多页TIFF格式 #

TIFF格式原生支持多页图像，部分浏览器可直接预览，也可让用户下载后查看，无需拼接像素：

1. 遍历CBZ中的图片，读取字节数据并解码为image.Image
2. 创建TIFF编码器，依次将每张图片写入编码器
3. 返回TIFF格式的字节数据

方案3：改用HTML拼接图片（前端展示） #

放弃返回单张图片，改为返回HTML页面，用<img>标签依次加载每张图片，既无编码大小限制，还能支持分页、缩放等交互：

import (
    "encoding/base64"
    "fmt"
    "io"
    "log"
    "net/http"
    "os"
    "path/filepath"
    "archive/zip"
)

func handleRenderCBZ(w http.ResponseWriter, r *http.Request) {
    filePath := "/home/my-home-dir/my-comic-book.cbz"
    file, err := os.Open(filePath)
    if err != nil {
        http.Error(w, fmt.Sprintf("Failed to open file: %v", err), http.StatusInternalServerError)
        return
    }
    defer file.Close()

    fileInfo, _ := file.Stat()
    reader, _ := zip.NewReader(file, fileInfo.Size())

    var imageDatas [][]byte
    for _, zipFile := range reader.File {
        if filepath.Base(zipFile.Name) == "thumbnail.jpg" {
            continue
        }
        ext := filepath.Ext(zipFile.Name)
        if ext != ".jpg" && ext != ".jpeg" && ext != ".png" && ext != ".gif" {
            continue
        }

        rc, err := zipFile.Open()
        if err != nil { continue }
        data, _ := io.ReadAll(rc)
        rc.Close()
        imageDatas = append(imageDatas, data)
    }

    w.Header().Set("Content-Type", "text/html")
    fmt.Fprint(w, "<html><body style='max-width: 1200px; margin: 0 auto;'>")
    for _, data := range imageDatas {
        b64 := base64.StdEncoding.EncodeToString(data)
        fmt.Fprintf(w, `<img src="data:image/jpeg;base64,%s" style="width: 100%%; margin: 1rem 0;" />`, b64)
    }
    fmt.Fprint(w, "</body></html>")
}

总结 #

当前代码的核心错误是将多个独立JPEG文件的二进制内容简单拼接，不符合任何图像格式规范，导致解析器仅识别第一张图片。根据需求选择合适方案：

• 需单张长图：使用第三方图像处理库生成
• 需保留多页结构：返回TIFF格式
• 需更好交互：用HTML前端展示图片

内容的提问来源于stack exchange，提问作者A. B.