uniapp如何按照屏幕比例来预览图片得缩放比例

在 uni-app 中，可以使用 `uni.previewImage` 来预览图片，并且可以按照屏幕比例来缩放图片。具体实现步骤如下：

1. 获取图片宽高比例

在获取到图片链接后，可以通过 `uni.getImageInfo` API 来获取图片宽高比例。

uni.getImageInfo({
  src: '/static/image.jpg',
  success: res => {
    const ratio = res.width / res.height
    // 保存图片宽高比例
  }
})

2. 在 `previewImage` 中指定缩放比例

在调用 `uni.previewImage` API 时，可以在 `urls` 参数中指定要预览的图片链接，并在 `current` 参数中指定当前预览的图片链接。

同时，可以在 `indicator` 参数中指定是否显示图片指示器，以及图片指示器的样式。

在 `loop` 参数中指定是否开启图片轮播，可以实现滑动下一张图片的效果。

uni.previewImage({
  urls: ['/static/image.jpg'],
  current: '/static/image.jpg',
  indicator: 'default',
  loop: true,
  success: res => {
    console.log('success')
  },
  fail: err => {
    console.log('fail')
  }
})

3. 根据图片宽高比例计算缩放比例

在调用 `uni.previewImage` API 时，可以在 `urls` 参数中指定要预览的图片链接，并在 `current` 参数中指定当前预览的图片链接。

同时，可以在 `indicator` 参数中指定是否显示图片指示器，以及图片指示器的样式。

在 `loop` 参数中指定是否开启图片轮播，可以实现滑动下一张图片的效果。

uni.getImageInfo({
  src: '/static/image.jpg',
  success: res => {
    const ratio = res.width / res.height
    const windowWidth = uni.getSystemInfoSync().windowWidth
    const windowHeight = uni.getSystemInfoSync().windowHeight
    const screenWidth = windowWidth * 2
    const screenHeight = windowHeight * 2
    const max = Math.max(screenWidth, screenHeight)
    const min = Math.min(screenWidth, screenHeight)
    const scale = max / (min * ratio)
    uni.previewImage({
      urls: ['/static/image.jpg'],
      current: '/static/image.jpg',
      indicator: 'default',
      loop: true,
      success: res => {
        console.log('success')
      },
      fail: err => {
        console.log('fail')
      },
      // 指定缩放比例
      complete: () => {
        uni.setStorageSync('imageScale', scale)
      }
    })
  }
})

在 `complete` 回调函数中，可以通过 `uni.setStorageSync` API 将缩放比例保存到本地缓存中。

4. 在 `previewImage` 中指定缩放比例

在调用 `uni.previewImage` API 时，可以在 `urls` 参数中指定要预览的图片链接，并在 `current` 参数中指定当前预览的图片链接。

同时，可以在 `indicator` 参数中指定是否显示图片指示器，以及图片指示器的样式。

在 `loop` 参数中指定是否开启图片轮播，可以实现滑动下一张图片的效果。

const scale = uni.getStorageSync('imageScale')

uni.previewImage({
  urls: ['/static/image.jpg'],
  current: '/static/image.jpg',
  indicator: 'default',
  loop: true,
  success: res => {
    console.log('success')
  },
  fail: err => {
    console.log('fail')
  },
  // 指定缩放比例
  complete: () => {
    uni.setStorageSync('imageScale', scale)
  },
  // 按照屏幕比例缩放图片
  beforeImageLoad: () => {
    return {
      width: '100%',
      height: 'auto',
      'max-width': 'none',
      transform: `scale(${scale})`,
      'transform-origin': 'top left'
    }
  }
})

在 `beforeImageLoad` 回调函数中，可以根据缩放比例来计算图片的宽高和缩放比例，并将其应用到图片上。

以上就是按照屏幕比例来缩放图片并预览的实现步骤。