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所有示例执行完毕");
}
注意事项
-
静态方法 :
Base64Tool类的所有方法都是静态的,使用时必须加Laya.前缀。 -
数据 URI 处理 : 编码后的字符串不包含数据 URI 头部(
data:xxx;base64,),如需使用需要手动添加。 -
性能考虑:
- Base64 编码会使数据体积增大约 33%
- 大文件编码/解码可能消耗较多性能
- 建议在后台线程中处理大文件
-
安全性:
- Base64 只是编码方式,不是加密,不要用于存储敏感信息
- 解码前应该验证字符串格式
-
字符编码:
- 编码字符串时使用
TextEncoder - 解码为字符串时使用
TextDecoder - 注意处理 UTF-8 字符
- 编码字符串时使用
-
错误处理: 解码操作可能抛出异常,建议使用 try-catch 包裹。
-
版本信息: 本文档基于 LayaAir 3.3.6 版本编写。