图片尺寸约束

问题现象

在使用Image组件时，如何实现以下场景：

1. 图片不进行任何缩放、裁剪或拉伸，直接按图源宽度和高度渲染。
2. 如何自定义图片的显示尺寸，使其按相应比例进行缩放。

背景知识

• objectFit：设置图片的填充效果，使图片按照对应宽高比进行缩小或者放大。
• PixelMap：图像像素类，用于读取或写入图像数据以及获取图像信息。
• fitOriginalSize：设置图片的显示尺寸是否跟随图源尺寸，当图片组件已设置width、height属性时，该属性不生效。

解决方案

• 场景一：通过将Image的fitoriginalsize属性设为true，可以在Image组件未设置宽高的情况下适应图源尺寸。具体参考Column宽高自适应背景图片大小。
• 场景二：定义DecodingOptions，通过ImageSource构建PixelMap对象，并基于目标尺寸计算缩放比例后调用scaleSync方法实现动态图片缩放。
  1. 获取原始尺寸，通过pixelMap.getImageInfo获取图片的原始宽度和高度。
  2. 计算缩放比例，分别计算宽度和高度需要缩放的比例。
  3. 调用scaleSync方法，按照计算出的比例进行缩放。缩放操作会直接修改PixelMap对象本身。
  具体代码如下：

  import image from '@ohos.multimedia.image';
  import fs from '@ohos.file.fs';
  
  @Entry
  @Component
  struct Index {
    @State pixelMap: PixelMap | undefined = undefined;
    context: Context = this.getUIContext().getHostContext() as Context;
    path: string = this.context.filesDir + '/hehe.jpg';
    decodingOptions: image.DecodingOptions = {
      editable: true,
      desiredPixelFormat: 3,
    };
  
    async aboutToAppear(): Promise<void> {
      let resourceManager = this.context.resourceManager;
      let imageArray =
        await resourceManager.getMediaContent($r('app.media.BigImage').id); // 需开发者自行更换图片
      let file = fs.openSync(this.path, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
      try {
        fs.writeSync(file.fd, imageArray.buffer);
      } catch (err) {
      } finally {
        fs.closeSync(file);
      }
    }
  
    async packingDetail(targetWidth: number, targetHeight: number) {
      if (this.pixelMap) {
        let imageInfo = await this.pixelMap.getImageInfo();
        // 计算压缩比
        let scaleX: number = targetWidth / imageInfo.size.width;
        let scaleY: number = targetHeight / imageInfo.size.height;
        this.pixelMap.scaleSync(scaleX, scaleY);
      }
    }
  
    build() {
      Row() {
        Column() {
          Image(this.pixelMap)
            .width(200)
            .height(200)
            .backgroundColor(Color.Gray)
            .margin({ bottom: 40 })
            .objectFit(ImageFit.Contain)
  
          Button('1:3').onClick(async () => {
            const imageSource: image.ImageSource = image.createImageSource(this.path);
            // 创建pixelMap
            this.pixelMap = await imageSource.createPixelMap(this.decodingOptions);
            // 指定压缩宽、高
            this.packingDetail(100, 300);
          }).margin({ bottom: 20 })
  
          Button('1:2').onClick(async () => {
            // path为已获得的沙箱路径
            const imageSource: image.ImageSource = image.createImageSource(this.path);
            // 创建pixelMap
            this.pixelMap = await imageSource.createPixelMap(this.decodingOptions);
            // 指定压缩宽、高
            this.packingDetail(100, 200);
          })
        }
        .width('100%')
      }
      .height('100%')
    }
  }

常见FAQ

Q：ImageAnimator在设置了fixedSize之后，图片不会跟随组件宽高做拉伸。

A：设置fixedSize属性后，ImageAnimator将维持图片的原始宽高比。当图片原始尺寸与组件尺寸不一致时，图片会适配至ImageAnimator的宽高范围内显示，而不会被拉伸变形。