做一个单纯的react-image显示组件
最近项目上有一个需求，在显示图片的时候，需要传递自定义的头部就行认证。google了一番之后，发现没有现成的组件库可以使用【也可能是我没找到】，所以请求图片只能采用xhr方式来异步加载。下面就是在做这个组件库时的一些笔记，主要关注以下两个点：
- 图片的等比例缩放处理
- 在请求图片的过程中，由于是异步加载，如果后加载的一个图片太小，而前一个图片过大，就会有图片显示不正确的问题
图片的缩放处理
最开始想到的是使用CSS 属性background来显示图片，后来发现使用CSS的background-size实现按照比例缩放图片好像有点困难，具体如下：
- 如果图片原始的尺寸小于外层容器的尺寸，我希望它居中显示
- 如果图片原始尺寸大于外层尺寸
- 如果ratio > 1 (imageWidth / imageHeight)，图片应该按照宽度来进行缩放
- 如果ratio = 1, 图片等比例缩放
- 如果ratio < 1, 图片按照高度来缩放
因为要取到图片的原始尺寸，使用img标签显示也会有点问题。所以最终采用的是new Image()这个Web Api来创建的图片。具体代码如下：
export const getImage = (src: string) => (
new Promise((resolve, reject) => {
const image = new Image();
image.onload = () => resolve(image);
image.onerror = () => reject(new Error(NETWORK_ERROR));
image.src = src;
image.crossOrigin = '';
return image;
})
);
同时，图片缩放的部分代码如下：
if (ratio > 1) {
if (imageWidth > wrapperWidth) {
displayWidth = wrapperWidth;
displayHeight = parseInt(`${(1 / ratio) * wrapperWidth}`, 10);
}
} else if (ratio === 1) {
if (imageWidth > wrapperWidth) {
displayWidth = wrapperWidth;
displayHeight = wrapperWidth;
} else {
displayWidth = wrapperHeight;
displayHeight = wrapperHeight;
}
} else if (imageHeight > wrapperHeight) {
displayWidth = parseInt(`${ratio * wrapperHeight}`, 10);
displayHeight = wrapperHeight;
}
图片的覆盖问题
因为需要进行头部的认证，所以请求图片的方式统一使用了XHR的方式来进行请求，然后就会造成图片覆盖的问题。造成这个原因是，当出现了图片地址替换的时候，比如类似下面的代码：
const [src, setSrc] = useState(src1);
useEffect(() => { setTimeout(() => setSrc(src2)); }, [src]);
return (
<div className="App">
<Image width={50} height={100} src={src} errorMessage="something bad happen" />
</div>
);
上述代码中的src2会后被加载，如果src1的加载速度比src2的加载速度快倒没有什么问题，但是反之，就会出现后加载的图片反而被先加载的图片进行覆盖。那么，怎么解决这个问题：
想到的办法是，当开始加载后一个图片时，首先进行判断是否存在上一个加载图片的请求，如果存在，则直接abort，类似于debounce的做法。具体的做法如下：
-
声明一个图片请求的类，专门用来作图片请求
export default class ImageRequest { xmlHttpRequest: XMLHttpRequest; url: string; headers: XMLHttpRequestHeaders; setHeaders() { if (this.headers) { const keys = Object.keys(this.headers); keys.forEach((key: string) => { this.xmlHttpRequest.setRequestHeader(key, this.headers[key]); }); } } request(url: string, headers: XMLHttpRequestHeaders) { this.url = url; this.headers = headers; if (this.xmlHttpRequest) { this.xmlHttpRequest.abort(); } this.xmlHttpRequest = new XMLHttpRequest(); this.xmlHttpRequest.open('GET', this.url); this.xmlHttpRequest.responseType = 'blob'; this.setHeaders(); this.xmlHttpRequest.send(); return new Promise((resolve, reject) => { this.xmlHttpRequest.onload = () => { this.xmlHttpRequest = null; if (this.xmlHttpRequest.status === 200) { resolve(this.xmlHttpRequest.response); } else { reject(new Error(`${IMAGE_LOAD_ERROR}${this.xmlHttpRequest.statusText}`)); } }; this.xmlHttpRequest.onerror = () => { reject(new Error(NETWORK_ERROR)); }; }); } }在每个实例中维持一个
XMLHttpRequest的引用，每当进行请求的时候，首先判断当前引用是否存在，如果存在，则直接abort，否则，则进行图片的请求。同时在组件中，需要创建一个实例// 记住，不能在组件外部声明实例，需要保存在每一个组件中，确保每一个组件都有一个新的请求实例 // const imageRequest: ImageRequest = new ImageRequest(); const Image: React.FC<Props> = (props) => { const [request] = useState<ImageRequest>(new ImageRequest()); useEffect(() => { if (src) { setState(LOADING_STATE.LOADING); loadImage(request, src, headers).then((img: HTMLImageElement) => { const { displayWidth, displayHeight } = getDisplayImageSize(img, width, height); const displayImage = img; displayImage.width = displayWidth; displayImage.height = displayHeight; setState({ ...LOADING_STATE.SUCCESS, image: displayImage }); }).catch(() => setState(LOADING_STATE.FAIL)); } }, [loadImage, src]); // ... };注意，这里的
ImageRequest实例只能保存在组件的state中，因为如果在组件开始使用const引入，如果一个页面中存在多个相同组件时，就会导致多个组件共享一个request实例中的xmlHttpRequest引用，就会出现前面的图片全部都会被abort掉的情况。
总结
看是简单的问题，做起来也会比较复杂，口说的没用，做起来才行。
最后，项目地址：https://github.com/Rynxiao/react-image，npm包地址：https://www.npmjs.com/package/rt-image，欢迎留言和star
