首页 > 其他分享 >【HarmonyOS NEXT】解决Scan Kit生成二维码不支持添加logo图片

【HarmonyOS NEXT】解决Scan Kit生成二维码不支持添加logo图片

时间:2024-03-05 15:26:42浏览次数:25  
标签:Scan 300 二维码 NEXT HarmonyOS pixelMap error logo 图片

 【关键字】

HarmonyOS、Scan Kit、二维码、logo图片、生成二维码

 

1、写在前面

HarmonyOS的Scan Kit提供了码图生成的能力,具体的使用方式可以参考开发指南:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/scan-barcodegenerate-0000001714658685

现在有个小问题是:想要在生成的二维码的中间放一张logo图片,Scan Kit并没有提供相应的接口让我们快速调用,那现在思考一下这需要怎么实现呢?

 

2、开发实战

既然Scan Kit没有提供现成的接口,那么咱们只有自己动手实现了,简单思考一下其实实现起来并不困难,并且实现的方式也是多种多样的,原理上其实都是一样的,就是底下是二维码图片,上面是logo图片,下面我们来介绍两种实现方式。

第一种:

第一种方案咱们采用布局的方式实现,整体是一个Stack堆叠布局,下层放生成的二维码图片组件,上层放logo图片组件。

首先,先调用Scan Kit的接口,通过Promise的方式回调,获取生成的码图:

@State pixelMap: image.PixelMap | undefined = undefined
aboutToAppear(): void {
    this.pixelMap = undefined
    let content: string = 'Jarchie'
    let options: generateBarcode.CreateOptions = {
      scanType: scanCore.ScanType.QR_CODE,
      height: 300,
      width: 300
    }
    // 码图生成接口,成功返回PixelMap格式图片
    generateBarcode.createBarcode(content, options).then((pixelMap: image.PixelMap) => {
      this.pixelMap = pixelMap
    }).catch((error: BusinessError) => {
      hilog.error(0x0001, '[generateBarcode]', 'promise error : %{public}s', JSON.stringify(error))
    })
  }

然后Stack布局内部放两个Image组件:

Stack() {
      Image(this.pixelMap).width(300).height(300).objectFit(ImageFit.Contain).align(Alignment.Center)
      Image($r('app.media.logo')).width(60).height(60).objectFit(ImageFit.Contain).align(Alignment.Center)
    }
    .width('100%')
    .height('100%')

以上这些代码咱们就可以很容易实现带有logo图片的二维码的展示啦。

第二种:

第二种方式实际上也一样,就是咱们通过Canvas绘制的形式先绘制二维码图片,然后再绘制logo图片。关于Canvas绘制的部分这里不再展开,相关API参考以下文档:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-canvasrenderingcontext2d-0000001774280990#ZH-CN_TOPIC_0000001774280990__drawimage

整体的实现代码如下:

@Entry
@Component
struct Index {
  @State pixelMap: image.PixelMap | undefined = undefined
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private img: ImageBitmap = new ImageBitmap("common/logo.png")

  createQRCode() {
    this.pixelMap = undefined;
    let content: string = 'Jarchie';
    let options: generateBarcode.CreateOptions = {
      scanType: scanCore.ScanType.QR_CODE,
      height: 300,
      width: 300
    }
    // 码图生成接口,成功返回PixelMap格式图片
    generateBarcode.createBarcode(content, options).then((pixelMap: image.PixelMap) => {
      this.pixelMap = pixelMap
      this.context.drawImage(this.pixelMap, 0, 0, 300, 300, 0, 0, 300, 300)
      this.context.drawImage(this.img, 0, 0, 80, 80, 120, 120, 60, 60)
    }).catch((error: BusinessError) => {
      console.error('createBarcode error:' + JSON.stringify(error))
    })
  }

  build() {
    Column() {
      Canvas(this.context)
        .width(300)
        .height(300)
        .onReady(() => {
          this.createQRCode()
        })
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}

3、效果展示

上面介绍的两种方案都可以实现在二维码中间添加一个logo图片的效果,下面来看一下最终的实现效果吧,如下图所示:

cke_4845.png

OK,到这里今天的内容就介绍完了,下期再会!

标签:Scan,300,二维码,NEXT,HarmonyOS,pixelMap,error,logo,图片
From: https://www.cnblogs.com/mayism123/p/18054100

相关文章

  • 【HarmonyOS】如何实现数据持久化不会被应用卸载而清除
    【关键字】数据持久化,AssetStoreKit 【问题】最近在学习HarmonyOSpreivewer,遇到了一个场景,跟大家分享一下。核心的需求是需要做一个数据持久化的能力,但是将数据缓存在应用沙箱的files目录下后,每次重启应用确实能够查到存储的数据,一旦将应用卸载重装,或者清除应用数据后,就......
  • 【HarmonyOS】聊一聊ArkUI中的Image组件缓存
    【关键字】image组件,缓存 【问题描述】给Image组件设置网络图片展示,业务将图片进行了下线处理,再次进入这个页面Image组件还是展示着这张图,而不是恢复了默认占位图。 【问题分析】这个问题显然是跟Image组件的缓存机制有关。目前Image组件的图片会有内存缓存机制,会统计到......
  • 【HarmonyOS】ArkUI中this指向的坑
    ​【关键字】this指向,.bind(this),TS到ArkTS的适配 随着HarmonyOSPreviewer版本的发布,笔者也是立马鸟枪换炮,想试一试鸿蒙的新特性,新功能。结果刚把老的工程代码导入,工程就无法编译了,让我们来看看是哪里报了错:​​bind方法居然不支持了。要知道在Api9的HarmonyOS开发过程中,我......
  • 【HarmonyOS】Button按钮设置带有渐变色的背景图片无效
    ​【关键字】Button、渐变色、背景图片、backgroundImage 【问题描述】在为Button组件设置背景图片时未生效,这里准备的背景图片是渐变色的,当在代码中设置完成之后,发现按钮并没有像预想的那样变成渐变色,代码如下:​效果是这样的:​这也太奇怪了,难道是Button按钮的背景图片不......
  • 【FAQ】HarmonyOS SDK 闭源开放能力 —Account Kit
    1.问题描述实时验证和非实时验证的区别是什么?解决方案相同点:“手机号快速验证”和“实时验证”都是为了向用户发起获取手机号信息的请求。最终目的都是为了获取到手机号。这两种获取方式都需要完成“获取您的手机号”的Scope权限申请。区别:实时验证手机号:每次调用都会拉起授......
  • this.$NextTick
    1.介绍this.$nextTickthis.$nextTick是Vue.js提供的一个实例方法,它接收一个回调函数作为参数,该回调函数会在Vue实例更新DOM之后执行。它的主要目的是为了确保你在DOM更新之后,再进行一些操作,以避免出现操作过早导致的问题。2.工作原理在Vue.js中,DOM更新是异步的。当你......
  • 【HarmonyOS】如何读取rawfile里面的自定义文件
    ​【关键词】rawfile、getRawFileContent、textDecoder 【背景】我们知道rawfile文件夹内可以自由放置各类资源文件,如html、json等,那么我们在页面中如何解析引用我们自定义的这些文件呢?这篇文章将为大家揭开谜底~ 【实现方法】我们可以通过@ohos.resourceManager(资源管理......
  • 【HarmonyOS】一招教你在竖屏的UIAbility中使用横屏页面
    ​【关键字】鸿蒙应用开发、ArkTS、UIAbility、横屏页面显示 1、写在前面我们在实际的项目开发过程中,可能会遇到这样的需求:在一个手机应用中,A页面是竖屏展示的,点击A页面的某个按钮需要跳转到B页面,但是B页面需要横屏展示,比如查看海报或者表格信息等内容,在HarmonyOS中,在不增加......
  • 【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit
    1.问题描述升级到4.0.0.59版本后,通过pushService.getToken获取华为的token时报如下错误:Illegalapplicationidentity.解决方案Mate40Pro(NOH)从4.0升级到4.1版本后,会出现UDID变化,影响历史的调试签名使用,应用重新签名后即可正常运行。2.问题描述按照https://developer.h......
  • Vue CLI 系列之(十四)$nextTick
    $nextTick$nextTick这也是一个生命周期​ 如果要实现一个input框点击后进行一些数据修改的操作【这里是指能够引起Vue重新解析模板的数据修改操作,比如修改data中的数据】,然后让该input框获取焦点,该怎么做?//Item组件中有一个input输入框和一个编辑按钮,实现点击按钮后input框显......