Cocos Creator 2.4.10 中如何用 Base64 图片显示到 Sprite

Creator 2.x
#1

Cocos Creator 2.4.10 中如何用 Base64 图片显示到 Sprite

适用于 Cocos Creator 2.4.x，主要面向 Web 平台。分享一种把 base64 图片直接显示在 cc.Sprite 上的做法。

一、使用场景

  • 头像、用户上传图片等从服务器拿到的 base64 数据
  • 不想先落盘再加载，希望「内存 → 贴图 → 显示」一条龙
  • 小图、动态图等适合用 data URL 的场景

二、思路简述

Cocos 的 cc.Sprite 需要的是 cc.SpriteFrame，而 SpriteFrame 依赖 cc.Texture2D。
在 Web 下可以用浏览器自带的 Image 先加载 base64 的 data URL，再用 Cocos 的 Texture2D.initWithElement() 转成纹理，最后包成 SpriteFrame 赋给 Sprite。

流程：Base64 字符串 → Image → Texture2D → SpriteFrame → Sprite.spriteFrame

三、完整示例代码

const { ccclass, property } = cc._decorator;

@ccclass
export default class Helloworld extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property
    text: string = 'hello';

    /** 用于显示 base64 图片的 Sprite */
    @property(cc.Sprite)
    sprite: cc.Sprite = null;

    /** 示例：带 data URL 前缀的 base64 字符串 */
    base64Image: string = 'data:image/png;base64,iVBORw0KGgo...'; // 你的 base64

    start() {
        this.label.string = this.text;
        this.loadBase64ToSprite(this.base64Image);
    }

    /**
     * 将 base64 图片显示到 Sprite 上（Web 平台）
     * @param base64DataURL 完整 data URL，如：data:image/png;base64,xxxx
     */
    loadBase64ToSprite(base64DataURL: string) {
        if (!this.sprite || !base64DataURL) return;

        const img = new Image();
        img.onload = () => {
            const texture = new cc.Texture2D();
            texture.packable = false; // 动态贴图需关闭合图，否则可能显示异常
            texture.initWithElement(img);

            const rect = new cc.Rect(0, 0, img.width, img.height);
            const spriteFrame = new cc.SpriteFrame(texture, rect);
            this.sprite.spriteFrame = spriteFrame;
        };
        img.onerror = () => {
            cc.warn('[Base64] 图片加载失败');
        };
        img.src = base64DataURL;
    }
}
  • 在编辑器中把要显示图片的 Sprite 节点 拖到脚本的 sprite 属性上。
  • base64Image 可以是 data:image/png;base64,xxx 或 data:image/jpeg;base64,xxx 等任意浏览器支持的 data URL。

四、要点说明

项目 说明
平台 Texture2D.initWithElement() 依赖浏览器 Image，仅 Web 平台 适用；原生（Native）需先写文件再按路径加载纹理。
packable = false 从 HTML Image 创建的纹理建议设 texture.packable = false，避免参与动态合图导致显示错乱。
格式 base64DataURL 必须是带前缀的完整 data URL，例如：data:image/png;base64, + base64 字符串。

五、在其他脚本中复用

如果只想在别的组件里「给一个 Sprite 设 base64 图」，可以抽成工具方法：

/**
 * 将 base64 data URL 显示到指定 Sprite（仅 Web）
 */
function setSpriteWithBase64(sprite: cc.Sprite, base64DataURL: string) {
    if (!sprite || !base64DataURL) return;

    const img = new Image();
    img.onload = () => {
        const texture = new cc.Texture2D();
        texture.packable = false;
        texture.initWithElement(img);
        const rect = new cc.Rect(0, 0, img.width, img.height);
        sprite.spriteFrame = new cc.SpriteFrame(texture, rect);
    };
    img.onerror = () => cc.warn('Base64 图片加载失败');
    img.src = base64DataURL;
}

六、小结

  • Web：用 Image + Texture2D.initWithElement + SpriteFrame 即可把 base64 显示到 Sprite。
  • 记得设置 texture.packable = false。
  • 原生平台需要先把 base64 解码成二进制、写入临时文件，再按资源路径加载为纹理后同样包成 SpriteFrame 使用。

如果你也是 2.4.x 且主要做 Web，可以直接把上面的 loadBase64ToSprite 拷到自己的脚本里用。有更好的写法或原生方案欢迎在楼下补充。

Cocos Creator 2.4.10 | 分享至 Cocos 中文社区

1赞
#2

其实cocos的api可以直接使用的，并且跨平台。

let b64str = "data:image/png;base64," + base64;

//2.x
cc.assetManager.loadRemote(b64str, { ext: '.png' }, (err, texture: cc.Texture2D) => {
    if (err) {
        cc.error("image b64", err);
        return;
    }
    let sf = new cc.SpriteFrame(texture);
    // do something with the sprite frame
});

//3.x
assetManager.loadRemote(b64str, { ext: '.png' }, (err, imgAsset: ImageAsset) => {
    if (err) {
        error("image b64", err);
        return;
    }

    let texture = new Texture2D();
    texture.image = imgAsset;
    let sf = new SpriteFrame();
    sf.texture = texture;
    // do something with the sprite frame
});
2赞
#3

感谢提供，已在2.4.10上验证可行:+1: