將圖片加壓到zip中,再使用JSZip和Egret將圖片顯示出來.
核心代碼 :
/**
* 將ArrayBuffer轉化爲Base64
* @param {ArrayBuffer} $buffer
* @param {smallLib.TYPE_IMAGE_FORMAT2ZIP} $img_ty (默認 : TYPE_IMAGE_FORMAT2ZIP = TYPE_IMAGE_FORMAT2ZIP._PNG)
* @returns {string}
*/
public static arrayBufferToBase64( $buffer : ArrayBuffer , $img_ty : TYPE_IMAGE_FORMAT2ZIP = TYPE_IMAGE_FORMAT2ZIP._PNG) : string {
let bytes : Uint8Array = new Uint8Array( $buffer );
const addFormat : Function = ( $base64 : string ) : string =>{
const $base_foramt : string = `data:image/{0};base64,${$base64}`;
switch($img_ty){
case TYPE_IMAGE_FORMAT2ZIP._PNG: return $base_foramt.replace(`{0}` , `png`);
case TYPE_IMAGE_FORMAT2ZIP._JPG: return $base_foramt.replace(`{0}`,`jpg`);
case TYPE_IMAGE_FORMAT2ZIP._JPEG: return $base_foramt.replace(`{0}`,`jpeg`);
case TYPE_IMAGE_FORMAT2ZIP._BMP: return $base_foramt.replace(`{0}`,`bmp`);
case TYPE_IMAGE_FORMAT2ZIP._WEBP: return $base_foramt.replace(`{0}`,`webp`);
}
};
if( egret.Capabilities.runtimeType != egret.RuntimeType.WXGAME ){
let binary : string = '';
let len : number = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
return addFormat(window.btoa( binary ));
}else{
return addFormat(wx.arrayBufferToBase64(bytes));
}
}
/**
* 通過Base64獲得圖片的紋理信息
* @param {string} $base64
* @returns {egret.Texture}
*/
public static getTextureByBase64( $base64 : string ) : egret.Texture{
let img = new Image();
img.src = $base64;
let texture : egret.Texture = new egret.Texture();
let bitmapdata : egret.BitmapData = new egret.BitmapData(img);
texture._setBitmapData(bitmapdata);
return texture;
}
/**
* 圖片的格式
* @author Husz
*/
export enum TYPE_IMAGE_FORMAT2ZIP{
_PNG = 0,
_JPG = 1,
_JPEG = 2,
_BMP = 3,
_WEBP = 4
}測試 : egret引擎版本:5.2.6
一,測試環境:
①,將bg.jpg加壓到bg.zip,將egret_icon.png加壓到egret_icon.zip
②,將2個zip文件加到default.res.json中 , 並且刪除掉bg_jpg和egret_icon.png
二,代碼(修改了Main.ts中的createGameScene())如下:/=============================================================================/
/**
* 創建場景界面
* Create scene interface
*/
protected createGameScene(): void {
// let sky = this.createBitmapByName("bg_jpg");
// this.addChild(sky);
let stageW = this.stage.stageWidth;
let stageH = this.stage.stageHeight;
// sky.width = stageW;
// sky.height = stageH;
let $$$zip : JSZip = new JSZip( RES.getRes("bg_zip") );
let $$$buffer : ArrayBuffer = $$$zip.file("bg.jpg").asArrayBuffer();
let $$$base64 : string = smallLib.CommonTool.arrayBufferToBase64($$$buffer,smallLib.TYPE_IMAGE_FORMAT2ZIP._JPG);
let $$$sky : eui.Image = new eui.Image();
$$$sky.source = $$$base64;
$$$sky.width = stageW;
$$$sky.height = stageH;
this.addChild($$$sky);
let topMask = new egret.Shape();
topMask.graphics.beginFill(0x000000, 0.5);
topMask.graphics.drawRect(0, 0, stageW, 172);
topMask.graphics.endFill();
topMask.y = 33;
this.addChild(topMask);
$$$zip = new JSZip(RES.getRes("egret_icon_zip"));
$$$buffer = $$$zip.file("egret_icon.png").asArrayBuffer();
$$$base64 = smallLib.CommonTool.arrayBufferToBase64($$$buffer,smallLib.TYPE_IMAGE_FORMAT2ZIP._PNG);
// $$$base64 = this.arrayBufferToBase64($$$buffer);
//let $$$texture : egret.Texture = this.getTextureByBase64($$$base64);
let $$$icon : eui.Image = new eui.Image();
$$$icon.source = $$$base64;
$$$icon.x = 26;
$$$icon.y = 33;
let $$$bitmapdata : egret.BitmapData = egret.BitmapData.create('arraybuffer', $$$buffer);
let _______texture : egret.Texture = new egret.Texture();
_______texture.bitmapData = $$$bitmapdata;
let $$$bitmap2Icon : egret.Bitmap = new egret.Bitmap(_______texture);
$$$bitmap2Icon.x = 26;
$$$bitmap2Icon.y = 33;
this.addChild($$$bitmap2Icon);
// let icon: egret.Bitmap = this.createBitmapByName("egret_icon_png");
// this.addChild(icon);
// icon.x = 26;
// icon.y = 33;
let line = new egret.Shape();
line.graphics.lineStyle(2, 0xffffff);
line.graphics.moveTo(0, 0);
line.graphics.lineTo(0, 117);
line.graphics.endFill();
line.x = 172;
line.y = 61;
this.addChild(line);
let colorLabel = new egret.TextField();
colorLabel.textColor = 0xffffff;
colorLabel.width = stageW - 172;
colorLabel.textAlign = "center";
colorLabel.text = "Hello Egret";
colorLabel.size = 24;
colorLabel.x = 172;
colorLabel.y = 80;
this.addChild(colorLabel);
let textfield = new egret.TextField();
this.addChild(textfield);
textfield.alpha = 0;
textfield.width = stageW - 172;
textfield.textAlign = egret.HorizontalAlign.CENTER;
textfield.size = 24;
textfield.textColor = 0xffffff;
textfield.x = 172;
textfield.y = 135;
this.textfield = textfield;
let button = new eui.Button();
button.label = "Click!";
button.horizontalCenter = 0;
button.verticalCenter = 0;
this.addChild(button);
button.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonClick, this);
}三:結果
①,在chrome下
②,在Launch Wing Player下
注意 : egret.BitmapData.create方法
四:結論
① : 使用eui.Image 直接接收base64(string)不存在兼容問題
② : 使用egret.Texture 可能在某些瀏覽器上無法顯示
解決方案：
let $zip : JSZip = new JSZip( RES.getRes("egret_icon_zip") );
let buffer : ArrayBuffer = $zip.file("egret_icon.png").asArrayBuffer();
let base64 : string = this.arrayBufferToBase64(buffer);
//base64 = "data:image/png;base64," + base64;
//使用arraybuffer
let $bitmapData : egret.BitmapData = egret.BitmapData.create("arraybuffer" , buffer , (data : egret.BitmapData) : void =>{
const $texture : egret.Texture = new egret.Texture();
$texture.bitmapData = data;
let $bitBit : egret.Bitmap = new egret.Bitmap($texture);
$bitBit.x = 350;
$bitBit.y = 600;
this.addChild($bitBit);
});
//使用base64
let $bitmapData_base64 : egret.BitmapData = egret.BitmapData.create("base64" , base64, (data : egret.BitmapData) : void => {
const $texture : egret.Texture = new egret.Texture();
$texture.bitmapData = data;
let $bitBit : egret.Bitmap = new egret.Bitmap($texture);
$bitBit.x = 250;
$bitBit.y = 800;
this.addChild($bitBit);
});注意 ： egret.BitmapData.create("base64" , base64, 參數base64不要加入 ：~~ //base64 = "data:image/png;base64," + base64;~~
結果：