轻松搞定uniapp图片缩放，get自适应等比缩放秘籍

2023-06-26 03:26:25

Uniapp 图片等比缩放：保持图像清晰与美感

一、图片等比缩放的必要性

在 Uniapp 开发中，图片展示至关重要。为了确保图片在不同设备和屏幕尺寸上都能清晰呈现，我们需要对图片进行等比缩放处理。等比缩放可以防止图片在放大或缩小时变形，保持原有的宽高比。

二、Uniapp 图片等比缩放步骤

导入图片缩放库：

import { Image } from '@tarojs/taro'

定义图片缩放函数：

const scaleImage = (image, maxWidth, maxHeight) => {
  const { width, height } = image
  if (width > maxWidth || height > maxHeight) {
    const ratio = Math.min(maxWidth / width, maxHeight / height)
    return {
      width: Math.floor(width * ratio),
      height: Math.floor(height * ratio)
    }
  }
  return {
    width,
    height
  }
}

在页面中使用图片缩放函数：

const scaledImage = scaleImage(image, 300, 200)

渲染缩放后图片：

<Image src={scaledImage.src} width={scaledImage.width} height={scaledImage.height} />

三、图片等比缩放注意事项

指定缩放尺寸： 使用图片缩放函数时，需要指定缩放后的最大宽度和高度，防止图片过大或过小。
宽高比不符： 若图片宽高比与缩放后的宽高比不一致，图片可能被裁剪。
保持原有宽高比： 缩放时务必保持图片原有宽高比，避免变形。

四、Uniapp 图片等比缩放实例

import { Image } from '@tarojs/taro'
import { scaleImage } from '../utils/image'

const Page = () => {
  const image = {
    src: 'https://example.com/image.jpg',
    width: 600,
    height: 400
  }

  const scaledImage = scaleImage(image, 300, 200)

  return (
    <View>
      <Image src={scaledImage.src} width={scaledImage.width} height={scaledImage.height} />
    </View>
  )
}

export default Page