HTML5Plus调用API实现扫码拍照教程

本文详解了在HBuilder中开发HTML5 Plus应用时，如何正确调用原生设备能力实现扫码、拍照和相册选图功能——从启用5+App支持、监听plusready事件确保API可用，到分别使用plus.barcode.scan、plus.camera.captureImage和plus.gallery.pick完成三大核心操作，并强调所有API仅在真机或5+App环境中生效，规避常见调试误区，为混合开发中高效集成原生能力提供了清晰、可靠、即学即用的实践指南。

如果您在HBuilder中开发HTML5 Plus应用，需要调用设备原生能力如扫码、拍照等，则必须通过HTML5 Plus的JavaScript API进行操作。以下是具体使用步骤：

一、确认项目已启用HTML5 Plus支持

HTML5 Plus API仅在5+ App运行环境中可用，普通浏览器或WebView无法调用。需确保项目已打包为5+ App或在HBuilder真机运行调试模式下启动。

1、在HBuilder中右键点击项目根目录，选择“转换为5+App项目”。

2、检查项目根目录下是否存在manifest.json文件，并确认其中"plus"节点存在且未被禁用。

3、运行时选择“真机运行”或“云打包”，严禁在Chrome等浏览器中直接打开index.html测试Plus API。

二、获取plus对象并等待onloaded事件

HTML5 Plus的全局对象plus并非立即可用，必须等待plusready事件触发后才能安全调用API。

1、在页面

2、编写onPlusReady函数，在其中执行后续API调用逻辑。

3、未监听plusready就直接调用plus.camera.getCamera()等方法将返回undefined或报错。

三、调用扫码功能

使用plus.barcode.scan可启动系统级扫码界面，支持二维码、条形码等多种格式识别。

1、在onPlusReady函数内调用：plus.barcode.scan(successCB, errorCB);

2、定义成功回调函数successCB，接收参数result，其result.text即为扫描到的内容。

3、定义失败回调函数errorCB，接收错误对象，可读取message属性获知失败原因。

4、扫码过程会自动切换至原生摄像头界面，无需自行创建video元素。

四、调用拍照功能

通过plus.camera.getCamera()获取摄像头对象，再调用captureImage执行拍照并保存到本地。

1、调用var c = plus.camera.getCamera();获取默认后置摄像头。

2、执行c.captureImage(function(path){ console.log("照片路径："+path); }, function(e){ alert("拍照失败"); });

3、照片路径为本地绝对路径（如_www/images/xxx.jpg），可配合plus.io.resolveLocalFileSystemURL读取文件信息。

4、captureImage不支持直接返回base64，需额外使用plus.zip.compressImage压缩或plus.io.readAsDataURL读取。

五、访问相册选取图片

使用plus.gallery.pick可调起系统相册选择器，允许用户从已有图片中选取一张。

1、调用plus.gallery.pick(successCB, cancelCB, {system:true});

2、成功回调中files数组第一个元素的path即为选中图片路径。

3、设置{system:true}确保调起原生相册而非网页文件选择器。

4、pick方法返回的是临时路径，若需长期保存，必须使用plus.io.copyTo复制到应用沙箱目录。

本篇关于《HTML5Plus调用API实现扫码拍照教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！