HarmonyOS 技术精讲Scan Kit 码图生成——创建二维码与条形码一、这个 API 到底用来干什么很多刚接触 Scan Kit 的开发者第一反应是“扫码”其实它的能力远不止于此。它自带的码图生成能力在很多场景下能省掉引入第三方库的麻烦。说白了它解决的就是**“把一段文本变成可被扫码识别的图形”**这件事。常见场景包括分享页面链接生成二维码微信/支付宝支付码二维码商品条码EAN-13 / CODE128机票/快递单号CODE128 / PDF417对比一下常见的方案方案优势劣势原生 Canvas 绘制不依赖 SDK需要自行实现编码逻辑、纠错算法、定位图形开发成本高第三方 JS 库功能丰富需要引入额外包Kotlin/JS 混编容易出兼容性问题Scan Kit generateBarcode系统级 API性能稳定支持自定义样式码图格式有上限部分特殊需求需绕行说明官方 API 提供了 QR_CODE、CODE128、EAN-13、PDF417、AZTEC 等多种格式覆盖基本能满足 95% 以上的场景。如果需要非标准码图比如工业级特定格式那就得考虑其他方案了。二、环境说明DevEco Studio 版本DevEco Studio 6.1.0 及以上 HarmonyOS SDK 版本HarmonyOS 6.1.0(23) 及以上 目标设备手机另外需要先完成 Scan Kit 的开发准备——在 AppGallery Connect 中开通扫码服务。这一步如果没做API 会返回 20183401 错误码。具体参见官方文档的开发准备章节。三、核心实现3.1 基础二维码生成先跑通最基础的功能把一串文本转成二维码显示到 Image 组件上。// pages/GenerateCodePage.etsimport{scan}fromkit.ScanKit;EntryComponentstruct GenerateCodePage{StateqrCodePixelMap:PixelMap|nullnull;build(){Column(){// 生成按钮Button(生成二维码).onClick((){this.generateQRCode(https://developer.huawei.com);})// 显示码图的 Image 组件Image(this.qrCodePixelMap).width(200).height(200).backgroundColor(#FFFFFF)}.width(100%).height(100%).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}asyncgenerateQRCode(content:string){try{// 1. 构建生成参数letbarcodeConfig:scan.BarcodeGenerateParams{// 码图内容barcodeContent:content,// 码图格式QR_CODE 对应二维码barcodeFormat:scan.BarcodeFormat.QR_CODE,// 码图宽度像素width:400,// 码图高度像素height:400,// 前景色黑色foregroundColor:0xFF000000,// 背景色白色backgroundColor:0xFFFFFFFF,// 边距像素margin:10,// 输入数据类型文本inputData:scan.InputDataType.Text};// 2. 调用生成接口返回 PixelMapletpixelMap:PixelMapawaitscan.generateBarcode(barcodeConfig);// 3. 赋值给 State 变量触发 UI 刷新this.qrCodePixelMappixelMap;}catch(error){console.error(generateBarcode failed, error code:${error.code}, message:${error.message});}}}这里重点解释几个参数barcodeFormat决定生成哪种码图。QR_CODE 用于二维码CODE128 用于条形码。width / height设置码图的分辨率像素。这个值不建议太小否则密集的二维码区域会糊成一团。实际项目中建议设为显示区域的 2-3 倍方便缩放。margin码图四周的空白边距单位像素。默认值是 10二维码扫码器对边距有要求太窄可能导致识别困难。这个实现有个明显的问题——页面退出后pixelMap可能不会被回收。下面会讲怎么处理。3.2 添加 Logo 到二维码中心大部分应用场景下二维码中间需要放一个 Logo 增强品牌感。官方 API 并不直接支持 Logo 嵌入需要自己处理图片叠加。// utils/ImageUtils.etsimport{image}fromkit.ImageKit;import{common}fromkit.AbilityKit;/** * 将 Logo 图片叠加到基础二维码的 PixlMap 上 * * 注意这个操作会修改原 PixelMap建议先拷贝一份 */asyncfunctionoverlayLogoOnBarcode(basePixelMap:PixelMap,logoPixelMap:PixelMap,context:common.Context):PromisePixelMap{// 1. 获取图片源letbaseSource:image.ImageSourceimage.createImageSource(basePixelMap);letlogoSource:image.ImageSourceimage.createImageSource(logoPixelMap);// 2. 创建解码器把 PixelMap 解码为 32 位 RGBA 格式letbasePacker:image.ImagePackerimage.createImagePacker();letbasePackInfo:image.PackingOption{format:image/png,quality:100};// 这里不直接输出编码结果而是获取像素数据letbaseImageInfo:image.ImageInfoawaitbaseSource.getImageInfo(0);letbaseRowData:ArrayBuffernewArrayBuffer(baseImageInfo.size.width*baseImageInfo.size.height*4);awaitbasePixelMap.readPixelsToBuffer(baseRowData);// 3. 类似地获取 Logo 的像素数据// 4. 计算 Logo 缩放比例letlogoWidthlogoImageInfo.size.width;letlogoHeightlogoImageInfo.size.height;letscale0.2;// Logo 占二维码 20% 的宽度lettargetLogoWidthbaseImageInfo.size.width*scale;lettargetLogoHeightbaseImageInfo.size.height*scale;// 5. 计算居中位置letoffsetX(baseImageInfo.size.width-targetLogoWidth)/2;letoffsetY(baseImageInfo.size.height-targetLogoHeight)/2;// 6. 循环遍历二维码的像素数据将 Logo 区域覆盖// 这里省略逐像素混合的循环代码实际效果等同于 Image 叠加// 更推荐的做法是用 Canvas 来叠加代码更简洁}这个做法太啰嗦了更重要的是——它引入了巨大的性能开销。每生成一次都要做像素级的拷贝和混合而且在 ArkUI 里操作大量像素数据并不高效。实际项目里建议用更简单的方法把 Logo 和二维码各自作为 Image 组件用 Stack 布局叠在一起。// pages/GenerateWithLogoPage.etsimport{scan}fromkit.ScanKit;import{image}fromkit.ImageKit;EntryComponentstruct GenerateWithLogoPage{StateqrCodePixelMap:PixelMap|nullnull;// 这个 resource 代表应用资源中的 logo 图片privatelogoResource:Resource$r(app.media.app_logo);build(){Column(){Button(生成带 Logo 的二维码).onClick((){this.generateQRCode(https://developer.huawei.com);})// 用 Stack 实现叠加Stack(){Image(this.qrCodePixelMap).width(200).height(200).objectFit(ImageFit.Contain)if(this.qrCodePixelMap!null){Image(this.logoResource).width(40).height(40).borderRadius(5)// 白色背景防止 Logo 区域被误扫.backgroundColor(#FFFFFF).padding(2)}}.width(200).height(200).clip(true)}.width(100%).height(100%).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}asyncgenerateQRCode(content:string){try{letbarcodeConfig:scan.BarcodeGenerateParams{barcodeContent:content,barcodeFormat:scan.BarcodeFormat.QR_CODE,width:400,height:400,foregroundColor:0xFF000000,backgroundColor:0xFFFFFFFF,margin:10,inputData:scan.InputDataType.Text};letpixelMap:PixelMapawaitscan.generateBarcode(barcodeConfig);this.qrCodePixelMappixelMap;}catch(error){console.error(generateBarcode failed:${JSON.stringify(error)});}}}这种做法有个隐含问题用户截图保存时只能保存底层的二维码 ImageLogo 层并不会被包含进去。如果需要保存带 Logo 的完整图片必须走像素混合路径这个下面会聊。3.3 生成条形码CODE128 格式条形码的生成方式与二维码完全一致只是换个barcodeFormat。// pages/GenerateBarcodePage.etsimport{scan}fromkit.ScanKit;EntryComponentstruct GenerateBarcodePage{StatebarcodePixelMap:PixelMap|nullnull;build(){Column(){Button(生成条形码).onClick((){this.generateCode128(ABC123456789);})Image(this.barcodePixelMap).width(300).height(100).backgroundColor(#FFFFFF)}.width(100%).height(100%).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}asyncgenerateCode128(content:string){try{letbarcodeConfig:scan.BarcodeGenerateParams{barcodeContent:content,barcodeFormat:scan.BarcodeFormat.CODE128,// 条形码对宽度更敏感建议 width 设大一些width:600,height:200,foregroundColor:0xFF000000,backgroundColor:0xFFFFFFFF,margin:5,inputData:scan.InputDataType.Text};// 条形码建议开启纠错 (ECC)barcodeConfig.eccLevel0;// 0-4 可选CODE128 一般用 0letpixelMap:PixelMapawaitscan.generateBarcode(barcodeConfig);this.barcodePixelMappixelMap;}catch(error){console.error(generateCode128 failed:${JSON.stringify(error)});}}}几个注意点宽度一定要设够CODE128 码图由若干条和空组成宽度不够会导致条码挤出画面扫码器识别失败。建议宽度不少于 400px。高度与识别率条码高度至少应为宽度的 30%否则扫码器难以定位。输入内容CODE128 支持 ASCII 字符集但不能包含中文。如果内容包含中文就得用其他格式如 QR_CODE 或 PDF417。3.4 保存到相册生成码图之后通常需要提供保存功能。保存到相册涉及媒体读写权限。// utils/SaveToGallery.etsimport{photoAccessHelper}fromkit.MediaLibraryKit;import{image}fromkit.ImageKit;import{common}fromkit.AbilityKit;import{fileIo}fromkit.CoreFileKit;/** * 把 PixelMap 保存到系统相册 * param pixelMap 要保存的图片数据 * param context UIAbility 的 Context */asyncfunctionsaveBarcodeToGallery(pixelMap:PixelMap,context:common.Context):Promisevoid{// 1. 先检查是否有写入相册的权限// 在 module.json5 中配置ohos.permission.WRITE_IMAGEVIDEO// 运行时还需要弹窗授权// 2. 创建一个临时文件用于写入lettempDir:stringcontext.tempDir;letfileName:stringbarcode_${Date.now()}.png;letfilePath:string${tempDir}/${fileName};// 3. 使用 ImagePacker 将 PixelMap 编码为 PNGletimagePackerApi:image.ImagePackerimage.createImagePacker();letpackOpts:image.PackingOption{format:image/png,quality:100};letpackedData:ArrayBufferawaitimagePackerApi.packing(pixelMap,packOpts);// 4. 写入临时文件letfile:fileIo.FilefileIo.openSync(filePath,fileIo.OpenMode.CREATE|fileIo.OpenMode.WRITE_ONLY);fileIo.writeSync(file.fd,packedData);fileIo.closeSync(file);// 5. 通过 MediaLibrary 写入相册lethelper:photoAccessHelper.PhotoAccessHelperphotoAccessHelper.getPhotoAccessHelper(context);leturi:stringawaithelper.saveToPublicDir(photoAccessHelper.PhotoType.IMAGE,filePath);console.info(Barcode saved to gallery, uri:${uri});// 清理临时文件fileIo.unlinkSync(filePath);}这个流程涉及多个异步操作和文件 IO建议封装成 Promise 调用。需要注意packing方法在 API 12 后返回ArrayBuffer之前版本返回的是Uint8Array。如果遇到类型错误检查一下 SDK 版本。四、常见问题踩坑记录坑 1生成二维码后前景色设为白色却成了黑色现象有人想生成白底黑图把foregroundColor设为0xFFFFFFFF白色backgroundColor设为0xFF000000黑色结果输出的码图还是白底黑点扫码完全失效。原因这不是 API 的 bug而是二维码原理决定的。二维码中深色模块代表 1浅色模块代表 0。大部分扫码器默认深色是前景色。如果不反转标准扫码器就会把背景当信息去读整个码图识别失败。解法保持深色前景、浅色背景即可。如果一定要反色需要在生成后对 PixelMap 做逐像素反转同时告知扫码器反转模式生成时就标注但 Scan Kit 不提供这个参数。建议直接放弃反色方案。坑 2添加 Logo 后部分手机扫码失败现象在二维码中心放了 Logo某些手机能扫出来另一部分手机死活扫不出来。原因二维码本身有纠错等级ECC默认可能是 L 级7% 纠错。Logo 占据了中心区域破坏了定位图案和数据区域纠错能力不足以修复丢失的信息。解法生成时设置eccLevel参数barcodeConfig.eccLevel3;// H 级约 30% 纠错barcodeConfig.mask-1;// 自动选择最佳掩模另外 Logo 大小不要超过二维码尺寸的 20%同时给 Logo 加白色背景框上面示例里已经做了。如果 Logo 占据更大面积需要设计师重新设计。坑 3页面跳转返回后二维码图片变成空白现象生成二维码后跳转到详情页返回时 Image 组件显示空白。原因PixelMap是异步生成的它的引用没有被持久化。当页面重建时State变量被重置为null或者PixelMap被 GC 回收。解法使用LocalStorage或自定义AppStorage保存 PixelMap 的数据副本存为 ArrayBuffer 或文件路径页面返回后重新读取。如果只是临时跳转可以用StateProp通过路由参数传递。也可以在onPageHide中将 PixelMap 转换为 Base64 字符串存入LocalStorage返回后再解码。推荐用第 2 种方案简单且不会把图片数据留在内存中太久。五、最佳实践不要在 build() 中每次生成新的 PixelMap每个二维码生成都是异步 IO 编解码操作直接放在 build() 里会阻塞 UI 渲染。应该放在点击回调或生命周期函数中。合理复用 ByteArray 缓冲区如果频繁生成码图例如扫一扫页面里的快速切换建议先用new ArrayBuffer(size)创建固定大小的缓冲区避免多次创建大对象触发 GC。对 PixelMap 做引用计数或兜底释放每个scan.generateBarcode都会创建新的 PixelMap 对象。如果页面频繁刷新容易积累大量无用 PixelMap 导致内存上涨。建议在onPageHide或页面销毁前手动置 nullonPageHide():void{this.qrCodePixelMapnull;// 如果需要还可以调用 pixelMap.release()}六、FAQQ1为什么真机调试正常模拟器上生成二维码总是失败A模拟器没有完整的相机模块Scan Kit 的部分能力尤其是二维码纠错和掩模计算在模拟器上可能受限。建议真机调试或者检查模拟器是否启用了相机模拟。Q2生成的条形码扫码器提示无效条码但内容明明是正确的A检查两件事第一条形码格式是否选对比如内容是纯数字但用了 CODE128第二可选内容是否包含校验位。EAN-13 等格式内置校验位生成时确保参数eccLevel为 0内容长度为 12 位系统自动补第 13 位校验码。Q3保存到相册时Permission 已经申请了但依然报错 201A多媒体权限需要运行时授权并且在module.json5中声明ohos.permission.WRITE_IMAGEVIDEO。另外注意相册写入操作需要在 UIAbility 的 Context 中执行不要在 ServiceAbility 中调用。如果是在 Page 级调用需要从getContext()拿到正确的 Context。
HarmonyOS技术精讲-Scan Kit：码图生成——创建二维码与条形码
发布时间：2026/7/8 4:41:06
HarmonyOS 技术精讲Scan Kit 码图生成——创建二维码与条形码一、这个 API 到底用来干什么很多刚接触 Scan Kit 的开发者第一反应是“扫码”其实它的能力远不止于此。它自带的码图生成能力在很多场景下能省掉引入第三方库的麻烦。说白了它解决的就是**“把一段文本变成可被扫码识别的图形”**这件事。常见场景包括分享页面链接生成二维码微信/支付宝支付码二维码商品条码EAN-13 / CODE128机票/快递单号CODE128 / PDF417对比一下常见的方案方案优势劣势原生 Canvas 绘制不依赖 SDK需要自行实现编码逻辑、纠错算法、定位图形开发成本高第三方 JS 库功能丰富需要引入额外包Kotlin/JS 混编容易出兼容性问题Scan Kit generateBarcode系统级 API性能稳定支持自定义样式码图格式有上限部分特殊需求需绕行说明官方 API 提供了 QR_CODE、CODE128、EAN-13、PDF417、AZTEC 等多种格式覆盖基本能满足 95% 以上的场景。如果需要非标准码图比如工业级特定格式那就得考虑其他方案了。二、环境说明DevEco Studio 版本DevEco Studio 6.1.0 及以上 HarmonyOS SDK 版本HarmonyOS 6.1.0(23) 及以上 目标设备手机另外需要先完成 Scan Kit 的开发准备——在 AppGallery Connect 中开通扫码服务。这一步如果没做API 会返回 20183401 错误码。具体参见官方文档的开发准备章节。三、核心实现3.1 基础二维码生成先跑通最基础的功能把一串文本转成二维码显示到 Image 组件上。// pages/GenerateCodePage.etsimport{scan}fromkit.ScanKit;EntryComponentstruct GenerateCodePage{StateqrCodePixelMap:PixelMap|nullnull;build(){Column(){// 生成按钮Button(生成二维码).onClick((){this.generateQRCode(https://developer.huawei.com);})// 显示码图的 Image 组件Image(this.qrCodePixelMap).width(200).height(200).backgroundColor(#FFFFFF)}.width(100%).height(100%).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}asyncgenerateQRCode(content:string){try{// 1. 构建生成参数letbarcodeConfig:scan.BarcodeGenerateParams{// 码图内容barcodeContent:content,// 码图格式QR_CODE 对应二维码barcodeFormat:scan.BarcodeFormat.QR_CODE,// 码图宽度像素width:400,// 码图高度像素height:400,// 前景色黑色foregroundColor:0xFF000000,// 背景色白色backgroundColor:0xFFFFFFFF,// 边距像素margin:10,// 输入数据类型文本inputData:scan.InputDataType.Text};// 2. 调用生成接口返回 PixelMapletpixelMap:PixelMapawaitscan.generateBarcode(barcodeConfig);// 3. 赋值给 State 变量触发 UI 刷新this.qrCodePixelMappixelMap;}catch(error){console.error(generateBarcode failed, error code:${error.code}, message:${error.message});}}}这里重点解释几个参数barcodeFormat决定生成哪种码图。QR_CODE 用于二维码CODE128 用于条形码。width / height设置码图的分辨率像素。这个值不建议太小否则密集的二维码区域会糊成一团。实际项目中建议设为显示区域的 2-3 倍方便缩放。margin码图四周的空白边距单位像素。默认值是 10二维码扫码器对边距有要求太窄可能导致识别困难。这个实现有个明显的问题——页面退出后pixelMap可能不会被回收。下面会讲怎么处理。3.2 添加 Logo 到二维码中心大部分应用场景下二维码中间需要放一个 Logo 增强品牌感。官方 API 并不直接支持 Logo 嵌入需要自己处理图片叠加。// utils/ImageUtils.etsimport{image}fromkit.ImageKit;import{common}fromkit.AbilityKit;/** * 将 Logo 图片叠加到基础二维码的 PixlMap 上 * * 注意这个操作会修改原 PixelMap建议先拷贝一份 */asyncfunctionoverlayLogoOnBarcode(basePixelMap:PixelMap,logoPixelMap:PixelMap,context:common.Context):PromisePixelMap{// 1. 获取图片源letbaseSource:image.ImageSourceimage.createImageSource(basePixelMap);letlogoSource:image.ImageSourceimage.createImageSource(logoPixelMap);// 2. 创建解码器把 PixelMap 解码为 32 位 RGBA 格式letbasePacker:image.ImagePackerimage.createImagePacker();letbasePackInfo:image.PackingOption{format:image/png,quality:100};// 这里不直接输出编码结果而是获取像素数据letbaseImageInfo:image.ImageInfoawaitbaseSource.getImageInfo(0);letbaseRowData:ArrayBuffernewArrayBuffer(baseImageInfo.size.width*baseImageInfo.size.height*4);awaitbasePixelMap.readPixelsToBuffer(baseRowData);// 3. 类似地获取 Logo 的像素数据// 4. 计算 Logo 缩放比例letlogoWidthlogoImageInfo.size.width;letlogoHeightlogoImageInfo.size.height;letscale0.2;// Logo 占二维码 20% 的宽度lettargetLogoWidthbaseImageInfo.size.width*scale;lettargetLogoHeightbaseImageInfo.size.height*scale;// 5. 计算居中位置letoffsetX(baseImageInfo.size.width-targetLogoWidth)/2;letoffsetY(baseImageInfo.size.height-targetLogoHeight)/2;// 6. 循环遍历二维码的像素数据将 Logo 区域覆盖// 这里省略逐像素混合的循环代码实际效果等同于 Image 叠加// 更推荐的做法是用 Canvas 来叠加代码更简洁}这个做法太啰嗦了更重要的是——它引入了巨大的性能开销。每生成一次都要做像素级的拷贝和混合而且在 ArkUI 里操作大量像素数据并不高效。实际项目里建议用更简单的方法把 Logo 和二维码各自作为 Image 组件用 Stack 布局叠在一起。// pages/GenerateWithLogoPage.etsimport{scan}fromkit.ScanKit;import{image}fromkit.ImageKit;EntryComponentstruct GenerateWithLogoPage{StateqrCodePixelMap:PixelMap|nullnull;// 这个 resource 代表应用资源中的 logo 图片privatelogoResource:Resource$r(app.media.app_logo);build(){Column(){Button(生成带 Logo 的二维码).onClick((){this.generateQRCode(https://developer.huawei.com);})// 用 Stack 实现叠加Stack(){Image(this.qrCodePixelMap).width(200).height(200).objectFit(ImageFit.Contain)if(this.qrCodePixelMap!null){Image(this.logoResource).width(40).height(40).borderRadius(5)// 白色背景防止 Logo 区域被误扫.backgroundColor(#FFFFFF).padding(2)}}.width(200).height(200).clip(true)}.width(100%).height(100%).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}asyncgenerateQRCode(content:string){try{letbarcodeConfig:scan.BarcodeGenerateParams{barcodeContent:content,barcodeFormat:scan.BarcodeFormat.QR_CODE,width:400,height:400,foregroundColor:0xFF000000,backgroundColor:0xFFFFFFFF,margin:10,inputData:scan.InputDataType.Text};letpixelMap:PixelMapawaitscan.generateBarcode(barcodeConfig);this.qrCodePixelMappixelMap;}catch(error){console.error(generateBarcode failed:${JSON.stringify(error)});}}}这种做法有个隐含问题用户截图保存时只能保存底层的二维码 ImageLogo 层并不会被包含进去。如果需要保存带 Logo 的完整图片必须走像素混合路径这个下面会聊。3.3 生成条形码CODE128 格式条形码的生成方式与二维码完全一致只是换个barcodeFormat。// pages/GenerateBarcodePage.etsimport{scan}fromkit.ScanKit;EntryComponentstruct GenerateBarcodePage{StatebarcodePixelMap:PixelMap|nullnull;build(){Column(){Button(生成条形码).onClick((){this.generateCode128(ABC123456789);})Image(this.barcodePixelMap).width(300).height(100).backgroundColor(#FFFFFF)}.width(100%).height(100%).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}asyncgenerateCode128(content:string){try{letbarcodeConfig:scan.BarcodeGenerateParams{barcodeContent:content,barcodeFormat:scan.BarcodeFormat.CODE128,// 条形码对宽度更敏感建议 width 设大一些width:600,height:200,foregroundColor:0xFF000000,backgroundColor:0xFFFFFFFF,margin:5,inputData:scan.InputDataType.Text};// 条形码建议开启纠错 (ECC)barcodeConfig.eccLevel0;// 0-4 可选CODE128 一般用 0letpixelMap:PixelMapawaitscan.generateBarcode(barcodeConfig);this.barcodePixelMappixelMap;}catch(error){console.error(generateCode128 failed:${JSON.stringify(error)});}}}几个注意点宽度一定要设够CODE128 码图由若干条和空组成宽度不够会导致条码挤出画面扫码器识别失败。建议宽度不少于 400px。高度与识别率条码高度至少应为宽度的 30%否则扫码器难以定位。输入内容CODE128 支持 ASCII 字符集但不能包含中文。如果内容包含中文就得用其他格式如 QR_CODE 或 PDF417。3.4 保存到相册生成码图之后通常需要提供保存功能。保存到相册涉及媒体读写权限。// utils/SaveToGallery.etsimport{photoAccessHelper}fromkit.MediaLibraryKit;import{image}fromkit.ImageKit;import{common}fromkit.AbilityKit;import{fileIo}fromkit.CoreFileKit;/** * 把 PixelMap 保存到系统相册 * param pixelMap 要保存的图片数据 * param context UIAbility 的 Context */asyncfunctionsaveBarcodeToGallery(pixelMap:PixelMap,context:common.Context):Promisevoid{// 1. 先检查是否有写入相册的权限// 在 module.json5 中配置ohos.permission.WRITE_IMAGEVIDEO// 运行时还需要弹窗授权// 2. 创建一个临时文件用于写入lettempDir:stringcontext.tempDir;letfileName:stringbarcode_${Date.now()}.png;letfilePath:string${tempDir}/${fileName};// 3. 使用 ImagePacker 将 PixelMap 编码为 PNGletimagePackerApi:image.ImagePackerimage.createImagePacker();letpackOpts:image.PackingOption{format:image/png,quality:100};letpackedData:ArrayBufferawaitimagePackerApi.packing(pixelMap,packOpts);// 4. 写入临时文件letfile:fileIo.FilefileIo.openSync(filePath,fileIo.OpenMode.CREATE|fileIo.OpenMode.WRITE_ONLY);fileIo.writeSync(file.fd,packedData);fileIo.closeSync(file);// 5. 通过 MediaLibrary 写入相册lethelper:photoAccessHelper.PhotoAccessHelperphotoAccessHelper.getPhotoAccessHelper(context);leturi:stringawaithelper.saveToPublicDir(photoAccessHelper.PhotoType.IMAGE,filePath);console.info(Barcode saved to gallery, uri:${uri});// 清理临时文件fileIo.unlinkSync(filePath);}这个流程涉及多个异步操作和文件 IO建议封装成 Promise 调用。需要注意packing方法在 API 12 后返回ArrayBuffer之前版本返回的是Uint8Array。如果遇到类型错误检查一下 SDK 版本。四、常见问题踩坑记录坑 1生成二维码后前景色设为白色却成了黑色现象有人想生成白底黑图把foregroundColor设为0xFFFFFFFF白色backgroundColor设为0xFF000000黑色结果输出的码图还是白底黑点扫码完全失效。原因这不是 API 的 bug而是二维码原理决定的。二维码中深色模块代表 1浅色模块代表 0。大部分扫码器默认深色是前景色。如果不反转标准扫码器就会把背景当信息去读整个码图识别失败。解法保持深色前景、浅色背景即可。如果一定要反色需要在生成后对 PixelMap 做逐像素反转同时告知扫码器反转模式生成时就标注但 Scan Kit 不提供这个参数。建议直接放弃反色方案。坑 2添加 Logo 后部分手机扫码失败现象在二维码中心放了 Logo某些手机能扫出来另一部分手机死活扫不出来。原因二维码本身有纠错等级ECC默认可能是 L 级7% 纠错。Logo 占据了中心区域破坏了定位图案和数据区域纠错能力不足以修复丢失的信息。解法生成时设置eccLevel参数barcodeConfig.eccLevel3;// H 级约 30% 纠错barcodeConfig.mask-1;// 自动选择最佳掩模另外 Logo 大小不要超过二维码尺寸的 20%同时给 Logo 加白色背景框上面示例里已经做了。如果 Logo 占据更大面积需要设计师重新设计。坑 3页面跳转返回后二维码图片变成空白现象生成二维码后跳转到详情页返回时 Image 组件显示空白。原因PixelMap是异步生成的它的引用没有被持久化。当页面重建时State变量被重置为null或者PixelMap被 GC 回收。解法使用LocalStorage或自定义AppStorage保存 PixelMap 的数据副本存为 ArrayBuffer 或文件路径页面返回后重新读取。如果只是临时跳转可以用StateProp通过路由参数传递。也可以在onPageHide中将 PixelMap 转换为 Base64 字符串存入LocalStorage返回后再解码。推荐用第 2 种方案简单且不会把图片数据留在内存中太久。五、最佳实践不要在 build() 中每次生成新的 PixelMap每个二维码生成都是异步 IO 编解码操作直接放在 build() 里会阻塞 UI 渲染。应该放在点击回调或生命周期函数中。合理复用 ByteArray 缓冲区如果频繁生成码图例如扫一扫页面里的快速切换建议先用new ArrayBuffer(size)创建固定大小的缓冲区避免多次创建大对象触发 GC。对 PixelMap 做引用计数或兜底释放每个scan.generateBarcode都会创建新的 PixelMap 对象。如果页面频繁刷新容易积累大量无用 PixelMap 导致内存上涨。建议在onPageHide或页面销毁前手动置 nullonPageHide():void{this.qrCodePixelMapnull;// 如果需要还可以调用 pixelMap.release()}六、FAQQ1为什么真机调试正常模拟器上生成二维码总是失败A模拟器没有完整的相机模块Scan Kit 的部分能力尤其是二维码纠错和掩模计算在模拟器上可能受限。建议真机调试或者检查模拟器是否启用了相机模拟。Q2生成的条形码扫码器提示无效条码但内容明明是正确的A检查两件事第一条形码格式是否选对比如内容是纯数字但用了 CODE128第二可选内容是否包含校验位。EAN-13 等格式内置校验位生成时确保参数eccLevel为 0内容长度为 12 位系统自动补第 13 位校验码。Q3保存到相册时Permission 已经申请了但依然报错 201A多媒体权限需要运行时授权并且在module.json5中声明ohos.permission.WRITE_IMAGEVIDEO。另外注意相册写入操作需要在 UIAbility 的 Context 中执行不要在 ServiceAbility 中调用。如果是在 Page 级调用需要从getContext()拿到正确的 Context。
相关文章
Transformer核心：自注意力机制解析
Transformer：开启大语言模型时代的革命性架构Transformer 架构自 2017 年由 Google 在论文《Attention Is All You Need》中提出以来，已成为自然语言处理乃至整个深度学习领域的基石。它摒弃了传统的循环神经网络和卷积神经网络，完全基于注意…
ChatGPT上传PDF后为什么读不完整？5个常见原因与处理方法
摘要本文分析ChatGPT读取PDF时出现内容遗漏、表格混乱和扫描件无法识别的5个常见原因，并整理OCR、分章节处理、图表截图和定向提问等解决方法。关键词： ChatGPT、PDF、OCR、文件处理、提示词前言把PDF上传到ChatGPT后，有时会遇到这些情况&…
微信小程序怎么制作自己的小程序？2026全球5款AI/SAAS微信小程序开发工具实测对比，含零代码SAAS、AI编程、源码定制交付
新手必看：2026微信小程序怎么制作自己的小程序完整全流程（零基础也能落地） 一、通过BBWEYY官网注册微信小程序制作账号 首先，我们需要先通过BBWEYY官网注册账号，进入后台管理页面。BBWEYY是全域全端全行业的AISAAS工具…
Path of Building完整指南：5步掌握流放之路Build规划工具
Path of Building完整指南：5步掌握流放之路Build规划工具 【免费下载链接】PathOfBuilding Offline build planner for Path of Exile. 项目地址: https://gitcode.com/GitHub_Trending/pa/PathOfBuilding Path of Building（简称PoB）是…
B站 Web 端花屏问题：3种渲染后端（D3D9/11/12/OpenGL）性能与兼容性实测对比
B站Web端花屏问题深度解析：4种渲染后端性能实测与优化指南最近在B站刷视频时，评论区滑动时突然闪过的花屏让人心烦意乱。这种随机出现的图形异常并非个例，很多使用Chrome/Edge浏览器的用户都遇到过类似问题。作为一名长期关注前端性能优化的开…
Geo优化源码开发搭建技术分享：从架构设计到性能调优
1. 引言：什么是Geo优化？在当今的互联网应用中，地理位置（Geo）相关的功能无处不在，从外卖配送、共享出行到社交推荐、本地生活服务，都离不开高效、精准的地理数据处理能力。Geo优化，即…
Python实时音频FFT分析服务器深度解析：从低延迟架构到创意应用实战指南
Python实时音频FFT分析服务器深度解析：从低延迟架构到创意应用实战指南 【免费下载链接】Realtime_PyAudio_FFT Realtime audio analysis in Python to extract audio features from streaming audio and send them over OSC to any client app. 项目地址: https:…
外贸SEO案例：一个关键词排上Google首页，年增500万销售额
一个关键词，从Google第5页爬到首页第3位，用了6个月。带来的变化是：这个关键词相关的询盘从每月2-3封涨到25-30封，其中约30%转化为实际订单，全年新增销售额约500万人民币。今天复盘整个过程，不讲空话&#x…
OE720光谱仪狭缝污染故障处理及维护规范
狭缝是OE720直读光谱仪光路系统的核心精密部件，分为入射狭缝与出射狭缝，负责精准控制通光量、筛选光谱信号。狭缝发生污染后，会直接干扰光路传输，引发检测数据异常、设备分辨率下降等问题，是设备高频典型故障。以下为完…
VOC/COCO/YOLO 3种格式互转实战：Python脚本实现80%代码复用
VOC/COCO/YOLO 3种格式互转实战：Python脚本实现80%代码复用 在计算机视觉项目中，数据格式转换是算法工程师和数据工程师的日常痛点。当你需要将PASCAL VOC格式的数据集迁移到YOLOv7训练框架，或是将COCO格式的标注转换为轻量化的TXT格式时&…
3大核心能力重塑《明日方舟》游戏体验：MAA自动化助手的革命性突破
3大核心能力重塑《明日方舟》游戏体验：MAA自动化助手的革命性突破 【免费下载链接】MaaAssistantArknights 《明日方舟》小助手，全日常一键长草！| A one-click tool for the daily tasks of Arknights, supporting all clients. 项目地址: …
高精度模拟信号数字化方案：ADS122U04与dsPIC33EP512MU810应用
1. 项目概述：高精度模拟信号数字化方案在工业测量、医疗设备和环境监测等领域，我们经常需要将温度、压力、光照等模拟信号转换为数字信号进行处理。ADS122U04和dsPIC33EP512MU810的组合，为这类应用提供了高精度、低功耗的解决方案。ADS122U04…
3步彻底解决Windows右键菜单混乱问题：ContextMenuManager使用全攻略
3步彻底解决Windows右键菜单混乱问题：ContextMenuManager使用全攻略 【免费下载链接】ContextMenuManager 🖱️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是否曾为Windows右键菜单中那些…
从GitHub安全案例解析常见漏洞与防护实践
1. 项目概述：从GitHub Trending看安全实战 最近在GitHub Trending上看到一个项目，叫 skills4/skills ，它因为一些安全漏洞案例被大家讨论。这其实是一个挺典型的场景：一个旨在展示或教授某种技能的仓库，本身却成了安…
MLT 2026启示：因果推理与概率建模驱动下一代LLM应用
# MLT 2026启示：因果推理与概率建模驱动下一代LLM应用## 一、背景与挑战：从“黑箱预测”到“可信推理”2026年6月，第7届机器学习与趋势国际会议（MLT 2026）将在悉尼召开。会议议程中，“因果与可解释机器学习…
FAE放射组学分析工具：医学影像特征探索的完整解决方案
FAE放射组学分析工具：医学影像特征探索的完整解决方案 【免费下载链接】FAE FeAture Explorer 项目地址: https://gitcode.com/gh_mirrors/fae/FAE 你是否曾经面对海量医学影像数据感到无从下手？想要从CT、MRI等影像中提取有价值的定量特征&#…
0.69B参数实现中文多模态AI：揭秘Qwen3-SmVL模型融合技术的完整实战指南
0.69B参数实现中文多模态AI：揭秘Qwen3-SmVL模型融合技术的完整实战指南 【免费下载链接】happy-llm 📚 从零开始构建大模型 项目地址: https://gitcode.com/GitHub_Trending/ha/happy-llm 还在为大型多模态模型动辄数十亿参数、显存占用高而烦恼&…
解锁AMD Ryzen处理器性能潜力的SMU调试神器：从新手到专家的完整指南
解锁AMD Ryzen处理器性能潜力的SMU调试神器：从新手到专家的完整指南 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址…