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

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

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

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

设计画面

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

  • 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、手机应用执行画面

在小米手机上,利用拍照功能会产生压缩图片失败的画面,所以我们现在外面先拍下一张照片,如下图所示。

在这里插入图片描述
图 3、手机拍照图片

图片的资讯如下图所示,有 13.57 MB的空间。

在这里插入图片描述
图 4、照片资讯

在应用中透过相册选取该照片,上传供 EC2 进行辨识,辨识结果如下图。

在这里插入图片描述
图 5、辨识结果

而回到 AWS EC2 观看上传的图片,发现上传的档案 (cm.jpg) 只有 47 KB左右的空间容量,压缩了 288 倍。最重要的是,经 ARC 测试的结果,反而是原始档案是无法辨识的。

在这里插入图片描述
图 6、上传的照片资讯

在这里插入图片描述
图 7、Advanced REST Client上传原图的辨识结果

在手机上操作的感受,辨识的回传速度不到一秒内就完成,主要是因为上传的图片都经过处理了。至此,全端的实作已经算是告一个段落。

参考资料

  • h5+ camera API reference,https://www.html5plus.org/doc/zh_cn/camera.html
  • h5+ gallery API reference,https://www.html5plus.org/doc/zh_cn/gallery.html
  • DCloud产品综述, https://ask.dcloud.net.cn/docs/
  • HBuilderX 简介,https://hx.dcloud.net.cn/README
  • HBuilderX文档系统,https://hx.dcloud.net.cn/
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
swiperChange(e) { if (this.data.backChange) { this.setData({ backChange: false, }); return; } //计算第三个索引 let rest = 3 - e.detail.current - this.data.oldCurrent; let dif = e.detail.current - this.data.oldCurrent; let date; if (dif === -2 || (dif > 0 && dif !== 2)) { //向右划的情况,日期增加 if (this.data.open) { date = new Date(this.data.selectDay.year, this.data.selectDay.month); this.setMonth(date.getFullYear(), date.getMonth() + 1, undefined); this.getIndexList({ setYear: this.data.selectDay.year, setMonth: this.data.selectDay.month, dateIndex: rest, }); } else { date = new Date( this.data.selectDay.year, this.data.selectDay.month - 1, this.data.selectDay.day + 7 ); this.setMonth( date.getFullYear(), date.getMonth() + 1, date.getDate() ); this.getIndexList({ setYear: this.data.selectDay.year, setMonth: this.data.selectDay.month - 1, setDay: this.data.selectDay.day + 7, dateIndex: rest, }); } } else { //向左划的情况,日期减少 if (this.data.open) { date = new Date( this.data.selectDay.year, this.data.selectDay.month - 2 ); this.setMonth(date.getFullYear(), date.getMonth() + 1, undefined); this.getIndexList({ setYear: this.data.selectDay.year, setMonth: this.data.selectDay.month - 2, dateIndex: rest, }); } else { date = new Date( this.data.selectDay.year, this.data.selectDay.month - 1, this.data.selectDay.day - 7 ); this.setMonth( date.getFullYear(), date.getMonth() + 1, date.getDate() ); this.getIndexList({ setYear: this.data.selectDay.year, setMonth: this.data.selectDay.month - 1, setDay: this.data.selectDay.day - 7, dateIndex: rest, }); } } this.setData({ oldCurrent: e.detail.current, }); this.setSwiperHeight(e.detail.current); },
06-12
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值