如何在p5.js中正确转换图片并附加到Canvas？多段加载异常解决

我正在开发一个鞋模Canvas绘制项目，将鞋模分为6个可点击分段，支持通过颜色替换生成新图片并更新对应分段。当前问题：仅2个分段可见时功能正常，5-6个分段时出现卡顿，且p5.loadImage无法正常加载图片。

相关变量定义 #

// 初始化相关变量
let initializeDrawingsCalled = false;
let segmentToInitialize = null;
let initializationDelayCounter = 0;
const INITIALIZATION_DELAY_FRAMES = 4;

// 图片与分段相关变量
let img = {
    tongue: null,
    // 其他属性
};

let segmentTextureMask = {
    tongue: null,
    // 其他属性
}

let createMask = {
    tongue: null,
    // 其他属性
}

var initVariables = {
    // 选中的分段
    selectedSegment: null,
    // 各分段的加载状态
    loading: {
        TONGUE: false,
        // 其他状态
    },
};

sketch函数实现 #

export const shoeSketch = (p5Instance) => {
    p5 = p5Instance;
    // 初始加载白色基础图片
    p5.preload = () => {
        const baseUrl = '/img/white.png';
        img.collarSide = p5.loadImage(baseUrl);
        img.collarFront = p5.loadImage(baseUrl);
        img.heelSide = p5.loadImage(baseUrl);
        img.sidePanel = p5.loadImage(baseUrl);
        img.sideCap = p5.loadImage(baseUrl);
        img.tongue = p5.loadImage(baseUrl);
    }

   p5.setup = () => {
        // 加载鞋模的辅助函数
        createMeasurementSet();
        createCps();

        p5.createCanvas(1300, 500, p5.WEBGL);
    };

    p5.draw = () => {
        p5.background(initVariables.lightGrey);
        // 更新控制点，需耗时完成
        updateCPs(); 

        // 通过计数器延迟初始化绘图
        if (!initializeDrawingsCalled) {
            initializationDelayCounter++;
            if (initializationDelayCounter > INITIALIZATION_DELAY_FRAMES) {
                initializeDrawings();
                initializeDrawingsCalled = true;
            }
        }
    }
}

核心修改函数代码 #

export const changeSegmentImage = async (imageUrl, colors) => {
    try {
        // 验证imageUrl
        if (!imageUrl) throw new Error("Invalid image URL");
        initVariables.loading[initVariables.selectedSegment] = true;

        // 将imageUrl转换为文件
        const file = await imageUrlToFile(imageUrl);

        // 替换文件中的颜色
        const converted_file = await replaceColors(file, colors);

        // 为转换后的文件创建URL
        const uri = URL.createObjectURL(converted_file); // 生成的图片正常

        // 根据选中的分段加载图片
        // 问题出在loadImage函数
        switch (initVariables.selectedSegment) {
            case 'COLLARSIDE':
                img.collarSide = p5.loadImage(uri);
                break;
            // 其他分段处理
            default:
                throw new Error("Invalid segment selected");
        }

        // 重置初始化标记
        initializeDrawingsCalled = false;
        segmentToInitialize = initVariables.selectedSegment;

    } catch (error) {
        console.error("Error changing collar side image:", error);
    } finally {
        // 确保加载状态设为false
        initVariables.loading[initVariables.selectedSegment] = false;
    }
};

问题根源分析 #

1. p5.loadImage异步处理缺失：直接赋值未等待异步加载完成，就重置初始化标记，导致draw循环尝试绘制未加载完成的图片，引发错误。
2. 内存泄漏：使用URL.createObjectURL后未调用URL.revokeObjectURL，多次操作后占用大量内存，导致加载缓慢或失败。
3. draw循环冗余耗时操作：updateCPs()每帧执行，高耗时拖慢渲染，多分段场景下更明显。
4. 并发加载冲突：未严格控制加载状态，可能出现多分段同时加载引发资源竞争。

解决方案 #

1. 正确处理p5.loadImage异步加载

利用p5.loadImage的回调函数，等待图片加载完成后再更新状态：

// 修改changeSegmentImage中的加载逻辑
switch (initVariables.selectedSegment) {
    case 'COLLARSIDE':
        p5.loadImage(uri, (loadedImg) => {
            img.collarSide = loadedImg;
            // 加载完成后再重置初始化标记
            initializeDrawingsCalled = false;
            segmentToInitialize = initVariables.selectedSegment;
            // 清理URL对象
            URL.revokeObjectURL(uri);
        }, (error) => {
            console.error("Failed to load image:", error);
            URL.revokeObjectURL(uri);
        });
        break;
    // 其他分段同理
}

2. 清理URL.createObjectURL避免内存泄漏

每次生成uri后，必须在图片加载完成或失败时调用URL.revokeObjectURL(uri)释放资源。

3. 优化draw循环中的耗时操作

将updateCPs()改为仅在需要时执行，而非每帧调用：

// 添加标记控制updateCPs执行
let needUpdateCPs = true;

p5.draw = () => {
    p5.background(initVariables.lightGrey);
    // 仅在需要时更新控制点
    if (needUpdateCPs) {
        updateCPs();
        needUpdateCPs = false;
    }

    // 初始化逻辑保持不变
    if (!initializeDrawingsCalled) {
        initializationDelayCounter++;
        if (initializationDelayCounter > INITIALIZATION_DELAY_FRAMES) {
            initializeDrawings();
            initializeDrawingsCalled = true;
        }
    }
}

// 在需要更新控制点的地方设置needUpdateCPs = true（如修改分段后、调整参数后）

4. 严格控制加载状态，避免并发冲突

在函数开头增加加载状态检查，防止同一分段重复加载：

export const changeSegmentImage = async (imageUrl, colors) => {
    const segment = initVariables.selectedSegment;
    try {
        if (!imageUrl || !segment) throw new Error("Invalid image URL or segment");
        // 检查当前分段是否正在加载
        if (initVariables.loading[segment]) return;
        
        initVariables.loading[segment] = true;

        // 后续逻辑保持不变...
    } catch (error) {
        console.error("Error changing segment image:", error);
    } finally {
        initVariables.loading[segment] = false;
    }
};

5. 优化分段初始化逻辑

仅初始化修改过的分段，而非全部重新初始化：

// 修改initializeDrawings函数，支持仅初始化指定分段
function initializeDrawings(targetSegment = null) {
    if (targetSegment) {
        // 仅初始化targetSegment对应的遮罩和绘图逻辑
        switch(targetSegment) {
            case 'COLLARSIDE':
                // 初始化collarSide的遮罩等
                break;
            // 其他分段同理
        }
    } else {
        // 初始化所有分段（首次加载时）
        // 原初始化逻辑
    }
}

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