react 中 Zmage根据坐标系标记四个点,并连成一个矩形

原创已于 2025-04-03 09:30:30 修改 · 206 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2025-04-02 09:20:47 首次发布

首先我们把他封装成一个组件，方便以后调用

import React, { useRef, useEffect, useState } from 'react';
import Zmage from "react-zmage";

export default function CanvasWithRect({ imageUrl, points }) {
    const canvasRef = useRef(null);
    const [processedImage, setProcessedImage] = useState('');

    useEffect(() => {
        const canvas = canvasRef.current;
        const ctx = canvas.getContext('2d');
        const img = new Image();

        img.crossOrigin = 'Anonymous'; // 处理跨域问题
        img.src = imageUrl;

        img.onload = () => {
            // 设置 Canvas 尺寸匹配图片
            canvas.width = img.width;
            canvas.height = img.height;

            // 绘制原始图片
            ctx.drawImage(img, 0, 0);

            // 计算矩形参数
            const [point1, point2] = points;
            const minX = Math.min(point1.x, point2.x);
            const maxX = Math.max(point1.x, point2.x);
            const minY = Math.min(point1.y, point2.y);
            const maxY = Math.max(point1.y, point2.y);

            // 绘制矩形
            ctx.strokeStyle = '#ff0000';
            ctx.lineWidth = 2;
            ctx.strokeRect(minX, minY, maxX - minX, maxY - minY);

            // 绘制四个顶点
            ctx.fillStyle = '#ff0000';
            [minX, maxX].forEach(x => {
                [minY, maxY].forEach(y => {
                    ctx.beginPath();
                    ctx.arc(x, y, 5, 0, Math.PI * 2);
                    ctx.fill();
                });
            });

            // 生成新图片
            setProcessedImage(canvas.toDataURL('image/png'));
        };
    }, [imageUrl, points]);

    return (
        <div>
            {/* 隐藏原始 Canvas */}
            <canvas ref={canvasRef} style={{ display: 'none' }} />

            {/* 显示处理后的图片 */}
            {processedImage && <Zmage height={90} src={processedImage} />}
        </div>
    );
};

父组件调用


import CanvasWithRect from './CanvaswithRect'

....


<CanvasWithRect imageUrl={'xxx.jpg'} points={[{ x: 404, y: 285 }, { x: 474, y: 362 }]}></CanvasWithRect>

效果展示：