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

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 });
const processedHtml = htmlContent.replace(
/<img([^>]*)src="’"’>/gi,
(match, beforeSrc, src, afterSrc) => {
if (/data-src=/i.test(match)) return match;
return <img${beforeSrc}src="${src}" data-src="${src}" class="preview-image"${afterSrc}>;
},
);
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);
};

1.   img.style.cursor = 'zoom-in';
2.   img.addEventListener('click', clickHandler);
4.   return () => {
5.     img.removeEventListener('click', clickHandler);
6.     img.style.cursor = '';
7.   };
8. });

复制代码

}, [processedHtml]);
useEffect(() => {
if (!visible) {
setIsZoomed(false);
return;
}

1. const previewContent: HTMLImageElement | null = document.querySelector(
2.   '.ant-image-preview-content',
3. );
4. const previewImg: HTMLImageElement | null = document.querySelector(
5.   '.ant-image-preview-img',
6. ) as HTMLImageElement | null;
7. const imgWrapper: HTMLImageElement | null = document.querySelector(
8.   '.ant-image-preview-img-wrapper',
9. );
11. if (!previewContent || !previewImg || !imgWrapper) return;
13. // 阻止滚轮事件
14. const handleWheel = (e: WheelEvent) => {
15.   e.preventDefault();
16.   e.stopPropagation();
17. };
19. // 鼠标按下事件
20. const handleMouseDown = (e: MouseEvent) => {
21.   isDraggingRef.current = false;
22.   startPosRef.current = { x: e.clientX, y: e.clientY };
23. };
25. // 鼠标移动事件
26. const handleMouseMove = (e: MouseEvent) => {
27.   // 移动超过5px才认为是拖动
28.   if (
29.     Math.abs(e.clientX - startPosRef.current.x) > 5 ||
30.     Math.abs(e.clientY - startPosRef.current.y) > 5
31.   ) {
32.     isDraggingRef.current = true;
33.   }
34. };
36. // 鼠标松开事件
37. const handleMouseUp = () => {
38.   // 如果是拖动操作，则设置一个短暂的时间窗口忽略点击
39.   if (isDraggingRef.current) {
40.     setTimeout(() => {
41.       isDraggingRef.current = false;
42.     }, 100);
43.   }
44. };
46. // 点击事件处理
47. const handleClick = (e: MouseEvent) => {
48.   // 如果是拖动后的点击，则忽略
49.   if (isDraggingRef.current) {
50.     e.preventDefault();
51.     e.stopPropagation();
52.     return;
53.   }
55.   if (!actionsRef.current) return;
57.   setIsZoomed((prev) => {
58.     const newState = !prev;
59.     previewImg.style.cursor = newState ? 'grab' : 'zoom-in';
61.     if (newState) {
62.       actionsRef.current.onZoomIn();
63.     } else {
64.       actionsRef.current.onZoomOut();
65.     }
67.     return newState;
68.   });
69. };
71. previewImg.style.cursor = isZoomed ? 'grab' : 'zoom-in';
72. previewContent.addEventListener('wheel', handleWheel, { passive: false });
73. imgWrapper.addEventListener('mousedown', handleMouseDown);
74. imgWrapper.addEventListener('mousemove', handleMouseMove);
75. imgWrapper.addEventListener('mouseup', handleMouseUp);
76. previewImg.addEventListener('click', handleClick);
78. return () => {
79.   previewContent.removeEventListener('wheel', handleWheel);
80.   imgWrapper.removeEventListener('mousedown', handleMouseDown);
81.   imgWrapper.removeEventListener('mousemove', handleMouseMove);
82.   imgWrapper.removeEventListener('mouseup', handleMouseUp);
83.   previewImg.removeEventListener('click', handleClick);
84.   previewImg.style.cursor = '';
85. };

复制代码

}, [visible, isZoomed]);
return (
<>

<div className={styles.documentation} dangerouslySetInnerHTML={{ __html: processedHtml }} />

<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;