Egret之JSZip解析图片

将图片加压到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 可能在某些浏览器上无法显示
本人会持续跟踪给出答案......

原文地址:http://blog.51cto.com/aonaufly/2165614

时间: 2024-10-13 19:23:58

Egret之JSZip解析图片的相关文章

OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据

OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据 我们这片博文就来聊聊这个反响很不错的OkHttp了,标题是我恶搞的,本篇将着重详细的分析,探索OkHttp这个框架的使用和封装 一.追其原理 Android系统提供了两种HTTP通信类 HttpURLConnection HttpClient Google推荐使用HttpURLConnection,这个没必要多说,事实上,我这篇写的应该算是比较晚了,很多优秀的博文都已经提出了这些观

libjpeg内存解析图片

之前使用opencv在内存中解析图片,发现当解析错误的时候,程序直接崩溃.于是乎就重新把libjpeg封装一下,把容错性给做好.具体代码如下: Image.h #ifndef  __IMAGE_H #define  __IMAGE_H #include <iostream> #include <vector> using namespace std; //加载libjpeg #include "libjpeg/jpeglib.h" #pragma  commen

Java 遍历文件下jpg图片并解析图片

  1 package filetest; 2 3 import java.io.File; 4 import java.io.FilenameFilter; 5 import java.io.IOException; 6 import java.util.ArrayList; 7 8 import com.drew.imaging.jpeg.JpegMetadataReader; 9 import com.drew.imaging.jpeg.JpegProcessingException; 1

解决Android解析图片的OOM问题!!!(转)

大家好,今天给大家分享的是解决解析图片的出现oom的问题,我们可以用BitmapFactory这里的各种Decode方法,如果图片很小的话,不会出现oom,但是当图片很大的时候 就要用BitmapFactory.Options这个东东了,Options里主要有两个参数比较重要. [java] view plaincopy options.inJustDecodeBounds = false/true; //图片压缩比例. options.inSampleSize = ssize; 我们去解析一个

Android:漫画APP开发笔记之从WAP网站解析图片地址并加载图片

一.使用Jsoup解析网页 <pre><code class="prettyprint"><span class="typ">Document</span><span class="pln"> doc </span><span class="pun">=</span><span class="pln">

html5 解析图片

一 图片预览HTML5给web开发带来很多好东西,可以说,它将开创新一代web开发.其中canvas就是它带来的东西之一,canvas非常强大,可以做到很多东西.这里只是展示一个简单的canvas效果.如下图:二 原理介绍在代码中通过ctx.getImageData(0,0,width,height);获取canvas里面的imagedata对象,而这个对象就是这个效果实现的关键.通过imagedata.data来获取一个数组,这个数组的length是canvas像素数量的四倍,其中每四个项代表

BBS项目解析图片

跟评论完成效果: 子评论 回复按钮绑定点击按钮 代码: 效果: 实现发送内容: 后端添加: 实现: 切割 后台管理 拿像信息: 代码: 代码: 效果: 后端: 前端: 添加 uploading-image-750833.png 后端分页器 分页器前端 效果: urls.py views.py add_artilic.py 优化后: 效果: 效果: 调框大小: 效果: 上下滑动 效果 右边可以上下滑动 后端 views.py,操作数据库 前端:添加 效果: 如何完善添加文章问题 对上述问题的解决方

Android Bitmap 全面解析(一)加载大尺寸图片

压缩原因:1.imageview大小如果是200*300那么加载个2000*3000的图片到内存中显然是浪费可耻滴行为;2.最重要的是图片过大时直接加载原图会造成OOM异常(out of memory内存溢出)所以一般对于大图我们需要进行下压缩处理权威处理方法参考 安卓开发者中心的大图片处理教程http://developer.android.com/training/displaying-bitmaps/load-bitmap.html看不懂英文的话木有关系,本篇会有介绍主要处理思路是:1.获

Android xUtils3源码解析之图片模块

初始化 x.Ext.init(this); public static void init(Application app) { TaskControllerImpl.registerInstance(); if (Ext.app == null) { Ext.app = app; } } public final class TaskControllerImpl implements TaskController { public static void registerInstance()