当前位置：首页 > news >正文

antd+react实现html图片预览效果

news 来源：原创 2025/4/30 6:38:31

import { Image } from ‘antd’;
import { useEffect, useRef, useState } from ‘react’;
import styles from ‘./index.module.less’;

interface PreviewHtmlWithImagesProps {
htmlContent: string;
}

const PreviewHtmlWithImages: React.FC = ({ htmlContent }) => {
const containerRef = useRef(null);
const [imageSrc, setImageSrc] = useState(’’);
const [visible, setVisible] = useState(false);
const [isZoomed, setIsZoomed] = useState(false);
const actionsRef = useRef(null);

// 新增：用于跟踪拖动状态
const isDraggingRef = useRef(false);
const startPosRef = useRef({ x: 0, y: 0 });

useEffect(() => {
const images: any = containerRef.current?.querySelectorAll(’.preview-image’);
images?.forEach((img: HTMLImageElement) => {
const clickHandler = () => {
const src = img.getAttribute(‘data-src’);
setImageSrc(src || ‘’);
setVisible(true);
setIsZoomed(false);
};

  img.style.cursor = 'zoom-in';img.addEventListener('click', clickHandler);return () => {img.removeEventListener('click', clickHandler);img.style.cursor = '';};
});

}, [processedHtml]);

useEffect(() => {
if (!visible) {
setIsZoomed(false);
return;
}

const previewContent: HTMLImageElement | null = document.querySelector('.ant-image-preview-content',
);
const previewImg: HTMLImageElement | null = document.querySelector('.ant-image-preview-img',
) as HTMLImageElement | null;
const imgWrapper: HTMLImageElement | null = document.querySelector('.ant-image-preview-img-wrapper',
);if (!previewContent || !previewImg || !imgWrapper) return;// 阻止滚轮事件
const handleWheel = (e: WheelEvent) => {e.preventDefault();e.stopPropagation();
};// 鼠标按下事件
const handleMouseDown = (e: MouseEvent) => {isDraggingRef.current = false;startPosRef.current = { x: e.clientX, y: e.clientY };
};// 鼠标移动事件
const handleMouseMove = (e: MouseEvent) => {// 移动超过5px才认为是拖动if (Math.abs(e.clientX - startPosRef.current.x) > 5 ||Math.abs(e.clientY - startPosRef.current.y) > 5) {isDraggingRef.current = true;}
};// 鼠标松开事件
const handleMouseUp = () => {// 如果是拖动操作，则设置一个短暂的时间窗口忽略点击if (isDraggingRef.current) {setTimeout(() => {isDraggingRef.current = false;}, 100);}
};// 点击事件处理
const handleClick = (e: MouseEvent) => {// 如果是拖动后的点击，则忽略if (isDraggingRef.current) {e.preventDefault();e.stopPropagation();return;}if (!actionsRef.current) return;setIsZoomed((prev) => {const newState = !prev;previewImg.style.cursor = newState ? 'grab' : 'zoom-in';if (newState) {actionsRef.current.onZoomIn();} else {actionsRef.current.onZoomOut();}return newState;});
};previewImg.style.cursor = isZoomed ? 'grab' : 'zoom-in';
previewContent.addEventListener('wheel', handleWheel, { passive: false });
imgWrapper.addEventListener('mousedown', handleMouseDown);
imgWrapper.addEventListener('mousemove', handleMouseMove);
imgWrapper.addEventListener('mouseup', handleMouseUp);
previewImg.addEventListener('click', handleClick);return () => {previewContent.removeEventListener('wheel', handleWheel);imgWrapper.removeEventListener('mousedown', handleMouseDown);imgWrapper.removeEventListener('mousemove', handleMouseMove);imgWrapper.removeEventListener('mouseup', handleMouseUp);previewImg.removeEventListener('click', handleClick);previewImg.style.cursor = '';
};

}, [visible, isZoomed]);

return (
<>

<Image
src={imageSrc}
rootClassName=“preview-images”
preview={{
visible,
src: imageSrc,
movable: isZoomed,
onVisibleChange: (vis) => setVisible(vis),
toolbarRender: (_: any, { actions }: any) => {
actionsRef.current = actions;
return null;
},
scaleStep: 0.5,
maxScale: 5,
}}
/>
</>
);
};

export default PreviewHtmlWithImages;