文档管理中心
指南媒体Scan Kit(统一扫码服务)码图生成通过文本生成码图

通过文本生成码图

码图生成能力支持将字符串转换为自定义格式的码图。

场景介绍

码图生成能力支持将字符串转换为自定义格式的码图,包含条形码、二维码生成。

可以将字符串转成联系人码图,手机克隆码图,例如将“HUAWEI”字符串生成码图使用。

约束与限制

码图生成能力支持Phone、Tablet、Wearable、PC/2in1、TV(从API版本5.1.0(18)开始支持Wearable,从API版本5.1.1(19)开始支持PC/2in1、TV)。

业务流程

  1. 用户向应用发起生成码图请求后,输入需要生成的码图信息,包括码图的类型、宽高等。

  2. 应用通过调用Scan Kit的createBarcode接口启动码图生成能力。

  3. Scan Kit通过将字符串转换为所需格式的码图并返回给应用。

  4. 应用向用户返回生成码图结果。

接口说明

接口返回值有两种返回形式:Callback和Promise回调。下表中为码图生成能力的Callback和Promise形式接口,Callback和Promise只是返回值方式不一样,功能相同。具体API说明详见接口文档

展开
接口名 接口描述
createBarcode(content: string, options: CreateOptions): Promise<image.PixelMap> 码图生成接口,返回生成的码图,类型为image.PixelMap,可以使用Image组件渲染成图片。使用Promise异步回调。
createBarcode(content: string, options: CreateOptions, callback: AsyncCallback<image.PixelMap>): void 码图生成接口,返回生成的码图,类型为image.PixelMap,可以使用Image组件渲染成图片。使用callback异步回调。

开发步骤

码图生成根据传参内容直接生成所需码图,需要传入固定参数和可选参数。

为了方便开发者接入,我们提供了详细的样例工程供参考,推荐参考示例工程接入。

以下示例为调用码图生成能力的createBarcode接口实现码图生成。

  1. 导入码图生成接口模块,该模块提供了码图生成的参数和方法,导入方法如下。

    收起
    自动换行
    深色代码主题
    复制
    1. // 导入码图生成需要的图片模块、错误码模块
    2. import { scanCore, generateBarcode } from '@kit.ScanKit';
    3. import { BusinessError } from '@kit.BasicServicesKit';
    4. import { image } from '@kit.ImageKit';
    5. import { hilog } from '@kit.PerformanceAnalysisKit';
  2. 调用码图生成能力的createBarcode接口实现码图生成。

    • 通过Promise方式回调,获取生成的码图。
      收起
      自动换行
      深色代码主题
      复制
      1. @Entry
      2. @Component
      3. struct Index {
      4. @State pixelMap: image.PixelMap | undefined = undefined;
      5. build() {
      6. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      7. Button('generateBarcode')
      8. .backgroundColor($r('sys.color.ohos_id_color_button_normal'))
      9. .fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
      10. .align(Alignment.Center)
      11. .type(ButtonType.Capsule)
      12. .width('90%')
      13. .margin({ bottom: 12 })
      14. .onClick(() => {
      15. // 以QR码为例,码图生成参数
      16. const content: string = 'huawei';
      17. const options: generateBarcode.CreateOptions = {
      18. scanType: scanCore.ScanType.QR_CODE,
      19. height: 400,
      20. width: 400
      21. };
      22. try {
      23. // 码图生成接口,成功返回PixelMap格式图片
      24. generateBarcode.createBarcode(content, options).then((pixelMap: image.PixelMap) => {
      25. this.pixelMap = pixelMap;
      26. }).catch((err: BusinessError) => {
      27. hilog.error(0x0001, '[generateBarcode]',
      28. `Failed to get PixelMap by promise with options. Code: ${err.code}, message: ${err.message}`);
      29. });
      30. } catch (err) {
      31. hilog.error(0x0001, '[generateBarcode]',
      32. `Failed to createBarcode by promise with options. Code: ${err.code}, message: ${err.message}`);
      33. }
      34. })
      35. // 获取生成码图后显示
      36. if (this.pixelMap) {
      37. Image(this.pixelMap).width(300).height(300).objectFit(ImageFit.Contain)
      38. }
      39. }
      40. .width('100%')
      41. .height('100%')
      42. }
      43. }
    • 通过Callback方式回调,获取生成的码图。
      收起
      自动换行
      深色代码主题
      复制
      1. @Entry
      2. @Component
      3. struct Index {
      4. @State pixelMap: image.PixelMap | undefined = undefined;
      5. build() {
      6. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      7. Button('generateBarcode')
      8. .backgroundColor($r('sys.color.ohos_id_color_button_normal'))
      9. .fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
      10. .align(Alignment.Center)
      11. .type(ButtonType.Capsule)
      12. .width('90%')
      13. .margin({ bottom: 12 })
      14. .onClick(() => {
      15. // 以QR码为例,码图生成参数
      16. const content: string = 'huawei';
      17. const options: generateBarcode.CreateOptions = {
      18. scanType: scanCore.ScanType.QR_CODE,
      19. height: 400,
      20. width: 400
      21. };
      22. try {
      23. // 码图生成接口,成功返回PixelMap格式图片
      24. generateBarcode.createBarcode(content, options, (err: BusinessError, pixelMap: image.PixelMap) => {
      25. if (err) {
      26. hilog.error(0x0001, '[generateBarcode]',
      27. `Failed to get PixelMap by callback with options. Code: ${err.code}, message: ${err.message}`);
      28. return;
      29. }
      30. this.pixelMap = pixelMap;
      31. });
      32. } catch (err) {
      33. hilog.error(0x0001, '[generateBarcode]',
      34. `Failed to createBarcode by callback with options. Code: ${err.code}, message: ${err.message}`);
      35. }
      36. })
      37. // 获取生成码图后显示
      38. if (this.pixelMap) {
      39. Image(this.pixelMap).width(300).height(300).objectFit(ImageFit.Contain)
      40. }
      41. }
      42. .width('100%')
      43. .height('100%')
      44. }
      45. }

模拟器开发

暂不支持模拟器开发,调用接口会返回错误信息“The capability is not supported on the emulator at this time.”

搜索
请输入您想要搜索的关键词