本文转载自《OpenHarmony 利用实现二维码扫码辨认》，作者 zhushangyuan_
概念介绍
二维码的利用场景十分宽泛，在购物利用中，消费者能够间接扫描商品二维码，浏览并购买产品，如图是购物利用的扫描二维码的页面。
本文就以橘子购物示例利用为例，来解说 OpenHarmony 利用二维码开发相干的技术点。
咱们先看下二维码相干的几个概念。
● 二维码生成
OpenHarmony 利用框架提供了QRCode组件，用于显示单个二维码的组件。该组件只能用于显示二维码，无奈显示条码与解析码内容。
● 二维码解析
OpenHarmony 提供了功能强大的三方库 @ohos/zxing，是一个解析/生成一维码/二维码的库。具体内容能够参考@ohos/zxing。
二维码解析时，通常有两种形式，应用相机拍摄获取图片或关上相册选取图片，而后图片解析适合的图片格式，进行二维码解析。
橘子购物示例利用扫描二维码的示例图：
配置文件
理解了二维码相干的概念后，咱们看下橘子购物示例利用的 oh-package.json5 配置文件。
在橘子购物示例利用中，实现首页二维码扫描的页面的文件地位为：
entry/src/main/ets/pages/ScanPage.ets。文件内容如下：
import { QRCodeScanComponent } from "@ohos/scan-component"@Entry@Componentstruct Scan { build() { Column() { QRCodeScanComponent() } }}内容非常简单，次要是导入的自定义组件 QRCodeScanComponent，这个组件的代码来自：二维码扫描示例利用，后文咱们这样剖析如何开发这个二维码扫描利用。从这一行，能够理解到 OpenHarmony 利用如何援用 ohpm 本地三方库。
"@ohos/scan-component":"file:../libs/ohos-qr-code-scan-1.0.1.har",oh-package.json5 配置文件片段如下：
{ "license": "ISC", "devDependencies": {}, "name": "product", "description": "example description", "repository": {}, "version": "1.0.0", "dependencies": { "@ohos/http": "file:../libs/ohos-http-1.0.0.tgz", "@ohos/video-component": "file:../libs/ohos-video-component-1.0.5.tgz", "@ohos/details-page-component": "file:../feature/detailPage", "@ohos/notification": "file:../libs/ohos-notification-1.0.0.tgz", "@ohos/scan-component": "file:../libs/ohos-qr-code-scan-1.0.1.har", "@ohos/updatedialog": "file:../libs/ohos-updatedialog-1.0.0.tgz", "@ohos/enter-animation": "file:../libs/ohos-enter-animation-1.0.1.tgz", "@ohos/share-component": "file:../libs/ohos-sharecomponent-1.0.1.tgz", "@ohos/emitter": "file:../feature/emitter", "@ohos/navigation-component": "file:../feature/navigationHome" }}开发步骤
咱们来看二维码扫描性能是如何开发的。
导入 ohpm 三方库
在开发前，咱们须要导入 ohpm 组件库：@ohos/zxing。能够应用命令行形式导入 ohpm install @ohos/zxing，也能够间接在文件entry\oh-package.json5中配置，如文件片段所示。
能够看出，二维码扫描的外围代码寄存在 Feature 目录，是一个独立的 module 模块，不便复用：“@ohos/feature-qr-code-scan”: “file:…/Feature”。
文件entry\oh-package.json5片段:
"dependencies": { "@ohos/feature-qr-code-scan": "file:../Feature", "@ohos/zxing": "^2.0.0" } 相机服务
CameraService.ets文件相机服务构造函数中，会创立一个图片接收器。该图片接收器能够监听’imageArrival’事件，当相机拍照时会触发该事件。在监听事件的回调函数里，实现对拍照的图片进行解决。
CameraService.ets 文件相机服务构造函数：
constructor(imgReceiver?: image.ImageReceiver) { if (imgReceiver === undefined) { this.imageReceiver = image.createImageReceiver(QRCodeScanConst.IMG_DEFAULT_SIZE.WIDTH, QRCodeScanConst.IMG_DEFAULT_SIZE.HEIGHT, image.ImageFormat.JPEG, QRCodeScanConst.MAX_IMAGE_CAPACITY) } else { this.imageReceiver = image.createImageReceiver(imgReceiver.size.width, imgReceiver.size.height, imgReceiver.format, imgReceiver.capacity) } }在CameraService.ets文件创建相机函数中，次要蕴含如下几个步骤：
● 获取反对的相机
依据 context 获取 CameraManager，而后获取反对的相机（摄像头）。如果没有反对的相机，则而后。
如有反对的相机，则默认应用相机列表中的第一个。理论利用中，对于二维码扫描，须要应用后置相机摄像头。
● 获取相机输入输出流
首先，依据指定的相机，创立相机输出流 this.cameraInput。
而后，获取相机的 cameraOutputCapability 参数，接着创立两个输入流：
1、 预览输入流创立相机预览输入流 this.previewOutput，应用的 surfaceId 来自 XComponent 组件。预览输入流，对应相机拍照前的图片预览。
2、相片输入流创立相片输入流 this.photoOutput，应用的 receivingSurfaceId 来自上文创立的图片接收器。相片输入流，用于保留到相片。
● 配置相机会话
配置相机会话，也比较简单，增加输出流和输入流即可，见代码及其正文。CameraService.ets 文件创建相机函数：
/** * 创立相机 */ async createCamera(surfaceId: string) { Logger.info("createCamera start") // 依据context获取CameraManager let cameraManager = camera.getCameraManager(AppStorage.Get('context')) // 获取Camera对象数组 let cameras = cameraManager.getSupportedCameras() // 没有相机就进行 if (cameras.length === 0) { Logger.error("createCamera: cameras length is 0.") return } // 拿到相机列表中的第一个默认相机id, 依据id获取相机输出流 this.cameraInput = cameraManager.createCameraInput(cameras[0]) this.cameraInput.open() // 获取cameraOutputCapability参数 let cameraOutputCapability = cameraManager.getSupportedOutputCapability(cameras[0]) // 获取相机输入流 this.previewOutput = cameraManager.createPreviewOutput(cameraOutputCapability.previewProfiles[0], surfaceId) // 获取一个能够创立相片输入流的id let receivingSurfaceId = await this.imageReceiver.getReceivingSurfaceId() // 创立相片输入流 this.photoOutput = cameraManager.createPhotoOutput(cameraOutputCapability.photoProfiles[0], receivingSurfaceId) // 获取捕捉会话的实例 this.captureSession = cameraManager.createCaptureSession() // 开始会话配置 this.captureSession.beginConfig() // 应用相机输出流---增加一个摄像头输出流 this.captureSession.addInput(this.cameraInput) // 应用相机输入流---增加一个摄像头输入 this.captureSession.addOutput(this.previewOutput) // 应用相片输入流---增加相机照片的输入 this.captureSession.addOutput(this.photoOutput) // 完结并提交配置 await this.captureSession.commitConfig() // 开始捕捉会话 await this.captureSession.start() Logger.info("createCamera end") }CameraService.ets文件拍照函数中，指定相片参数设置，而后调用capture()函数实现拍照。
拍照后会触发图片接收器的’imageArrival’事件。拍照函数在应用相机扫描二维码的时候调用。
该图片接收器能够监听’imageArrival’事件，当相机拍照时会触发该事件。在监听事件的回调函数里，实现对拍照的图片进行解决。
CameraService.ets文件拍照函数：
takePicture() { let photoSetting = { rotation: camera.ImageRotation.ROTATION_0, quality: camera.QualityLevel.QUALITY_LEVEL_MEDIUM, mirror: false } this.photoOutput.capture(photoSetting) }二维码解析实现代码
二维码解析类文件为：QRCodeParser.ets，反对拍照辨认二维码，还反对从相册抉择二维码图片进行辨认。
咱们首先看下如何解析从相机获取的二维码图片，对应函数为：parseQRCodeImageFromCamera，该类指定一个工夫随机的图片文件名，图片归档格局，而后持续调用函数 parseQRCodeImageWithNameFromCamera。
/** * 解析从相机获取的二维码图片 * * @param cameraService * @param canvasContext */ parseQRCodeImageFromCamera(cameraService: CameraService, imageComponentType?: image.ComponentType): void { Logger.info("parseQRCodeImageFromCamera start") let fileName = this.getRandomFileName(QRCodeScanConst.IMG_FILE_PREFIX, QRCodeScanConst.IMG_SUFFIX_JPG) this.parseQRCodeImageWithNameFromCamera(cameraService, fileName, imageComponentType); Logger.info("parseQRCodeImageFromCamera end") }在函数parseQRCodeImageWithNameFromCamera中，注册图片接收器监听’imageArrival’事件，在监听函数里，对二维码图片进行解析辨认。
当相机对二维码拍照后，二维码图片会被保留到指定的目录下，返回文件URI。保留图片的函数createPublicDirFileAsset的实现，能够自行查阅源码。
依据返回的图片URI，调用函数parseImageQRCode对二维码进行解析。函数parseImageQRCode后文会介绍。
如果解析失败，弹窗提醒解析失败。如果解析胜利，会被解析后果保留到AppStorage。
保留到AppStorage的二维码解析后果会被@watch装璜器的变量监督，当监督到有二维码辨认后果后，会在界面展现，后文会介绍。
QRCodeParser.ets文件parseQRCodeImageWithNameFromCamera函数代码：
/** * 解析从相机获取的二维码图片，指定文件名称 * * @param cameraService * @param canvasContext */ parseQRCodeImageWithNameFromCamera(cameraService: CameraService, fileDisplayName: string, imageComponentType?: image.ComponentType): void { Logger.info("parseQRCodeImageWithNameFromCamera...") cameraService.imageReceiver.on('imageArrival', async () => { Logger.info("parseQRCodeImageWithNameFromCamera imageArrival start") // 从接收器获取下一个图像，并返回后果 let targetImage: image.Image = await cameraService.imageReceiver.readNextImage() // 默认按JPEG格局解决 let imgComponentType = imageComponentType === undefined ? image.ComponentType.JPEG : imageComponentType let imageComponent = await targetImage.getComponent(imgComponentType) // 将image的ArrayBuffer写入指定文件中，返回文件uri let imageUri = await this.createPublicDirFileAsset(fileDisplayName, mediaLibrary.MediaType.IMAGE, mediaLibrary.DirectoryType.DIR_IMAGE, imageComponent.byteBuffer); // 开释已读取的image资源，以便解决下一个资源 await targetImage.release() // 解析二维码 let qrCodeParseRlt = await this.parseImageQRCode(imageUri); if (!qrCodeParseRlt.isSucess) { Logger.error("parseQRCodeImageWithNameFromCamera qrCodeParseRlt is null") prompt.showToast({ message: $r('app.string.qrCodeNotRecognized') }) return; } // 拼接解析后果 AppStorage.SetOrCreate(QRCodeScanConst.QR_CODE_PARSE_RESULT, qrCodeParseRlt.decodeResult); Logger.info("parseQRCodeImageWithNameFromCamera imageArrival end") }) }二维码解析类文件为：QRCodeParser.ets，反对拍照辨认二维码，还反对从相册抉择二维码图片进行辨认。
咱们接着，再看下如何解析从相册里筛选的二维码图片。
参数 imageSrc 为选定图片的 URI 地址。
getImageSource()代码能够自行查问，实现依据图片 URI 返回图片的宽、高，以及图片的 pixelMap 数据。而后，把像素数据写入 ArrayBuffer，供 zxing 二维码辨认程序应用。
函数 RGBLuminanceSource、BinaryBitmap、BinaryBitmap 等都是 zxing 的类。通过调用 MultiFormatReader 的 decode 函数对二维码图像进行解析。
如果解析胜利，会返回胜利的标记和解析的后果。
如果解析失败，会在 catch 语句块里进行解决，会返回失败的标记和解析失败的起因。
QRCodeParser.ets 文件 parseImageQRCode 函数代码：
/** * 解析图片二维码信息 * @param canvasContext * @param imageSrc */ async parseImageQRCode(imageSrc: string): Promise<DecodeResultAttribute> { Logger.info(`parseImageQRCode start`); // 获取图片的宽高 let imageSource = await this.getImageSource(imageSrc); let imageWidth = imageSource.width; let imageHeight = imageSource.height; // 获取PixelMap图片数据 let pixMapData = imageSource.pixelMap; let pixelBytesNumber = pixMapData.getPixelBytesNumber(); let arrayBuffer: ArrayBuffer = new ArrayBuffer(pixelBytesNumber); // 读取图像像素数据，后果写入ArrayBuffer里 await pixMapData.readPixelsToBuffer(arrayBuffer); let int32Array = new Int32Array(arrayBuffer); let luminanceSource = new RGBLuminanceSource(int32Array, imageWidth, imageHeight); let binaryBitmap = new BinaryBitmap(new HybridBinarizer(luminanceSource)); let mltiFormatReader = new MultiFormatReader(); let hints = new Map(); hints.set(DecodeHintType.POSSIBLE_FORMATS, [BarcodeFormat.QR_CODE]); mltiFormatReader.setHints(hints); try { // 解析二维码 let decodeResult = mltiFormatReader.decode(binaryBitmap); let decodeText = decodeResult.getText(); Logger.info(`parseImageQRCode end ${decodeText}`); return { isSucess: true, decodeResult: decodeText }; } catch (err) { let error = `The error is ${err}`; Logger.info(`parseImageQRCode end`); return { isSucess: false, decodeResult: error }; } }相机扫描辨认二维码
在文件QRCodeScanComponent.ets中实现了二维码扫描自定义组件。咱们看下该文件中如何实现相机扫描二维码的。
在二维码扫描组件的 aboutToAppear()函数调用的 watchCameraPermission()函数，用于应用相机扫描二维码进行辨认。
在 watchCameraPermission()函数中，应用 setInterval 函数每 100ms 判断下是否具备相机权限，当有相机权限的时候，能力应用相机扫描二维码。
当具备相机权限时 ，应用 setInterval 函数每 4000ms 轮询判断下是否辨认到二维码图片，如果辨认到则勾销执行轮询。
如果没有辨认到二维码，则持续调用函数 takePicture()拍照。调用该函数后，会触发图片接收器的监听事件’imageArrival’，对这个事件的监听剖析，见上文。
文件 QRCodeScanComponent.ets 中，相机拍照辨认二维码的代码片段：
aboutToAppear() {// 监听相机权限this.watchCameraPermission()// 设置扫描动画this.setQRCodeScanAnimation()// 解析二维码图片信息this.qrCodeParser.parseQRCodeImageFromCamera(this.cameraService);}......// 监听相机权限变动watchCameraPermission() {let interval = setInterval(() => { this.hasCameraPermission = AppStorage.Get(QRCodeScanConst.HAS_CAMERA_PERMISSION) if (this.hasCameraPermission) { let qrCodeScanInterval = setInterval(() => { if (this.qrCodeParseResult.length > 0 || this.isQRCodeScanStopped) { clearInterval(qrCodeScanInterval) } // 拍照 this.cameraService.takePicture() }, 4000) clearInterval(interval) }}, 100)}辨认相册二维码图片
在文件QRCodeScanComponent.ets中实现了二维码扫描自定义组件。咱们看下该文件中如何辨认相册二维码图片。
首先，设置 this.isQRCodeScanStopped 为 true，这个会敞开相机拍照辨认二维码。
而后，通过 startAbilityForResult 启动相册利用，供用户抉择二维码图片。
如果抉择图片失败，则弹窗报错。
如果抉择图片胜利，则调用二维码解码函数 parseImageQRCode 实现对图片二维码的辨认。
如果辨认二维码胜利，则弹窗展现二维码后果。
如果辨认辨认，则 toast 展现：未辨认到二维码。
文件 QRCodeScanComponent.ets 中，相册抉择二维码图片进行辨认代码片段：
Image($r('app.media.scan_photo')) .width(30) .height(30) .id('scanPhoto') .onClick(async () => { // 关上相册获取图片 this.isQRCodeScanStopped = true let context = AppStorage.Get('context') as common.UIAbilityContext await context.startAbilityForResult({ parameters: { uri: 'singleselect' }, bundleName: 'com.ohos.photos', abilityName: 'com.ohos.photos.MainAbility', }).then(data => { // 获取want数据 let want = data['want']; if (want) { // param代表want参数中的paramters let param = want['parameters']; if (param) { // 被选中的图片门路media/image/8 let selectedUri = param['select-item-list']; setTimeout(async () => { if (!selectedUri) { prompt.showToast({ message: $r('app.string.queryImageFailed'), duration: 1000 }) return; } // 获取解析数据 let qrCodeParseRlt = await this.qrCodeParser.parseImageQRCode(selectedUri[0]); if (qrCodeParseRlt.isSucess) { prompt.showDialog({ title: $r('app.string.qrcodeResult'), message: qrCodeParseRlt.decodeResult }) } else { prompt.showToast({ message: $r('app.string.qrCodeNotRecognized') }) } }, 50) } } }) })二维码扫描组件界面
在文件QRCodeScanComponent.ets中实现了二维码扫描自定义组件。咱们看下二维码扫描组件的页面布局。
整个页面应用 Stack 进行重叠布局。
如果有相机权限，会 XComponent 组件，用于展现相机的预览输入流。XComponent 组件的 onLoad 函数里会创立相机，onDestroy 函数里会开释相机。
Image($r('app.media.scan_border'))图片就是二维码扫描框，疏导用户把二维码放到框内进行扫描辨认。
Divider 是个分割线，该分割线使能了动画成果，在辨认二维码的过程中，分割线从二维码辨认框里从上到下挪动。扫描动画实现代码如下：
// 扫描扫描动画 setQRCodeScanAnimation() { setInterval(() => { animateTo({ duration: 1000, // 动画工夫 tempo: 0.5, // 动画速率 curve: Curve.EaseInOut, delay: 200, // 动画延迟时间 iterations: -1, // 动画是否反复播放 playMode: PlayMode.Normal, }, () => { this.animationOrdinate = 390 // 扫描动画完结Y坐标 }) }, 2000) }Text($r('app.string.putTheQRCodeToScan'))疏导用户把二维码放到框内进行扫描辨认。
Image($r('app.media.scan_back'))返回退出利用。
Image($r('app.media.scan_photo'))从相册里筛选二维码图片进行辨认。
build() {Column() { Stack() { if (this.hasCameraPermission) { XComponent({ id: 'componentId', type: 'surface', controller: this.xComponentController }) .onLoad(() => { // 适配可能须要获取设施信息 this.xComponentController.setXComponentSurfaceSize({ surfaceWidth: QRCodeScanConst.IMG_DEFAULT_SIZE.WIDTH, surfaceHeight: QRCodeScanConst.IMG_DEFAULT_SIZE.HEIGHT }) this.surFaceId = this.xComponentController.getXComponentSurfaceId() this.cameraService.createCamera(this.surFaceId) }) .onDestroy(() => { this.cameraService.releaseCamera() }) .height('100%') .width('100%') } Column() { Column() { Image($r('app.media.scan_border')) ...... Divider() .strokeWidth(1) .height(4) .width('100%') .color(Color.White) .width('100%') .position({ x: 0, y: 0 }) .translate({ x: 0, y: this.animationOrdinate }) } ...... Text($r('app.string.putTheQRCodeToScan')) ...... } ...... Row() { Image($r('app.media.scan_back')) ...... Row({ space: 16 }) { Image($r('app.media.scan_photo')) ......}运行测试成果
能够下载橘子购物示例利用代码，应用 DevEco Studio 编译构建，应用 Simulator 模拟器或者实在设施进行运行体验。能够体验下应用相机对二维码图片进行辨认，还能够尝试下辨认相册中的二维码图片。
git initgit config core.sparsecheckout trueecho code/Solutions/Shopping/OrangeShopping/ > .git/info/sparse-checkoutgit remote add origin https://gitee.com/openharmony/applications_app_samples.gitgit pull origin master注意事项
以后二维码示例利用辨认相册的二维码，弹出辨认后果后，程序会解体，曾经提单跟踪。示例程序待改良。
应用相机性能间接拍摄二维码的性能，始终没有胜利运行，须要进一步优化。
参考资料
橘子购物示例利用
二维码扫描示例利用
@ohos/zxing
QRCode组件
相机开发概述
图片开发概述
XComponent