Day 26 - HBuilderX 与 Native.js API 读取图片

在 Day 25 - HBuilder X 产生 apk 已经完成使用 HBuilderX来打包 Android apk，接下来要做的是将观赏鱼辨识相关的功能实作到这个前端系统中，需要的功能分析如下：

使用相机跟相簿：这在打包 apk 时已经有设定权限了。
压缩图片，因为 YOLO 辨识不需要太高的解析度，可以将图片先压缩至宽度为 1024 就可以。
上传图片到 AWS EC2。
读取回传值，并显示结果。

设计画面

先设计画面，後面再针对功能来个别设计，画面部分成三部分，上面为标题，中间为图示，最下方提供两个按钮，分别提供从相机或是相册取得图片来源。

tap：首页包含了
- header：标题功能，如CWA 观赏鱼辨识
- du：图示，仅供美化介面。
- an：功能按钮，提供了两个功能
rq：第二页，用来呈现结果的画面，分别提供从相机或是相册取得图片来源。

<body>
    <div id="tap">

        <header id="header">
            <div class="tt">CWA 观赏鱼辨识</div>
        </header>
        
        <div id="dcontent" class="dcontent">
            <div id="tu">
                <img src="img/index/yu.jpg" />				
            </div>
            <div id="an">
                <li class="an" class="button button-select" onclick="appendByCamera()">
                    
                    <a href="#rq">
                        <img src="img/index/pz.png" />
                    </a>
                </li>
                <li class="an" class="button button-select" onclick="appendByGallery()">
                    <a href="#rq">
                        <img src="img/index/tk.png" />
                    </a>
                </li>	
            </div>
        </div>
    </div>

    <div id="rq">
        <div id="img-output"></div>
        <div id="output">  </div>
        <div id="img"></div>
        <div class="hiu"><a href="index.html">再来一张</a> </div>
    </div>
</body>

可以透过 HBuilderX 的预览功能看到画面的成果，如下图所示，除了可以预览成果，也可以指定希望在哪一种手机上的预览成果，目前设定的手机效果是 iPhone 6/7/8 的直式效果。

图 1、手机应用画面设计预览

接着要实现这两个函数：

appendByCamera() - 从相机中上传图片。
appendByGallery() - 从相册中上传图片。

而这需要应用到手机本身的功能，所以需要去查相关 5+ App 的开发 API中与相机相关跟与相册的手册

appendByCamera 方法主要的工作是：拍照；将照片存在相册中；将照片显示在应用中；将相片上传到 EC2 主机上，并显示出来。

appendByCamera()

// 从相机中获取图片并上传
function appendByCamera(){
	plus.camera.getCamera().captureImage(
        function(p){ # 拍照成功的回传函数
            # 将照片存在相册中
            plus.gallery.save(p, function(){});
            plus.io.resolveLocalFileSystemURL(p, function(pq) {
                pathPhoto = pq.toLocalURL();
                var str = '<img src="' + pathPhoto + '" width="100%">'
                # 将结果显示在 id='img-output' 的元件上
                outLineHTML(str);
            }, function(e) {});
            # 将相片上传到 EC2 主机上
            appendFile(p);
        });
}

appendByGallery 方法主要的工作是从相册中挑选图片；将照片显示在应用中；将相片上传到 EC2 主机上，并显示出来。

appendByGallery()

// 从相册中上传图片
function appendByGallery(){
	plus.gallery.pick(function(p){
		var str = '<img src="' + p + '" width="100%">';
		# 将结果显示在 id='img-output' 的元件上
        outLineHTML(str);
        # 将相片上传到 EC2 主机上
		appendFile(p);	
	});
}

appendFile 方法提供了压缩图片，上传图片，并显示结果的功能

appendFile()

var server="http://[EC2_PUBLIC_IP4]/imgUpload/";
var files=[];
var index=1;
function appendFile(p){
	files.push({name:"fileUpload"+index,path:p});
	var wt=plus.nativeUI.showWaiting();
    # 压缩图片至 1024
	plus.zip.compressImage({
		src:p,
		dst:"cm.jpg",
		quality:20,
		overwrite:true,
		width:'1024',
	}, function(i){
		plus.nativeUI.closeWaiting();
        # 上传图片
		var task=plus.uploader.createUpload(
			server,
			{method:"post"},
			function(t,status){ //上传成功，显示结果
				if (status == 200) {
					var tr = t.responseText;
					var utr = unescape(tr.replace(/\\u/gi, '%u'));
					var arr = JSON.parse(utr);
					var str = '<p>鱼名：'+arr[0].fishName+'</p><p>识别数量：'+arr[0].fishQtn+'</p><p>拉丁名：'+arr[0].LatinName+'</p><p>分布地区：'+arr[0].distribution+'</p>';
					outLine(str);
					var tu = '<img src="' + arr[0].processImg + '" width="100%">';
					outimg(tu);
					wt.close();
				}	else {
					outLine("上传失败："+status);
					wt.close();
				}
			}
		);
		task.addFile("cm.jpg",{key:"fileUpload"});
		task.start();
	},function(e){
		plus.nativeUI.closeWaiting();
		outLine("压缩图片失败: "+JSON.stringify(e));
	});
}

接着利用云打包，将整个应用打包成 apk 上传到手机上进行安装，安装成功後运行，画面如下。

图 2、手机应用执行画面