【Laya】Base64Tool 编码工具类使用说明

Laya.Base64Tool Base64 编码工具类使用说明

简介

Laya.Base64Tool 是 LayaAir 引擎提供的 Base64 编码/解码工具类,用于在二进制数据和 Base64 字符串之间进行转换,支持数据 URI 格式的验证和处理。


目录


属性说明

chars

用于 Base64 编码的字符集。

typescript 复制代码
static chars: string

说明 : 标准 Base64 编码使用的 64 个字符(A-Z, a-z, 0-9, +, /),末尾包含填充符 =


reg

用于验证 Base64 编码字符串(包括数据 URI)的正则表达式。

typescript 复制代码
static reg: RegExp

说明: 可用于检测字符串是否为有效的 Base64 编码格式。


reghead

用于匹配数据 URI 头部的正则表达式。

typescript 复制代码
static reghead: RegExp

说明 : 匹配形如 data:xxx;base64, 的数据 URI 前缀。


lookup

用于 Base64 解码的查找表。

typescript 复制代码
static lookup: Uint8Array

说明: 将 Base64 字符映射到对应 6 位值的查找表,提高解码性能。


初始化方法

init

初始化用于 Base64 解码的查找表。

typescript 复制代码
static init(): void

说明: 通常在引擎启动时自动调用,无需手动调用。

示例:

typescript 复制代码
// 通常不需要手动调用
Laya.Base64Tool.init();

验证方法

isBase64String

判断字符串是否是 base64 编码的字符串。

typescript 复制代码
static isBase64String(str: string): boolean

参数:

  • str: 需要检查的字符串

返回值: 是否为 Base64 编码字符串

示例:

typescript 复制代码
// 基本用法
let result1 = Laya.Base64Tool.isBase64String("SGVsbG8gV29ybGQ=");  // true
let result2 = Laya.Base64Tool.isBase64String("Hello World");       // false
let result3 = Laya.Base64Tool.isBase64String("");                  // false

// 检查数据 URI 格式
let dataURI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA";
let result4 = Laya.Base64Tool.isBase64String(dataURI);             // true

// 实际应用:验证用户输入
class ConfigValidator {
    validateBase64Config(config: string): boolean {
        if (!config) return false;
        return Laya.Base64Tool.isBase64String(config);
    }
}

// 实际应用:检查资源数据格式
class ResourceLoader {
    loadImageData(base64Data: string): void {
        if (!Laya.Base64Tool.isBase64String(base64Data)) {
            console.error("无效的 Base64 数据");
            return;
        }
        // 加载图片...
    }
}

编码方法

encode

对 ArrayBuffer 进行编码,返回 base64 字符串。

typescript 复制代码
static encode(arraybuffer: ArrayBuffer): string

参数:

  • arraybuffer: 需要编码的 ArrayBuffer

返回值: Base64 编码后的字符串

示例:

typescript 复制代码
// 基本用法:编码字符串
let text = "Hello World";
let encoder = new TextEncoder();
let arrayBuffer = encoder.encode(text);
let base64 = Laya.Base64Tool.encode(arrayBuffer);
console.log(base64);  // "SGVsbG8gV29ybGQ="

// 基本用法:编码图片数据
class ImageEncoder {
    encodeToBase64(imageData: ArrayBuffer): string {
        return Laya.Base64Tool.encode(imageData);
    }

    // 创建数据 URI
    createDataURI(imageData: ArrayBuffer, mimeType: string): string {
        let base64 = Laya.Base64Tool.encode(imageData);
        return `data:${mimeType};base64,${base64}`;
    }
}

// 实际应用:保存游戏存档为 Base64
class SaveManager {
    private saveData: any = {
        level: 10,
        score: 1500,
        inventory: ["sword", "shield"]
    };

    saveToBase64(): string {
        let json = JSON.stringify(this.saveData);
        let encoder = new TextEncoder();
        let arrayBuffer = encoder.encode(json);
        return Laya.Base64Tool.encode(arrayBuffer);
    }

    // 存储到本地存储
    saveToLocal(): void {
        let base64 = this.saveToBase64();
        Laya.LocalStorage.setItem("game_save", base64);
        console.log("存档已保存");
    }
}

// 实际应用:上传图片前编码
class ImageUploader {
    prepareImageForUpload(file: ArrayBuffer): string {
        // 编码为 Base64
        let base64 = Laya.Base64Tool.encode(file);

        // 创建完整的数据 URI
        return `data:image/jpeg;base64,${base64}`;
    }

    upload(file: ArrayBuffer): void {
        let dataURI = this.prepareImageForUpload(file);

        // 发送到服务器
        fetch("/api/upload", {
            method: "POST",
            body: JSON.stringify({ image: dataURI })
        }).then(response => {
            console.log("上传成功");
        });
    }
}

// 实际应用:加密简单数据
class SimpleEncryption {
    // 注意:这只是编码,不是真正的加密!
    encodeData(data: string): string {
        let encoder = new TextEncoder();
        let arrayBuffer = encoder.encode(data);
        return Laya.Base64Tool.encode(arrayBuffer);
    }

    decodeData(base64: string): string {
        let arrayBuffer = Laya.Base64Tool.decode(base64);
        let decoder = new TextDecoder();
        return decoder.decode(arrayBuffer);
    }
}

// 实际应用:编码二进制数据
class BinaryEncoder {
    encodeCoordinates(x: number, y: number, z: number): string {
        // 创建包含三个坐标的 ArrayBuffer
        let buffer = new ArrayBuffer(12); // 3 个 32 位浮点数 = 12 字节
        let view = new DataView(buffer);
        view.setFloat32(0, x);
        view.setFloat32(4, y);
        view.setFloat32(8, z);

        return Laya.Base64Tool.encode(buffer);
    }
}

解码方法

decode

对 base64 字符串进行解码,返回 ArrayBuffer。

typescript 复制代码
static decode(base64: string): ArrayBuffer

参数:

  • base64: 需要解码的 base64 字符串

返回值: 解码后的 ArrayBuffer

示例:

typescript 复制代码
// 基本用法:解码字符串
let base64 = "SGVsbG8gV29ybGQ=";
let arrayBuffer = Laya.Base64Tool.decode(base64);
let decoder = new TextDecoder();
let text = decoder.decode(arrayBuffer);
console.log(text);  // "Hello World"

// 基本用法:解码数据 URI
class ImageDecoder {
    decodeFromDataURI(dataURI: string): ArrayBuffer {
        // 移除数据 URI 头部
        let base64 = dataURI.replace(/^data:.*;base64,/, "");
        return Laya.Base64Tool.decode(base64);
    }

    loadImageFromBase64(base64: string): Laya.Texture2D {
        let arrayBuffer = Laya.Base64Tool.decode(base64);

        // 创建纹理
        let texture = new Laya.Texture2D(
            100, // width
            100, // height
            Laya.TextureFormat.R8G8B8A8,
            false, // mipmap
            true  // canRead
        );
        texture.setPixelsData(new Uint8Array(arrayBuffer), false, false);

        return texture;
    }
}

// 实际应用:加载游戏存档
class SaveManager {
    loadFromBase64(base64: string): any {
        try {
            let arrayBuffer = Laya.Base64Tool.decode(base64);
            let decoder = new TextDecoder();
            let json = decoder.decode(arrayBuffer);
            return JSON.parse(json);
        } catch (error) {
            console.error("存档加载失败:", error);
            return null;
        }
    }

    loadFromLocal(): any {
        let base64 = Laya.LocalStorage.getItem("game_save");
        if (!base64) {
            console.log("没有找到存档");
            return null;
        }

        let saveData = this.loadFromBase64(base64);
        if (saveData) {
            console.log("存档加载成功:", saveData);
            return saveData;
        }

        return null;
    }
}

// 实际应用:解码服务器返回的图片数据
class RemoteImageLoader {
    async loadImage(url: string): Promise<Laya.Texture2D> {
        try {
            let response = await fetch(url);
            let data = await response.json();

            // 假设服务器返回的数据包含 base64 编码的图片
            let arrayBuffer = Laya.Base64Tool.decode(data.image);

            let texture = new Laya.Texture2D(
                data.width,
                data.height,
                Laya.TextureFormat.R8G8B8A8,
                false, // mipmap
                true  // canRead
            );
            texture.setPixelsData(new Uint8Array(arrayBuffer), false, false);

            return texture;
        } catch (error) {
            console.error("图片加载失败:", error);
            throw error;
        }
    }
}

// 实际应用:处理配置文件
class ConfigLoader {
    loadConfig(base64Config: string): any {
        // 先验证格式
        if (!Laya.Base64Tool.isBase64String(base64Config)) {
            throw new Error("无效的配置格式");
        }

        let arrayBuffer = Laya.Base64Tool.decode(base64Config);
        let decoder = new TextDecoder();
        let configText = decoder.decode(arrayBuffer);

        return JSON.parse(configText);
    }
}

// 实际应用:解码坐标数据
class BinaryDecoder {
    decodeCoordinates(base64: string): {x: number; y: number; z: number} {
        let arrayBuffer = Laya.Base64Tool.decode(base64);
        let view = new DataView(arrayBuffer);

        return {
            x: view.getFloat32(0),
            y: view.getFloat32(4),
            z: view.getFloat32(8)
        };
    }
}

// 实际应用:验证并解码
class SecureDataHandler {
    processData(base64Data: string): any {
        // 1. 验证格式
        if (!Laya.Base64Tool.isBase64String(base64Data)) {
            console.error("数据格式无效");
            return null;
        }

        // 2. 解码
        let arrayBuffer: ArrayBuffer;
        try {
            arrayBuffer = Laya.Base64Tool.decode(base64Data);
        } catch (error) {
            console.error("解码失败:", error);
            return null;
        }

        // 3. 转换为文本
        let decoder = new TextDecoder();
        let text = decoder.decode(arrayBuffer);

        // 4. 解析 JSON
        try {
            return JSON.parse(text);
        } catch (error) {
            console.error("JSON 解析失败:", error);
            return null;
        }
    }
}

完整示例

以下是一个综合使用 Laya.Base64Tool 工具类的完整示例:

typescript 复制代码
export async function main() {
    await Laya.init(800, 600);

    // 示例 1: 字符串编码和解码
    console.log("=== 字符串编码解码 ===");
    let originalText = "Hello LayaAir!";
    let encoder = new TextEncoder();
    let arrayBuffer = encoder.encode(originalText);
    let base64 = Laya.Base64Tool.encode(arrayBuffer);
    console.log("原始文本:", originalText);
    console.log("Base64 编码:", base64);

    let decodedBuffer = Laya.Base64Tool.decode(base64);
    let decoder = new TextDecoder();
    let decodedText = decoder.decode(decodedBuffer);
    console.log("解码后的文本:", decodedText);

    // 示例 2: 游戏存档系统
    console.log("\n=== 游戏存档系统 ===");

    class GameSaveSystem {
        private saveData = {
            playerName: "勇者",
            level: 25,
            gold: 9999,
            inventory: ["铁剑", "生命药水", "魔法卷轴"],
            lastLogin: new Date().toISOString()
        };

        // 保存存档
        save(): string {
            let json = JSON.stringify(this.saveData);
            let encoder = new TextEncoder();
            let buffer = encoder.encode(json);
            let base64 = Laya.Base64Tool.encode(buffer);

            // 保存到本地存储
            Laya.LocalStorage.setItem("game_save", base64);
            console.log("存档已保存:", base64.substring(0, 50) + "...");

            return base64;
        }

        // 加载存档
        load(): any {
            let base64 = Laya.LocalStorage.getItem("game_save");
            if (!base64) {
                console.log("没有找到存档");
                return null;
            }

            // 验证格式
            if (!Laya.Base64Tool.isBase64String(base64)) {
                console.error("存档格式无效");
                return null;
            }

            // 解码
            let buffer = Laya.Base64Tool.decode(base64);
            let decoder = new TextDecoder();
            let json = decoder.decode(buffer);

            let data = JSON.parse(json);
            console.log("存档已加载:", data);
            return data;
        }
    }

    let saveSystem = new GameSaveSystem();
    saveSystem.save();
    saveSystem.load();

    // 示例 3: 图片数据处理
    console.log("\n=== 图片数据处理 ===");

    class ImageHandler {
        // 将图片转换为 Base64
        imageToBase64(texture: Laya.Texture2D): string {
            let pixels = texture.getPixels();
            let base64 = Laya.Base64Tool.encode(pixels);
            return `data:image/png;base64,${base64}`;
        }

        // 从 Base64 创建图片
        base64ToImage(base64: string): Laya.Texture2D {
            // 移除数据 URI 头部
            let pureBase64 = base64.replace(/^data:.*;base64,/, "");

            let buffer = Laya.Base64Tool.decode(pureBase64);
            let texture = new Laya.Texture2D(100, 100, Laya.TextureFormat.R8G8B8A8, false, true);
            texture.setPixelsData(new Uint8Array(buffer), false, false);

            return texture;
        }
    }

    // 示例 4: 数据传输
    console.log("\n=== 数据传输 ===");

    class NetworkPacket {
        private packetId: number = 1;
        private timestamp: number = Date.now();
        private data: any = { action: "move", x: 100, y: 200 };

        encode(): string {
            let packet = {
                id: this.packetId,
                timestamp: this.timestamp,
                data: this.data
            };

            let encoder = new TextEncoder();
            let buffer = encoder.encode(JSON.stringify(packet));
            return Laya.Base64Tool.encode(buffer);
        }

        static decode(base64: string): any {
            let buffer = Laya.Base64Tool.decode(base64);
            let decoder = new TextDecoder();
            let json = decoder.decode(buffer);
            return JSON.parse(json);
        }
    }

    let packet = new NetworkPacket();
    let encodedPacket = packet.encode();
    console.log("编码后的数据包:", encodedPacket.substring(0, 50) + "...");

    let decodedPacket = NetworkPacket.decode(encodedPacket);
    console.log("解码后的数据包:", decodedPacket);

    // 示例 5: 批量验证
    console.log("\n=== 批量验证 ===");

    let testData = [
        "SGVsbG8gV29ybGQ=",
        "Invalid String!!",
        "VGVzdA==",
        "",
        "data:image/png;base64,iVBORw0KG"
    ];

    testData.forEach((data, index) => {
        let isValid = Laya.Base64Tool.isBase64String(data);
        console.log(`测试 ${index + 1}: "${data.substring(0, 20)}..." -> ${isValid}`);
    });

    console.log("\n所有示例执行完毕");
}

注意事项

  1. 静态方法 : Base64Tool 类的所有方法都是静态的,使用时必须加 Laya. 前缀。

  2. 数据 URI 处理 : 编码后的字符串不包含数据 URI 头部(data:xxx;base64,),如需使用需要手动添加。

  3. 性能考虑:

    • Base64 编码会使数据体积增大约 33%
    • 大文件编码/解码可能消耗较多性能
    • 建议在后台线程中处理大文件
  4. 安全性:

    • Base64 只是编码方式,不是加密,不要用于存储敏感信息
    • 解码前应该验证字符串格式
  5. 字符编码:

    • 编码字符串时使用 TextEncoder
    • 解码为字符串时使用 TextDecoder
    • 注意处理 UTF-8 字符
  6. 错误处理: 解码操作可能抛出异常,建议使用 try-catch 包裹。

  7. 版本信息: 本文档基于 LayaAir 3.3.6 版本编写。

相关推荐
老前端的功夫2 小时前
TypeScript索引访问类型深度解析:类型系统的动态访问与模式匹配
前端·javascript·ubuntu·架构·typescript·前端框架
Irene19912 小时前
使用 TypeScript 编写一个 Vue 3 模态框(Modal)组件
javascript·vue.js·typescript
踢球的打工仔2 小时前
typescript-void和never
前端·javascript·typescript
Howrun7773 小时前
虚幻引擎_动画蓝图/混合空间/状态机_超详细教学
游戏引擎·虚幻
奔跑的web.3 小时前
TypeScript 全面详解:对象类型的语法规则
开发语言·前端·javascript·typescript·vue
如果你好3 小时前
TypeScript 全面详解:对象类型的语法规则与实战指南
typescript
满天星辰4 小时前
Typescript的infer到底怎么使用?
前端·typescript
qianbo_insist4 小时前
unity 无头模式启动
unity·游戏引擎
郝学胜-神的一滴5 小时前
深入解析Mipmap层级判定原理:从理论到实践
c++·unity·godot·游戏程序·图形渲染·unreal engine