在p5.js中使用graphics对象调用saveGif失败求助

问题背景 #

需要在纯p5.js环境下（不依赖外部库或服务端）将一系列图片保存为GIF，主画布调用saveGif可正常工作，但使用createGraphics创建的graphics对象时程序崩溃，疑惑是否需要使用实例模式。

现有实现代码 #

function setup() {
    createCanvas(400, 400); // Set up a canvas
    // Example images to simulate Frame.frames
    let exampleFrames = [
        'path/to/image1.jpg',
        'path/to/image2.jpg',
        'path/to/image3.jpg'
    ];

    select("#saveGifButton").mouseClicked(function() {
        createGIF(exampleFrames);
    });
}

function createGIF(framePaths) {
    var images = [];
    var sumWidth = 0;
    var sumHeight = 0;

    // Load images and calculate dimensions
    for (var i = 0; i < framePaths.length; i++) {
        images[i] = loadImage(framePaths[i], img => {
            sumWidth += img.width;
            sumHeight += img.height;
        });
    }

    var picWidth = sumWidth / framePaths.length;
    var picHeight = sumHeight / framePaths.length;
    var tempGraphics = createGraphics(picWidth, picHeight);


    tempGraphics.saveGif("MyGif", images.length, {
                'units': 'frames'
            });
    for (var i = 0; i < framePaths.length; i++) {
        tempGraphics.clear();
        tempGraphics.image(images[i], 0, 0, picWidth, picHeight);
    }

    
    tempGraphics.remove();
}

报错信息 #

🌸 p5.js says: [p5.js, line 74975] 

Cannot read property of undefined. Check the line number in error and make sure the variable which is being operated is not undefined.

p5.js:59804 ┌[http://127.0.0.1:5500/lib/p5.js:74975:27] 
     Error at line 74975 in addElement()
└[http://127.0.0.1:5500/lib/p5.js:75050:18] 
     Called from line 75050 in _main.default.createP()
└[http://127.0.0.1:5500/lib/p5.js:84471:32] 
     Called from line 84471 in _class._callee$()
└[http://127.0.0.1:5500/lib/p5.js:50400:25] 
     Called from line 50400 in tryCatch()
└[http://127.0.0.1:5500/lib/p5.js:50594:30] 
     Called from line 50594 in Generator.invoke [as _invoke]()
└[http://127.0.0.1:5500/lib/p5.js:50454:29] 
     Called from line 50454 in prototype.<computed> [as next]()
└[http://127.0.0.1:5500/lib/p5.js:84122:32] 
     Called from line 84122 in asyncGeneratorStep()
└[http://127.0.0.1:5500/lib/p5.js:84141:17] 
     Called from line 84141 in _next()
└[http://127.0.0.1:5500/lib/p5.js:84146:15] 
     Called from line 84146 in ()

问题分析 #

1. 异步加载未处理：loadImage是异步操作，循环结束时图片尚未加载完成，导致sumWidth和sumHeight仍为0，创建的graphics对象尺寸无效。
2. graphics对象不支持saveGif：p5.js的saveGifAPI主要设计用于主画布，graphics对象缺少DOM上下文，内部调用createP等DOM操作时会因找不到实例上下文而报错。
3. 录制顺序逻辑隐患：即使graphics对象支持，当前先调用saveGif再绘制帧的逻辑，也会因尺寸无效和上下文缺失导致失败。

可行解决方案 #

方案1：改用主画布完成GIF录制（推荐） #

临时调整主画布尺寸，完成录制后恢复原尺寸，规避graphics对象的上下文问题：

function setup() {
    createCanvas(400, 400);
    let exampleFrames = [
        'path/to/image1.jpg',
        'path/to/image2.jpg',
        'path/to/image3.jpg'
    ];

    select("#saveGifButton").mouseClicked(() => {
        loadAllImages(exampleFrames, (loadedImages) => {
            createGIFWithMainCanvas(loadedImages);
        });
    });
}

// 等待所有图片加载完成的工具函数
function loadAllImages(paths, callback) {
    let loaded = [];
    let count = 0;
    paths.forEach(path => {
        loadImage(path, img => {
            loaded.push(img);
            count++;
            if (count === paths.length) {
                callback(loaded);
            }
        });
    });
}

function createGIFWithMainCanvas(images) {
    // 计算平均尺寸
    const avgWidth = images.reduce((sum, img) => sum + img.width, 0) / images.length;
    const avgHeight = images.reduce((sum, img) => sum + img.height, 0) / images.length;
    
    // 保存原画布尺寸
    const originalWidth = width;
    const originalHeight = height;
    
    // 临时调整画布尺寸
    resizeCanvas(avgWidth, avgHeight);
    
    // 开始录制GIF
    saveGif("MyGif", images.length, { units: 'frames' });
    
    // 绘制每帧
    images.forEach(img => {
        background(255); // 清除画布，可按需调整
        image(img, 0, 0, avgWidth, avgHeight);
    });
    
    // 延迟恢复原画布尺寸，确保GIF录制完成
    setTimeout(() => {
        resizeCanvas(originalWidth, originalHeight);
        background(255); // 重置主画布显示
    }, 1000);
}

方案2：使用p5实例模式（可选） #

实例模式可明确上下文，但核心仍需使用实例的主画布而非graphics对象：

let sketch = function(p) {
    let exampleFrames = [
        'path/to/image1.jpg',
        'path/to/image2.jpg',
        'path/to/image3.jpg'
    ];

    p.setup = function() {
        p.createCanvas(400, 400);
        p.select("#saveGifButton").mouseClicked(() => {
            loadAllImages(exampleFrames, (loadedImages) => {
                createGIFWithInstance(p, loadedImages);
            });
        });
    };

    function loadAllImages(paths, callback) {
        let loaded = [];
        let count = 0;
        paths.forEach(path => {
            p.loadImage(path, img => {
                loaded.push(img);
                count++;
                if (count === paths.length) {
                    callback(loaded);
                }
            });
        });
    }

    function createGIFWithInstance(p, images) {
        const avgWidth = images.reduce((sum, img) => sum + img.width, 0) / images.length;
        const avgHeight = images.reduce((sum, img) => sum + img.height, 0) / images.length;
        const originalWidth = p.width;
        const originalHeight = p.height;

        p.resizeCanvas(avgWidth, avgHeight);
        p.saveGif("MyGif", images.length, { units: 'frames' });

        images.forEach(img => {
            p.background(255);
            p.image(img, 0, 0, avgWidth, avgHeight);
        });

        setTimeout(() => {
            p.resizeCanvas(originalWidth, originalHeight);
            p.background(255);
        }, 1000);
    }
};

new p5(sketch);

关键注意事项 #

• 必须确保所有图片加载完成后再启动GIF录制，避免因未加载图片导致尺寸错误或绘制失败。
• saveGif是异步操作，恢复画布尺寸时需添加延迟，确保录制流程完全结束。
• 若需隐藏录制过程的画面，可通过CSS设置主画布为visibility: hidden，录制完成后再恢复显示。

内容的提问来源于stack exchange，提问作者calebhk98