HarmonyOS鸿蒙Next中Image组件宽高等比例放大后，图片模糊如何解决

【问题现象】

预期效果：一张小图放大后，仍然能够清晰显示不模糊。

实际效果：使用Image组件，使用最近邻插值算法，将宽高等比例放大，图片显示会模糊。按照文档设置了interpolation(ImageInterpolation.High)，也没有效果。

【定位思路】

1. 系统提供了不同的插值算法，interpolation不同的设置采用了不同的算法，None是最近邻插值，high是Cubic插值。
2. Cubic插值抗锯齿的原理是对这种边界线的每个像素点进行更多点的插值计算，但会带来模糊。
3. interpolation可设置为None，采用最近邻插值算法，放大不模糊。

【背景知识】

• 设置图片的插值效果
• 图片的插值效果取值

【解决方案】

设置Image.interpolation(ImageInterpolation.None) 可实现放大不模糊。

示例代码如下：

@Entry
@Component
struct Index {
  @State picWidth: number = 100

  build() {
    Row() {
      Column() {
        Image($r("app.media.ic_banner02"))
          .width(this.picWidth)
          .objectFit(ImageFit.Contain)
          .interpolation(ImageInterpolation.None)
          .autoResize(false)
        Button('点击图片放大').onClick(()=>this.picWidth+=50)
        Button('点击图片缩小').onClick(()=>this.picWidth-=50)
      }
      .width('100%')
    }
    .height('100%')
  }
}

说明

interpolation不同的设置采用了不同的算法，None是最近邻插值，high是Cubic插值。抗锯齿的原理是对这种边界线的每个像素点进行更多点的插值计算，但会带来模糊。