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

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

然后我们这个内库叫什么呢?叫uploader吧。在ext目录中,再新建一个目录,叫做uploader。
然后在这个uploader目录中,新建一个uploader.d.ts文件。里面写上我们的方法定义:
declare function selectImage(selectedHandler:Function,thisRef:any): void;

这个方法需要你传递一个回调函数,当用户选择了一种照片之后,会向这个函数传递照片数据。
当然这里.d.ts就是一个定义,我们还需要单独写一个js文件,来实现这个方法。在uploader目录中,新建一个uploader_h5.js,实现如下:
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);
}

实现过程并不复杂,只是利用type=”file”的input标签来实现选择照片的功能。

然后还需要创建一个uploader.json文件,增加如下内容:
{
“name”:”uploader”,
“source”:”./“,
“file_list”:[“uploader_h5.js”,”uploader.d.ts”]
}

这是做第三方库的标准格式。

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

测试:
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);
}