HTML5PlusHBuilder扫码拍照教程详解

本文详细讲解了在HBuilder中开发HTML5 Plus应用时，如何安全、高效地调用设备原生能力实现扫码、拍照和相册选图功能——从项目配置启用5+App支持、监听关键的plusready事件，到分别使用plus.barcode.scan、plus.camera.captureImage和plus.gallery.pick三大核心API完成实际操作，并特别强调所有功能仅在真机或5+App环境中生效、不可在浏览器中调试，同时提醒路径处理、错误捕获及文件持久化等易错细节，是开发者快速上手HTML5 Plus原生集成的实用指南。

如果您在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复制到应用沙箱目录。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。