鸿蒙原生应用实战（八）ArkUI 二维码生成与扫描器：Camera 扫码 + Canvas 生成

📷 鸿蒙原生应用实战（八）ArkUI 二维码生成与扫描器：Camera 扫码 + Canvas 生成

博主说：二维码无处不在——扫码支付、扫码加好友、扫码登录……今天这篇实战带你用 ArkUI 的 Camera API + Canvas 绘图，实现一个支持摄像头实时扫码、文本生成二维码、扫码历史记录的完整二维码工具。

📱 应用场景

⚙️ 运行环境要求

🛠️ 实战：二维码生成与扫描

Step 1：二维码数据编码算法

QR 码的核心流程：

输入文本 → 数据分析 → 纠错编码 → 数据编码 → 矩阵放置 → 掩模 → 格式信息 → 生成 QR 码

纠错等级：

Step 2：完整代码

// pages/Index.ets — 二维码生成与扫描importcamerafrom'@ohos.multimedia.camera';importimagefrom'@ohos.multimedia.image';@Entry@Componentstruct QRCodeApp{@StatecurrentTab:'scan'|'generate'='scan';@StateinputText:string='';@StateqrSize:number=200;@StatescanResult:string='';@StateflashOn:boolean=false;@Statehistory:{text:string;time:string}[]=[];privatecameraInput!:camera.CameraInput;// ======== 生成二维码 ========@StateqrCodeData:number[][]=[];generateQRCode(){if(!this.inputText.trim())return;// 简化版QR码生成（实际使用libqrencode）// 这里用Canvas绘制模拟QR码this.qrCodeData=this.simulateQRCode(this.inputText);this.history.unshift({text:this.inputText,time:newDate().toLocaleString()});}simulateQRCode(text:string):number[][]{// 基于文本长度生成矩阵大小constsize=21+Math.floor(text.length/10)*4;constmatrix:number[][]=[];// 用简单hash生成黑白矩阵（真实项目用RS编码）for(leti=0;i<size;i++){matrix[i]=[];for(letj=0;j<size;j++){if(i<7||i>=size-7||j<7||j>=size-7){matrix[i][j]=1;// 定位图案}else{consthash=((i*31+j*17+text.length)%3)!==0?1:0;matrix[i][j]=hash;}}}returnmatrix;}// ======== 二维码画布绘制 ========privatecanvasCtx!:CanvasRenderingContext2D;drawQRCode(){if(!this.canvasCtx||this.qrCodeData.length===0)return;constctx=this.canvasCtx;constsize=this.qrSize;constcellSize=size/this.qrCodeData.length;ctx.clearRect(0,0,size,size);ctx.fillStyle='#fff';ctx.fillRect(0,0,size,size);for(leti=0;i<this.qrCodeData.length;i++){for(letj=0;j<this.qrCodeData[i].length;j++){if(this.qrCodeData[i][j]){ctx.fillStyle='#000';ctx.fillRect(j*cellSize,i*cellSize,cellSize,cellSize);}}}// 中心图标ctx.fillStyle='#007AFF';ctx.beginPath();ctx.arc(size/2,size/2,cellSize*2,0,Math.PI*2);ctx.fill();ctx.fillStyle='#fff';ctx.font=`${cellSize*2}px sans-serif`;ctx.textAlign='center';ctx.textBaseline='middle';ctx.fillText('✓',size/2,size/2);}// ======== 切换闪光灯 ========toggleFlash(){this.flashOn=!this.flashOn;try{if(this.cameraInput){this.cameraInput.setFlashMode(this.flashOn?camera.FlashMode.FLASH_MODE_OPEN:camera.FlashMode.FLASH_MODE_CLOSE);}}catch{}}build(){Column(){// ---- Tab 切换 ----Row(){Button('📷 扫码').width('50%').height(40).backgroundColor(this.currentTab==='scan'?'#007AFF':'#F0F0F0').fontColor(this.currentTab==='scan'?'#fff':'#333').borderRadius(0).fontSize(16).onClick(()=>{this.currentTab='scan';})Button('📲 生成').width('50%').height(40).backgroundColor(this.currentTab==='generate'?'#007AFF':'#F0F0F0').fontColor(this.currentTab==='generate'?'#fff':'#333').borderRadius(0).fontSize(16).onClick(()=>{this.currentTab='generate';})}.width('100%')if(this.currentTab==='scan'){// ---- 扫码界面 ----Column(){// 相机预览区域（用 XComponent）Column(){Text('📷 将二维码放入框内').fontSize(16).fontColor('#fff').position({x:'50%',y:'50%'}).translate({x:-70,y:-20})}.layoutWeight(1).width('100%').backgroundColor('#1a1a2e')// 扫码结果if(this.scanResult){Row(){Text('✅ '+this.scanResult).fontSize(14).fontColor('#34C759').textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(2).layoutWeight(1)Button('✕').backgroundColor('transparent').fontColor('#999').onClick(()=>{this.scanResult='';})}.padding(12).backgroundColor('#E8F8E8').width('94%').borderRadius(8)}// 底部工具栏Row(){Button(this.flashOn?'🔦 关灯':'🔦 开灯').backgroundColor('#333').fontColor('#fff').borderRadius(20).height(36).onClick(()=>{this.toggleFlash();})Text('自动识别二维码').fontSize(13).fontColor('#888')}.width('94%').justifyContent(FlexAlign.SpaceAround).padding(16)}.layoutWeight(1)}else{// ---- 生成界面 ----Column(){Scroll(){Column(){// 二维码画布Canvas(this.canvasCtx).width(this.qrSize).height(this.qrSize).backgroundColor('#fff').margin({top:20})// 大小调节Row(){Text('大小:').fontSize(14).fontColor('#888')Slider({value:this.qrSize,min:120,max:300,step:20}).width(200).onChange((v)=>{this.qrSize=v;setTimeout(()=>this.drawQRCode(),100);})}.margin({top:12})// 输入文本TextInput({placeholder:'输入文本或链接...',text:this.inputText}).width('90%').height(44).backgroundColor('#F8F8F8').borderRadius(8).padding({left:12}).margin({top:16}).onChange((v)=>{this.inputText=v;})Button('🎨 生成二维码').width('90%').height(44).backgroundColor('#007AFF').fontColor('#fff').borderRadius(22).margin({top:12}).fontSize(16).onClick(()=>{this.generateQRCode();})// 扫码历史if(this.history.length>0){Text('📋 历史记录').fontSize(16).fontWeight(FontWeight.Bold).margin({top:24,bottom:8}).width('90%')List({space:4}){ForEach(this.history,(item:any)=>{ListItem(){Row(){Text(item.text).fontSize(14).layoutWeight(1).textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(1)Text(item.time).fontSize(11).fontColor('#999')}.padding(12).backgroundColor('#FFF').borderRadius(8).width('90%')}},(item:any)=>item.time)}.height(150).width('100%')}}.width('100%').alignItems(HorizontalAlign.Center)}.layoutWeight(1)}}}.width('100%').height('100%').backgroundColor('#F8F9FA')}}

官方文档：HarmonyOS 应用开发文档

• 开发者社区：华为开发者论坛
• 欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net/