#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 证明自己与刘亦菲的高相似度原创

紫妍是我

发布于 2024-8-15 21:57

浏览

0收藏

精彩预告（看完本篇，帅哥靓女们可以得到）：

把自己的照片跟某个明星的图片去对比，然后系统会根据对比结果给用户反馈跟明星的相似度，是否是本人照片。

看完我这篇各位彭于晏刘亦菲们可以尽情尝试认亲了！

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 证明自己与刘亦菲的高相似度-鸿蒙开发者社区

那么开发之前，我们需要哪些准备呢？

首先打开电脑开始对文档进行检索，发现鸿蒙的基础视觉服务。

随着对文档的解读发现：

人脸的对比集成起来不仅不需要导入第三方jar包和依赖sdk远程仓库，而且集成和使用起来也非常方便！

仅需要输入的两张比对图片是同一个人的照片时，可以看见其比对结果为同一个人，置信分数比较高；当两张比对图片不是同一个人的照片时，可以看见其比对结果为非同一个人，置信分数很低。

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 证明自己与刘亦菲的高相似度-鸿蒙开发者社区

那我们就可以通过这个置信分数来比较两个人的相似度，获取图片或者自拍与明星的相似度。

而且对比速度非常的快，后期可以优化为跟图片库进行对比，让你立马找到跟你相似的明星（我知道各位已经蠢蠢欲动证明自己就是彭于晏刘亦菲了)

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 证明自己与刘亦菲的高相似度-鸿蒙开发者社区

OK,上干货！

代码实现

既然要实现的功能是图片对比，那么可以推测出我们需要使用到哪些api

1. 图片源获取

2. 两张对比图片的展示

3. 对比结果相似度的输出

4. 是否是本人的结果输出

5. 图片选择和对比的触发组件

6. 对比算法（这里api已经在底层帮我们实现了，真是省好多力气）

我们先构建一个功能实现的大致ui框架，方便功能的实现

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 证明自己与刘亦菲的高相似度-鸿蒙开发者社区

1.1源文件获取

首先是图片源的获取，即需要应用文件访问，那就要用到@kit.CoreFileKit

进入@kit.CoreFileKit源码可以看到

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 证明自己与刘亦菲的高相似度-鸿蒙开发者社区

这个picker正是我们需要的，在通过进入@ohos.file.picker源码可以看到

我们可以使用这个方法拿到图片的选择回调

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 证明自己与刘亦菲的高相似度-鸿蒙开发者社区

接下来我们联合起来使用

new picker.PhotoViewPicker();
      photoPicker.select({
        MIMEType: picker.PhotoViewMIMETypes.IMAGE_TYPE,
        maxSelectNumber: 2
      }).then(res => {
        resolve(res.photoUris);
      })

这样我们就解决了第一个问题！继续！

2.1 图片展示

因为要展示两张图片，所以需要在页面内创建两个Image 组件用来加载，并且创建两个参数用来接收，因为图片的对比需要转换为PixelMap，所以我们定义如下

@State chooseImage: PixelMap | undefined = undefined

@State chooseImage1: PixelMap | undefined = undefined创建布局，并且插入默认图片

Row(){
        Image(this.chooseImage)
          .objectFit(ImageFit.Fill)
          .height(200)
          .alt($r('app.media.isloding'))
          .width(200)
          .borderRadius(100)
        Image(this.chooseImage1)
          .objectFit(ImageFit.Fill)
          .height(200)
          .width(200)
          .borderRadius(100)
          .alt($r('app.media.isloding'))

      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 证明自己与刘亦菲的高相似度-鸿蒙开发者社区

3.1对比相关方法

通过picker拿到图片

private openPhoto(): Promise<string[]> {
    return new Promise<string[]>((resolve, reject) => {
      let photoPicker = new picker.PhotoViewPicker();
      photoPicker.select({
        MIMEType: picker.PhotoViewMIMETypes.IMAGE_TYPE,
        maxSelectNumber: 2
      }).then(res => {
        resolve(res.photoUris);
      }).catch((err: BusinessError) => {
        reject();
      });
    });
  }

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 证明自己与刘亦菲的高相似度-鸿蒙开发者社区

图片加载

private loadImage(names: string[]) {
    setTimeout(async () => {
      let imageSource: image.ImageSource | undefined = undefined;
      let fileSource = await fileIo.open(names[0], fileIo.OpenMode.READ_ONLY);
      imageSource = image.createImageSource(fileSource.fd);
      this.chooseImage = await imageSource.createPixelMap();
      fileSource = await fileIo.open(names[1], fileIo.OpenMode.READ_ONLY);
      imageSource = image.createImageSource(fileSource.fd);
      this.chooseImage1 = await imageSource.createPixelMap();
    }, 100
    )
  }

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 证明自己与刘亦菲的高相似度-鸿蒙开发者社区

图片对比直接使用api提供的封装好的方法，在触发事件里进行调用即可

if(!this.chooseImage || !this.chooseImage1) {
请导入两张图片")
            return;
          }
          let visionInfo: faceComparator.VisionInfo = {
            pixelMap: this.chooseImage,
          };
          let visionInfo1: faceComparator.VisionInfo = {
            pixelMap: this.chooseImage1,
          };
          faceComparator.compareFaces(visionInfo, visionInfo1)
            .then((data: faceComparator.FaceCompareResult) => {
两人相似度为："+ this.toPercentage(data.similarity);

是":"不是")+ " 同一个人"
              this.dataValues = faceString;
              this.isSamePerson=isSamePerson
            })
            .catch((error: BusinessError) => {
              this.dataValues = `Error: ${error.message}`;
            });

#HarmonyOS NEXT体验官#如何运用HarmoneyOS NEXT 证明自己与刘亦菲的高相似度-鸿蒙开发者社区