PIXI.js 8中直接通过Base64图像数据创建纹理失败求助

问题背景 #

在PIXI 8.x环境中，尝试直接通过Base64图像数据创建纹理时，图像无法正常显示。原代码使用Texture.from(bunnyBase64)同步创建纹理，无法达到await Assets.load('远程图片URL')的显示效果。

原代码示例 #

import { Application, Assets, Sprite, Texture } from 'pixi.js';

(async () =>
{
    // 创建新应用实例
    const app = new Application();

    // 初始化应用
    await app.init({ background: '#1099bb', resizeTo: window });

    // 将应用画布添加到文档主体
    document.body.appendChild(app.canvas);

    // 加载兔子纹理（注释示例）
    // const texture = await Assets.load('https://pixijs.com/assets/bunny.png');

    // Base64编码的兔子图像
    const bunnyBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAlCAYAAABcZvm2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWNJREFUeNrsV8sNwjAMbUqBBWACxB2pQ8AKcGALTsAJuDEFB1gBhuDAuWICmICPQh01pXWdJqEFcaglRGRbfonjPLuMc+5QwhjLGEJfZusjxZOL9akZKye9G98vPMfvsAx4qBfKwfzBL9s6uUHpI6U/u7+BKGkNb/H6umtk7MczF0HyfKS4zo/k/4AgTV8DOizrqX8oECgC+MGa8lGJp9sJDiAB8nyqYoglvJOPbP97IqoATGxWVZeXJlMQwYHA3piF8wJIblOVNBBxe3TPMLoHIKtxrbS7AAbBrA4Y5NaPAXf8LjN6wKZ0RaZOnlAFZnuXInVR4FTE6eYp0olPhhshtXsAwY3PquoAJNkIY33U7HTs7hYBwV24ItUKqDwgKF3VzAZ6k8HF+B1BMF8xRJbeJoqMXHZAAQ1kwoluURCdzepEugGEImBrIADB7I4lyfbJLlw92FKE6b5hVd+ktv4vAQYASMWxvlAAvcsAAAAASUVORK5CYII="
    
    // 创建兔子精灵
    const texture = Texture.from(bunnyBase64);
    const bunny = new Sprite(texture);

    // 设置精灵锚点居中
    bunny.anchor.set(0.5);

    // 将精灵移动到屏幕中心
    bunny.x = app.screen.width / 2;
    bunny.y = app.screen.height / 2;

    app.stage.addChild(bunny);

    // 监听动画更新
    app.ticker.add((time) =>
    {
        // 让兔子旋转（帧独立变换）
        bunny.rotation += 0.1 * time.deltaTime;
    });
})();

问题原因 #

Texture.from处理Base64数据时，图像解析是异步过程，同步调用会返回未加载完成的纹理，此时精灵无法获取有效纹理数据进行渲染。

解决方案 #

提供两种可行的异步加载方式，确保纹理加载完成后再创建精灵：

方案一：使用Texture.fromAsync异步加载 #

替换同步创建纹理的代码为异步方法，等待纹理加载完成：

const texture = await Texture.fromAsync(bunnyBase64);

方案二：使用Assets.load加载Base64数据 #

Assets模块支持直接加载data URI，用法与加载远程URL完全一致：

const texture = await Assets.load(bunnyBase64);

修改后完整代码 #

import { Application, Assets, Sprite, Texture } from 'pixi.js';

(async () =>
{
    // 创建新应用实例
    const app = new Application();

    // 初始化应用
    await app.init({ background: '#1099bb', resizeTo: window });

    // 将应用画布添加到文档主体
    document.body.appendChild(app.canvas);

    // Base64编码的兔子图像
    const bunnyBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAlCAYAAABcZvm2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWNJREFUeNrsV8sNwjAMbUqBBWACxB2pQ8AKcGALTsAJuDEFB1gBhuDAuWICmICPQh01pXWdJqEFcaglRGRbfonjPLuMc+5QwhjLGEJfZusjxZOL9akZKye9G98vPMfvsAx4qBfKwfzBL9s6uUHpI6U/u7+BKGkNb/H6umtk7MczF0HyfKS4zo/k/4AgTV8DOizrqX8oECgC+MGa8lGJp9sJDiAB8nyqYoglvJOPbP97IqoATGxWVZeXJlMQwYHA3piF8wJIblOVNBBxe3TPMLoHIKtxrbS7AAbBrA4Y5NaPAXf8LjN6wKZ0RaZOnlAFZnuXInVR4FTE6eYp0olPhhshtXsAwY3PquoAJNkIY33U7HTs7hYBwV24ItUKqDwgKF3VzAZ6k8HF+B1BMF8xRJbeJoqMXHZAAQ1kwoluURCdzepEugGEImBrIADB7I4lyfbJLlw92FKE6b5hVd+ktv4vAQYASMWxvlAAvcsAAAAASUVORK5CYII="
    
    // 选择其中一种方案即可
    const texture = await Texture.fromAsync(bunnyBase64);
    // const texture = await Assets.load(bunnyBase64);
    
    const bunny = new Sprite(texture);

    // 设置精灵锚点居中
    bunny.anchor.set(0.5);

    // 将精灵移动到屏幕中心
    bunny.x = app.screen.width / 2;
    bunny.y = app.screen.height / 2;

    app.stage.addChild(bunny);

    // 监听动画更新
    app.ticker.add((time) =>
    {
        // 让兔子旋转（帧独立变换）
        bunny.rotation += 0.1 * time.deltaTime;
    });
})();

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