Egret之JSZip解析圖片

標籤：har   fun   source   listen   並且   png   comm   stage   tool   

將圖片加壓到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 可能在某些瀏覽器上無法顯示
本人會持續跟蹤給出答案......

Egret之JSZip解析圖片