Egret's Jszip analysis picture

Compress the picture into a zip, then use Jszip and Egret to display the picture.

Core code:

        /** * Convert ArrayBuffer to Base64 * @param {ArrayBuffer} $buffer * @param {smalllib.type_image_f        Ormat2zip} $img _ty (default: 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 = ($base 64:string): string =>{const $base _foramt:string = ' Data:image                /{0};base64,${$base 64} ';                    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)); }}/** * Get texture information for picture by Base64 * @param {string} $base * @returns {Egret. Texture} */public static getTextureByBase64 ($base 64:string): Egret.            texture{let img = new Image ();            IMG.SRC = $base 64; Let Texture:egret. Texture = New Egret.            Texture (); Let Bitmapdata:egret. BitmapData = New Egret.       BitmapData (IMG);     Texture._setbitmapdata (BitmapData);        return texture;         }/** * Image format * @author Husz */export enum type_image_format2zip{_png = 0, _jpg = 1, _jpeg = 2, _bmp = 3, _WEBP = 4}

Test: Egret engine version: 5.2.6

First, the test environment:
①, bg.jpg pressurized to Bg.zip, egret_icon.png pressurized to Egret_icon.zip

②, add 2 Zip files to Default.res.json, and delete bg_jpg and egret_icon.png

Two, the code (modified main.ts in the Creategamescene ()) is as follows:/======================================================================= ======/

    /** * Creating Scene interface * Create scene interface */protected creategamescene (): void {//Let Sky = THIS.C        Reatebitmapbyname ("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 $$ $base 64:string = smallLib.CommonTool.arrayBufferToBase64 ($$ $buffer, smalllib.type_image_format2zip._jpg); Let $$ $sky: Eui. Image = new Eui.        Image ();        $$ $sky. Source = $$ $base 64;        $$ $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 ();        $$ $base = smallLib.CommonTool.arrayBufferToBase64 ($$ $buffer, smalllib.type_image_format2zip._png);        $$ $base = this.arraybuffertobase64 ($$ $buffer); Let $$ $texture: Egret.        Texture = this.gettexturebybase64 ($$ $base 64); Let $$ $icon: Eui. Image = new Eui.        Image ();        $$ $icon. Source = $$ $base 64;        $$ $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 $$ $bitmap 2icon:egret. Bitmap = New Egret.        Bitmap (_______texture);        $$ $bitmap 2icon.x = 26;        $$ $bitmap 2icon.y = 33;        This.addchild ($$ $bitmap 2Icon); 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); }

III: Results
①, under Chrome

②, under launch Wing player

Note: Egret. Bitmapdata.create method

IV: Conclusion
①: Use Eui. Image Direct receive base64 (string) There is no compatibility problem
②: Use Egret. Texture may not display on some browsers
I will continue to follow the answer ...

Egret's Jszip analysis picture