使用阿里云oss图片处理实现大尺寸图片加载优化

背景

为方便客户减少图片的处理，h5端需要加载20m的大尺寸图片

思路

格式转换为webp
图片分割
懒加载

编码实战

import React, { useEffect, useState } from 'react';
import LazyLoad from 'react-lazyload';
import { View, Image } from '@tarojs/components';
import ss from './index.module.scss';

function ImageComp({
  imageSrc,
}) {
  const [imgList, setImgList] = useState<string[] | []>([])

  useEffect(() => {
    const xhr = new XMLHttpRequest()
    xhr.open('get', `${imageSrc}?x-oss-process=image/info`)
    // 使? xhr 对象中的 send ?法来发送请求 
    xhr.send()
    xhr.onreadystatechange = function () {
      // 监听xhr对象的请求状态 与服务器的响应状态
      if (this.readyState == 4 && this.status == 200) {
        // 如果响应就绪的话，就创建表格(拿到了服务器响应回来的数据xhr.responseText)
        console.log('xhr.responseText', JSON.parse(xhr.responseText))
        const imgInfo = JSON.parse(xhr.responseText)
        const heightUnit = Math.ceil(imgInfo.ImageWidth.value / 750); // 根据宽度确认是几倍图
        const heightSize = 600; // 用于分割的尺寸
        const imgNum = Math.ceil(imgInfo.ImageHeight.value / heightSize / heightUnit)
        const imgListTemp = Array.from(new Array(imgNum), (_, index) => `${imageSrc}?x-oss-process=image/format,webp/resize,w_750/indexcrop,y_${heightSize * heightUnit},i_${index}`)
        setImgList(imgListTemp)
        console.log('imgList', imgListTemp)
      }
    }
  }, [])

  return (
    <View className={ss.root}>
      {imgList.map(i => {
        return (
          <LazyLoad key={i} height={400} offset={200} once>
            <Image
              key={i}
              style={{ width: '100%', height: '100%' }}
              src={i}
            />
          </LazyLoad>
        )
      })}
    </View>
  );
}

export default ImageComp;

参考资料

阿里云对象存储oss>操作指南>数据处理>图片处理