使用阿里云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><Imagekey={i}style={{ width: '100%', height: '100%' }}src={i}/></LazyLoad>)})}</View>);
}export default ImageComp;