Egret社区

Egret调用手机相册中的照片

2015-7-6 17:43
1760746
本帖最后由 guoshaorui 于 2015-8-29 16:28 编辑

8.29补充:修复了原代码中的错误,更新到这里:https://github.com/NeoGuo/egret_album_tool

需求:
Egret做一个MiniSite,运行环境是手机浏览器(包括微信),其中一个功能是可以让用户选择相册中的照片,在应用中展示,最后可以上传。

实现过程:
1.写一个第三方库,实现选取照片的功能
在当前项目下,新建一个目录,存放自己写的内库的代码(放在别的地方也可以,随你自己喜好)。这里将这个目录命名为ext,并且是位于当前项目中的。

然后我们这个内库叫什么呢?叫uploader吧。在ext目录中,再新建一个目录,叫做uploader。
然后在这个uploader目录中,新建一个uploader.d.ts文件。里面写上我们的方法定义:
[mw_shl_code=actionscript3,true]declare function selectImage(selectedHandler:Function,thisRef:any): void;[/mw_shl_code]
这个方法需要你传递一个回调函数,当用户选择了一种照片之后,会向这个函数传递照片数据。
当然这里.d.ts就是一个定义,我们还需要单独写一个js文件,来实现这个方法。在uploader目录中,新建一个uploader_h5.js,实现如下:
[mw_shl_code=actionscript3,true]var mime = {'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'bmp': 'image/bmp'};
var selectedHandler;
var thisRef;
function selectImage(selectedFunc,thisValue) {
    selectedHandler = selectedFunc;
    thisRef = thisValue;
    var fileInput = document.getElementById("fileInput");
    if(fileInput==null){
        fileInput = document.createElement("input");
        fileInput.id = "fileInput";
        fileInput.type = "file";
        fileInput.accept = "image/*";
        fileInput.style.height = "0px";
        fileInput.style.display = "block";
        fileInput.style.overflow = "hidden";
        document.body.insertBefore(fileInput,document.body.firstChild);
        fileInput.addEventListener('change', tmpSelectFile, false);
    }
    fileInput.click();
}
function tmpSelectFile(evt) {
    var file = evt.target.files[0];
    var type = file.type;
    if (!type) {
        type = mime[file.name.match(/\.([^\.]+)$/i)[1]];
    }
    var reader = new FileReader();
    function tmpLoad() {
        var re = /^data:base64,/;
        var ret = this.result + '';
        if (re.test(ret)) ret = ret.replace(re, 'data:' + mime[type] + ';base64,');
        tmpCreateImage && tmpCreateImage(ret);
    }
    reader.onload = tmpLoad;
    reader.readAsDataURL(file);
}
function tmpCreateImage(uri) {
    selectedHandler & selectedHandler(thisRef,uri);
}
[/mw_shl_code]
实现过程并不复杂,只是利用type="file"的input标签来实现选择照片的功能。

然后还需要创建一个uploader.json文件,增加如下内容:
[mw_shl_code=javascript,true]{
    "name":"uploader",
    "source":"./",
    "file_list":["uploader_h5.js","uploader.d.ts"]
}[/mw_shl_code]
这是做第三方库的标准格式。

2.使用方式
先打开项目的egretProperties.json文件,把我们写的库配置一下(在modules部分增加):
[mw_shl_code=javascript,true]{
        "name": "uploader",
        "path": "ext/uploader"
}[/mw_shl_code]

测试:
[mw_shl_code=actionscript3,true]private doSelect(evt:egret.TouchEvent):void {
        selectImage(this.selectedHandler,this);
    }
    private selectedHandler(thisRef:any,imgURL:string):void {
        RES.getResByUrl(imgURL,thisRef.compFunc,thisRef,RES.ResourceItem.TYPE_IMAGE);
    }
    private compFunc(texture:egret.Texture):void {
        var imgReview:egret.Bitmap = new egret.Bitmap(texture);
        imgReview.width = 300;
        imgReview.height = 300;
        this.addChild(imgReview);
    }[/mw_shl_code]
分享到 :
27 人收藏

46 个回复

倒序浏览
keon666  登堂入室 | 2015-7-7 09:28:10
终于又等到郭大虾的帖子了,又学到新东西了。再请问一下郭大虾我现在正在尝试用filereader访问本地文件,可行不呀?
keon666  登堂入室 | 2015-7-7 11:29:14
郭大虾 ,我的怎么build报错: error TS2304: Cannot find name 'selectImage'?
guoshaorui  超级斑竹 | 2015-7-7 11:41:32
keon666 发表于 2015-7-7 11:29
郭大虾 ,我的怎么build报错: error TS2304: Cannot find name 'selectImage'?

配置第三方库后,编译项目要加上-e
egret build xxx -e
keon666  登堂入室 | 2015-7-7 12:41:07
guoshaorui 发表于 2015-7-7 11:41
配置第三方库后, 编译项目要加上-e
egret build xxx -e

谢谢郭大虾,我还真是菜鸟呀!
guoshaorui  超级斑竹 | 2015-7-7 13:21:30
keon666 发表于 2015-7-7 09:28
终于又等到郭大虾的帖子了,又学到新东西了。再请问一下郭大虾我现在正在尝试用filereader访问本地文件,可 ...

Java吗?安卓APP?
如果是在APP里面,权限就比WEB上大多了,可以做很多WEB上做不到的事情,比如文件存储。
这个可能你要写成扩展,和Egret进行通讯。
keon666  登堂入室 | 2015-7-7 14:00:10
guoshaorui 发表于 2015-7-7 13:21
Java吗?安卓APP?
如果是在APP里面,权限就比WEB上大多了,可以做很多WEB上做不到的事情,比如文件存储 ...

就在web上,就比如在Hello Egret的项目中,点击白鹭图片,就可以调用本地文件管理选择一张图片然后加载到Hello Egret的页面中!
guoshaorui  超级斑竹 | 2015-7-7 15:11:14
keon666 发表于 2015-7-7 14:00
就在web上,就比如在Hello Egret的项目中,点击白鹭图片,就可以调用本地文件管理选择一张图片然后加载到 ...

噢,说的是这个,那应该可以的,这个例子里,你看看用的就是FileReader
BigCattle  初学乍练 | 2015-7-8 11:42:51
你好,我不是很明白测试细节,比如说相册是怎么调出来的,现在莫法选择相册中的图片呀?
guoshaorui  超级斑竹 | 2015-7-8 20:26:46
BigCattle 发表于 2015-7-8 11:42
你好,我不是很明白测试细节,比如说相册是怎么调出来的,现在莫法选择相册中的图片呀? ...

附上例子源码 UploaderDemo.zip (546.95 KB, 下载次数: 388)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部