HarmonyOS 如何获取 base64图片的图片原始宽高？

Question

图片验证码场景，服务端返回两张base64 格式图片 背景图与验证图，需要根据背景图、原图大小计算缩放系数，从而计算验证图的大小与定位信息

Answer 1

使用Image Kit的能力，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-image-V5\#imageinfo

demo：

import util from '@ohos.util';
import { image } from '@kit.ImageKit';
@Entry
@Component
struct Index {
  @State message: string = 'getImage';
  @StorageLink('test') test: object = new Object;
  @State imageBase64: string =
    'iVBORw0KGgoAAAANSUhEUgAAADwAAAAUCAYAAADRA14pAAABN0lEQVR42mP4P8IAAy0Mjf6xAYxHnIcHo6cZaOlZYj38VbESjIech5E9SayHYZ5FxnT1cL7uFwxMbt4lxtPYPElLjzNg8ywhMWp6GOZBeiVzDA/jinFySmZSkzUpHn5oLosXk+1hYj2NXliRUnjh8hy5MYzP0wzEeIzUvEyNGCY3WZMUw5Qm61EPjzQPkwIGjYfp4VlsnianIULIs3gbHvT2LLZWFzVLZ7xNS3p7lBqAGM+CPZy6o+w/DGfvrv5ffagTjtuOT/4/8cxcOF50Zc3/5dc3wvHeh0fh+PDjk/8vv74Bx/c+PPz/8utrOP7559fg8LD/uqT/A4GpHdB7Q/XBmFBAMyBLPv70DCWWTjw7h2L42pvbUCxGdlTPqRkoji7Y24DiqdCN6f8HKnCRMcNA5bmBCmgACwohlRAJ3H4AAAAASUVORK5CYII='
  @State pixelMap: image.PixelMap | undefined = undefined;
  build() {
    Column() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(async () => {
          let helper = new util.Base64Helper();
          let buffer: ArrayBuffer = helper.decodeSync(this.imageBase64, util.Type.MIME).buffer as ArrayBuffer;
          let imageSource = image.createImageSource(buffer);
          let opts: image.DecodingOptions = { editable: true };
          this.pixelMap = await imageSource.createPixelMap(opts);
          this.pixelMap.getImageInfo().then((imageInfo : image.ImageInfo) => {
            if (imageInfo == undefined) {
              console.error(`Failed to obtain the image pixel map information.`);
            }
            let wit = imageInfo.size.width;
            let hig = imageInfo.size.height;
            console.log(`Succeeded in obtaining the image pixel map information., ${JSON.stringify(wit)}, ${JSON.stringify(hig)}`);
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}