React图片预览组件，支持缩放、旋转、上一张下一张功能

唐点伯虎 發表於 2020-7-25 18:06:00

React图片预览组件，支持缩放、旋转、上一张下一张功能

1、功能需求：由于项目业务需要一个图片预览的功能，又不想引入太多组件依赖，所以决定自己编写一套，实现了图片放大缩小、旋转、查看下一张或上一张图片功能，如图1.0截图所示。
2、外部资源：这里的icon图标采用的是 iconfont 里面的图标，可自行寻找自己喜欢的图标代替，或者使用默认的图标，默认的图标css地址为
　　https://at.alicdn.com/t/font_1966765_c473t2y8dvr.css
3、功能说明：该组件支持鼠标滚轮放大缩小及esc关闭功能，也可通过配置进行禁用，根据项目实际应用进行配置。这里采用的 less 进行样式编写。
4、组件名称：Photo-preview。
5、组件截图：
     <img src="https://img2020.cnblogs.com/blog/659357/202007/659357-20200725175849480-408291671.png">
　　　　　　　　　　　　　　　　　   　图1.0截图    
6、组件代码：
less 样式：
<div class="cnblogs_code"><img id="code_img_closed_08756f83-f7a1-44b3-9de5-45cea18de170" class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_08756f83-f7a1-44b3-9de5-45cea18de170" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_08756f83-f7a1-44b3-9de5-45cea18de170" class="cnblogs_code_hide">
<pre>.photo-preview__thumb-img {
cursor: pointer;
}

.photo-preview {
margin: 0;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 999999;
background-color: rgba(0, 0, 0, 0.5);
animation: fadeIn 0.4s;

.photo-preview__in {
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 overflow: auto;
 user-select: none;
 display: flex;
 justify-content: center;
 align-items: center;

 &::-webkit-scrollbar {
 width: 15px;
 height: 15px;
 }

 &::-webkit-scrollbar-track {
 border-radius: 0;
 }

 &::-webkit-scrollbar-thumb {
 border-radius: 0;
 background-color: silver;
 }

 .photo-preview__img-wrap {
 transition-duration: 0.2s;
 position: absolute;
 .photo-preview__img-placeholder {
 display: block;
 width: 100%;
 height: 100%;
 position: absolute;
 pointer-events: none;
 }
 img {
 position: absolute;
 width: 100%;
 height: 100%;
 // cursor: move;
 }
 }
}

.photo-preview__loading {
 position: relative;
 &::before {
 content: ' ';
 display: block;
 border-top: 5px solid #999999;
 border-right: 5px solid #999999;
 border-bottom: 5px solid #999999;
 border-left: 5px solid #ffffff;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 animation: rotating 0.8s linear 0s infinite;
 }
}

.photo-preview__tool {
 border-radius: 45px;
 padding: 5px 10px;
 height: 45px;
 background-color: #ffffff;
 opacity: 0.3;
 position: fixed;
 top: 20px;
 right: 20px;
 user-select: none;
 transition-duration: 0.5s;
 display: flex;

 &:hover {
 opacity: 0.9;
 }

 .iconfont {
 font-size: 25px;
 text-align: center;
 width: 35px;
 height: 35px;
 line-height: 35px;
 color: #444444;
 // display: inline-block;
 transition-duration: 0.4s;
 margin: 0 2px;
 cursor: pointer;
 }

 .icon-close:hover {
 transform: scale(1.15);
 }

 .icon-turn-left {
 transform: rotate(50deg);
 }

 .icon-turn-left:hover {
 transform: rotate(0deg);
 }

 .icon-turn-right {
 transform: rotate(-50deg);
 }

 .icon-turn-right:hover {
 transform: rotate(0deg);
 }
 .icon-go-left,
 .icon-go-right {
 & {
 // pointer-events: none;
 cursor: wait;
 }
 }
}
}

body {
overflow: hidden;
}

// 渐现
@keyframes fadeIn {
0% {
 opacity: 0;
}

100% {
 opacity: 1;
}
}

// 旋转
@keyframes rotating {
0% {
 transform: rotate(0deg);
}

100% {
 transform: rotate(360deg);
}
}</pre>
</div>
View Code</div>
js 组件代码：
<div class="cnblogs_code"><img id="code_img_closed_377d902d-1f69-4d71-8069-10fe479e5bbf" class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_377d902d-1f69-4d71-8069-10fe479e5bbf" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_377d902d-1f69-4d71-8069-10fe479e5bbf" class="cnblogs_code_hide">
<pre>/**
* @param {type: number, desc: 当前点击的图片索引} imgIndex
* @param {type: array, desc: 传入的图片列表，结构也应该是[{bigUrl:'imgUrl', alt:'图片描述'}]} imgs
* @param {type: string, desc: 弹框显示出来的大图} bigUrl
* @param {type: string, desc: 默认显示的小图片} url
* @param {type: string, desc: 图片描述} alt
* @param {type: object, desc: 操作按钮显示，默认都显示，如果对象中指定哪个按钮为false那么表示不显示,
example : {
 toSmall: bool,//缩小按钮是否显示
 toBig: bool, //放大按钮是否显示
 turnLeft: bool, //左转按钮是否显示
 turnRight: bool//右转按钮是否显示
 close: bool, //关闭按钮是否显示
 esc: bool, //键盘中的esc键事件是否触发
 mousewheel: bool, // 鼠标滚轮事件是否触发
}} tool
*
* 示例: @example
*<PhotoPreview
* bigUrl={item.bigUrl}
* url={item.url}
* alt={item.alt}
* tool={{ turnLeft: false, turnRight: false }}
* />
*
*/
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import '@/less/components/photo-preview.less';

class PhotoPreview extends React.Component {
constructor(props) {
 super(props);
 this.state = {
 bigUrl: props.bigUrl === '' ? props.url : props.bigUrl,
 tool: Object.assign(PhotoPreview.defaultProps.tool, props.tool),
 imgIndex: props.imgIndex,
 imgs: props.imgs,

 loadEl: true, // loading元素显示隐藏
 figureEl: false, // 生成图片预览元素
 imgOriginalWidth: 0, // 当前大图默认宽度值
 imgOriginalHeight: 0, // 当前大图默认高度值
 imgAttr: {
 // 大图的地址及描述
 src: '',
 alt: '',
 },
 imgParentStyle: {
 // 大图父级div元素样式
 width: '0px',
 height: '0px',
 },
 rotateDeg: 0, // 图片旋转角度
 increaseNum: 20, // 图片放大时距离空隙
 };

 // 获取相关元素
 this.bigImgRef = React.createRef();
 this.ppiRef = React.createRef();
}

// 预览图片超出window宽或高的处理
beyondWindow = () => {
 const { imgParentStyle, rotateDeg, increaseNum } = this.state;
 const iWidth = parseFloat(imgParentStyle.width) + increaseNum * 2;
 const iHeight = parseFloat(imgParentStyle.height) + increaseNum * 2;
 const ppiEl = this.ppiRef.current;

 let ips = imgParentStyle;
 if (rotateDeg % 360 === 90 || rotateDeg % 360 === 270) {
 if (iHeight > window.innerWidth) {
 ips = { ...ips, left: `${(iHeight - iWidth) / 2 + increaseNum}px` };
 } else {
 ips = { ...ips, left: 'auto' };
 }
 if (iWidth > window.innerHeight) {
 ips = { ...ips, top: `${(iWidth - iHeight) / 2 + increaseNum}px` };
 } else {
 ips = { ...ips, top: 'auto' };
 }
 } else if (
 (rotateDeg % 360 === -90 && iWidth > iHeight) ||
 (rotateDeg % 360 === -270 && iWidth > iHeight)
 ) {
 // 如果是-90或-270，并且图片宽大于高的话，那么则需要做兼容处理
 let left = 'auto';
 let top = 'auto';
 if (iHeight > ppiEl.clientWidth) {
 left = `${-(iHeight / 2) + increaseNum * 2}px`;
 }
 if (iWidth > ppiEl.clientHeight) {
 top = `${iHeight / 2 + increaseNum / 2}px`;
 }
 ips = { ...ips, left: `${left}`, top: `${top}` };
 } else if (
 (rotateDeg % 360 === -90 && iHeight > iWidth) ||
 (rotateDeg % 360 === -270 && iHeight > iWidth)
 ) {
 // 如果是-90或-270，并且图片高大于宽的话，那么则需要做兼容处理
 let left = 'auto';
 let top = 'auto';
 if (iHeight > ppiEl.clientWidth) {
 left = `${iWidth / 2}px`;
 }
 if (iWidth > ppiEl.clientHeight) {
 top = `${-(iWidth / 2) + increaseNum * 2}px`;
 }

 ips = { ...ips, left: `${left}`, top: `${top}` };
 } else {
 if (iWidth > window.innerWidth) {
 ips = { ...ips, left: `${increaseNum}px` };
 } else {
 ips = { ...ips, left: 'auto' };
 }
 if (iHeight > window.innerHeight) {
 ips = { ...ips, top: `${increaseNum}px` };
 } else {
 ips = { ...ips, top: 'auto' };
 }
 }
 this.setState({
 imgParentStyle: ips,
 });
};

// 图片缩小事件
toSmallEvent = () => {
 const { tool, imgParentStyle, imgOriginalWidth, imgOriginalHeight } = this.state;
 if (tool.toSmall === false) {
 return;
 }
 let width = parseFloat(imgParentStyle.width) / 1.5;
 let height = parseFloat(imgParentStyle.height) / 1.5;
 // 图片缩小不能超过5倍
 if (width < imgOriginalWidth / 5) {
 width = imgOriginalWidth / 5;
 height = imgOriginalHeight / 5;
 }
 this.setState(
 {
 imgParentStyle: Object.assign(imgParentStyle, {
 width: `${width}px`,
 height: `${height}px`,
 }),
 },
 () => {
 this.beyondWindow();
 }
 );
};

// 图片放大事件
toBigEvent = () => {
 const { tool, imgParentStyle, imgOriginalWidth, imgOriginalHeight } = this.state;
 if (tool.toBig === false) {
 return;
 }
 let width = parseFloat(imgParentStyle.width) * 1.5;
 let height = parseFloat(imgParentStyle.height) * 1.5;
 // 图片放大不能超过5倍
 if (width > imgOriginalWidth * 5) {
 width = imgOriginalWidth * 5;
 height = imgOriginalHeight * 5;
 }
 this.setState(
 {
 imgParentStyle: Object.assign(imgParentStyle, {
 width: `${width}px`,
 height: `${height}px`,
 }),
 },
 () => {
 this.beyondWindow();
 }
 );
};

// 向左旋转事件
turnLeftEvent = () => {
 const { tool, rotateDeg, imgParentStyle } = this.state;
 if (tool.turnLeft === false) {
 return;
 }
 const iRotateDeg = rotateDeg - 90;
 this.setState(
 {
 imgParentStyle: Object.assign(imgParentStyle, {
 transform: `rotate(${iRotateDeg}deg)`,
 }),
 rotateDeg: iRotateDeg,
 },
 () => {
 this.beyondWindow();
 }
 );
};

// 向右旋转事件
turnRightEvent = () => {
 const { tool, rotateDeg, imgParentStyle } = this.state;
 if (tool.turnRight === false) {
 return;
 }
 const iRotateDeg = rotateDeg + 90;
 this.setState(
 {
 imgParentStyle: Object.assign(imgParentStyle, {
 transform: `rotate(${iRotateDeg}deg)`,
 }),
 rotateDeg: iRotateDeg,
 },
 () => {
 this.beyondWindow();
 }
 );
};

// 上一张图片
goLeftEvent = () => {
 const { imgIndex, imgs, loadEl } = this.state;
 // 如果还在loading加载中，不予许上一张下一张操作
 if (loadEl) {
 return;
 }
 const nImgIndex = imgIndex - 1;
 // console.log(nImgIndex);
 if (nImgIndex < 0) {
 return;
 }
 this.setState(
 {
 imgIndex: nImgIndex,
 rotateDeg: 0,
 imgParentStyle: {
 width: '0px',
 height: '0px',
 },
 },
 () => {
 this.photoShow(imgs.bigUrl, imgs.alt, false);
 }
 );
};

// 下一张图片
goRightEvent = () => {
 const { imgIndex, imgs, loadEl } = this.state;
 // 如果还在loading加载中，不予许上一张下一张操作
 if (loadEl) {
 return;
 }
 const nImgIndex = imgIndex + 1;
 // console.log(nImgIndex);
 if (nImgIndex > imgs.length - 1) {
 return;
 }
 this.setState(
 {
 imgIndex: nImgIndex,
 rotateDeg: 0,
 imgParentStyle: {
 width: '0px',
 height: '0px',
 },
 },
 () => {
 // 如果不存在大图，那么直接拿小图代替。
 const bigUrl = imgs.bigUrl || imgs.url;
 this.photoShow(bigUrl, imgs.alt);
 }
 );
};

// 关闭事件
closeEvent = () => {
 // 恢复到默认值
 const { imgIndex, imgs } = this.props;
 this.setState({
 imgIndex,
 imgs,
 figureEl: false,
 rotateDeg: 0,
 imgParentStyle: {
 width: '0px',
 height: '0px',
 },
 });
 window.removeEventListener('mousewheel', this._psMousewheelEvent);
 window.removeEventListener('keydown', this._psKeydownEvent);
 window.removeEventListener('resize', this._psWindowResize);
 document.body.removeAttribute('photo-preview-show');
};

// 大图被执行拖拽操作
bigImgMouseDown = (event) => {
 event.preventDefault();
 const ppiEl = this.ppiRef.current;
 const bigImgEl = this.bigImgRef.current;
 const diffX = event.clientX - bigImgEl.offsetLeft;
 const diffY = event.clientY - bigImgEl.offsetTop;
 // 鼠标移动的时候
 bigImgEl.onmousemove = (ev) => {
 const moveX = parseFloat(ev.clientX - diffX);
 const moveY = parseFloat(ev.clientY - diffY);
 const mx = moveX > 0 ? -moveX : Math.abs(moveX);
 const my = moveY > 0 ? -moveY : Math.abs(moveY);
 let sl = ppiEl.scrollLeft + mx * 0.1;
 let sr = ppiEl.scrollTop + my * 0.1;
 if (sl <= 0) {
 sl = 0;
 } else if (sl >= ppiEl.scrollWidth - ppiEl.clientWidth) {
 sl = ppiEl.scrollWidth - ppiEl.clientWidth;
 }
 if (sr <= 0) {
 sr = 0;
 } else if (sr >= ppiEl.scrollHeight - ppiEl.clientHeight) {
 sr = ppiEl.scrollHeight - ppiEl.clientHeight;
 }
 ppiEl.scrollTo(sl, sr);
 };
 // 鼠标抬起的时候
 bigImgEl.onmouseup = () => {
 bigImgEl.onmousemove = null;
 bigImgEl.onmouseup = null;
 };
 // 鼠标离开的时候
 bigImgEl.onmouseout = () => {
 bigImgEl.onmousemove = null;
 bigImgEl.onmouseup = null;
 };
};

// 鼠标滚轮事件
_psMousewheelEvent = (event) => {
 // event.preventDefault();
 const { figureEl, tool } = this.state;
 if (figureEl && tool.mousewheel) {
 if (event.wheelDelta > 0) {
 this.toBigEvent();
 } else {
 this.toSmallEvent();
 }
 }
};

// 键盘按下事
_psKeydownEvent = (event) => {
 const { figureEl, tool } = this.state;
 if (event.keyCode === 27 && tool.esc && figureEl) {
 this.closeEvent();
 }
};

// 窗口发生改变的时候
_psWindowResize = () => {
 const { figureEl } = this.state;
 if (figureEl) {
 this.beyondWindow();
 }
};

// 图片展示
photoShow = (url, alt, winEventToggle) => {
 // 图片加载并处理
 this.setState({
 loadEl: true,
 figureEl: true,
 });
 const img = new Image();
 img.src = url;
 img.onload = async () => {
 this.setState(
 {
 loadEl: false,
 imgOriginalWidth: img.width,
 imgOriginalHeight: img.height,
 imgAttr: {
 src: url,
 alt,
 },
 imgParentStyle: {
 width: `${img.width}px`,
 height: `${img.height}px`,
 },
 },
 () => {
 this.beyondWindow();
 }
 );
 };

 // 是否需再次执行window事件
 const wev = winEventToggle || true;
 if (wev) {
 // console.log('wev');
 // window触发事件
 window.addEventListener('mousewheel', this._psMousewheelEvent);
 window.addEventListener('keydown', this._psKeydownEvent);
 window.addEventListener('resize', this._psWindowResize);
 document.body.setAttribute('photo-preview-show', 'true');
 }
};

UNSAFE_componentWillReceiveProps(newProps) {
 console.log(`new-props:${newProps.nImgIndex}`);
}

render() {
 const { alt, url } = this.props;
 const {
 bigUrl,
 tool,
 figureEl,
 loadEl,
 imgAttr,
 imgParentStyle,
 imgIndex,
 imgs,
 increaseNum,
 } = this.state;
 const iParentStyle = { ...imgParentStyle };
 const iSpanStyle = {
 width: `${parseFloat(imgParentStyle.width) + increaseNum * 2}px`,
 height: `${parseFloat(imgParentStyle.height) + increaseNum * 2}px`,
 };
 return (
 <>
 <img
 onClick={this.photoShow.bind(this, bigUrl, alt)}
 src={url}
 alt={alt}
 className="photo-preview__thumb-img"
 />
 {figureEl
 ? ReactDOM.createPortal(
 <>
 <figure className="photo-preview">
 <div className="photo-preview__in" ref={this.ppiRef}>
 {loadEl ? (
 <div className="photo-preview__loading"></div>
 ) : (
 <div
 className="photo-preview__img-wrap"
 style={iParentStyle}
 >
 <span
 className="photo-preview__img-placeholder"
 style={{
 ...iSpanStyle,
 marginLeft: `-${increaseNum}px`,
 marginTop: `-${increaseNum}px`,
 }}
 >
 <img
 src={imgAttr.src}
 alt={imgAttr.alt}
 onMouseDown={this.bigImgMouseDown}
 ref={this.bigImgRef}
 />
 </div>
 )}
 <div className="photo-preview__tool">
 {tool.toSmall ? (
 <i
 className="iconfont icon-to-small"
 onClick={this.toSmallEvent}
 >
 ) : null}
 {tool.toBig ? (
 <i
 className="iconfont icon-to-big"
 onClick={this.toBigEvent}
 >
 ) : null}
 {tool.turnLeft ? (
 <i
 className="iconfont icon-turn-left"
 onClick={this.turnLeftEvent}
 >
 ) : null}
 {tool.turnRight ? (
 <i
 className="iconfont icon-turn-right"
 onClick={this.turnRightEvent}
 >
 ) : null}

 {imgIndex !== '' && imgs.length > 1 ? (
 <>
 <i
 className="iconfont icon-go-left"
 onClick={this.goLeftEvent}
 data-disable={loadEl ? 'true' : 'false'}
 >
 <i
 className="iconfont icon-go-right"
 onClick={this.goRightEvent}
 data-disable={loadEl ? 'true' : 'false'}
 >
 </>
 ) : null}

 {tool.close ? (
 <i
 className="iconfont icon-close"
 onClick={this.closeEvent}
 >
 ) : null}
 </div>
 </div>
 </figure>
 </>,
 document.body
 )
 : null}
 </>
 );
}
}

PhotoPreview.defaultProps = {
bigUrl: '',
alt: '',
tool: {
 toSmall: true, // 缩小按钮
 toBig: true, // 放大按钮
 turnLeft: true, // 左转按钮
 turnRight: true, // 右转按钮
 close: true, // 关闭按钮
 esc: true, // esc键触发
 mousewheel: true, // 鼠标滚轮事件是否触发
 },
imgIndex: '',
imgs: [],
};
PhotoPreview.propTypes = {
bigUrl: PropTypes.string,
url: PropTypes.string.isRequired,
alt: PropTypes.string,
tool: PropTypes.object,
imgIndex: PropTypes.number,
imgs: PropTypes.array,
};
export default PhotoPreview;</pre>
</div>
View Code</div>
js 组件案例代码：
<div class="cnblogs_code"><img id="code_img_closed_17bb6d1e-49f4-4f4d-bbaf-30e4fa3de875" class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_17bb6d1e-49f4-4f4d-bbaf-30e4fa3de875" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_17bb6d1e-49f4-4f4d-bbaf-30e4fa3de875" class="cnblogs_code_hide">
<pre>import React from 'react';
// 导入图片预览组件
import PhotoPreview from '@/components/photo-preview';

// 模拟图片列表数据
const atlasImgList = [
{
 url: 'http://dummyimage.com/200x100/ff3838&text=Hello',
 bigUrl: 'http://dummyimage.com/800x400/ff3838&text=Hello',
 alt: 'Hello',
},
{
 url: 'http://dummyimage.com/200x100/ff9f1a&text=Photo',
 bigUrl: 'http://dummyimage.com/800x400/ff9f1a&text=Photo',
 alt: 'Photo',
},
{
 url: 'http://dummyimage.com/200x100/c56cf0&text=Preview',
 bigUrl: 'http://dummyimage.com/800x400/c56cf0&text=Preview',
 alt: 'Preview',
},
{
 url: 'http://dummyimage.com/100x100/3ae374&text=!',
 bigUrl: 'http://dummyimage.com/400x400/3ae374&text=!',
 alt: '！',
},
];

const Test = () => {
return (
 <>
 {atlasImgList.map((item, index) => {
 return (
 <PhotoPreview
 key={index}
 imgIndex={index}
 imgs={atlasImgList}
 url={item.url}
 bigUrl={item.bigUrl}
 alt={item.alt}
 // tool={{ turnLeft: false, turnRight: false }}
 />
 );
 })}
 </>
 );
};

export default Test;</pre>
</div>
View Code</div>
  
来源：https://www.cnblogs.com/zion0707/p/13377652.html

頁: [1]

琼殿技术论坛's Archiver

React图片预览组件，支持缩放、旋转、上一张下一张功能