获取原图坐标

Question

我需要用CSS自定义我的图像，我计划点2点并根据图像的原始尺寸获取图像的坐标，并且我们只能在图像上点（注意：坐标不是基于我自定义的尺寸） CSS 或在屏幕上）。

import React, { useState } from 'react';
import src from "../assets/testCoordinate.jpeg";
import ReactPlayer from 'react-player'
import Select from "react-select"
const ImageDetection = () => {
    const [isSelecting, setIsSelecting] = useState(false);
    const [startX, setStartX] = useState(null);
    const [startY, setStartY] = useState(null);
    const [endX, setEndX] = useState(null);
    const [endY, setEndY] = useState(null);
    const [imageWidth, setImageWidth] = useState(null);
    const [imageHeight, setImageHeight] = useState(null);

    const handleClick = (event) => {
        const { offsetX, offsetY } = event.nativeEvent;
        const { width, height } = event.currentTarget.getBoundingClientRect();
      

        if (isSelecting) {
            setEndX(offsetX);
            setEndY(offsetY);
            setIsSelecting(false);
            console.log(`End clicked at: (${offsetX}, ${offsetY})`);
        } else {
            setStartX(offsetX);
            setStartY(offsetY);
            setIsSelecting(true);
            console.log(`Start clicked at: (${offsetX}, ${offsetY})`);
        }
    };

    const startMarkerStyle = {
        position: 'absolute',
        left: `${startX}px`,
        top: `${startY}px`,
        width: '10px',
        height: '10px',
        backgroundColor: 'green',
        borderRadius: '50%',
    };

    const endMarkerStyle = {
        position: 'absolute',
        left: `${endX}px`,
        top: `${endY}px`,
        width: '10px',
        height: '10px',
        backgroundColor: 'red',
        borderRadius: '50%',
    };

    const lineStyle = {
        position: 'absolute',
        zIndex: 1,
        left: 0,
        top: 0,
        width: '100%',
        height: '100%',
    };

    const handleImageLoad = (event) => {
        const { naturalWidth, naturalHeight } = event.target;
        setImageWidth(naturalWidth);
        setImageHeight(naturalHeight);
    };

    return (
        <div style={{ position: 'relative', }} >
            {/* <h1>Set the Strict Line</h1>
            <Select
            className='w-[240px] h-[60px]'
                options={[
                    { value: 'video', label: 'Video' },
                    { value: 'image', label: 'Image' }
                ]}
            /> */}

            <img
                src={src}
                alt="Test Image"
                onClick={handleClick}
                className='w-[740px] h-[540px]'
                onLoad={handleImageLoad}
            />
            {/* <ReactPlayer url='https://buyme-now-bucket.s3.ap-southeast-2.amazonaws.com/huh.mp4' /> */}
            {startX !== null && (
                <div style={startMarkerStyle}>
                    {/* Start point marker */}
                </div>
            )}
            {endX !== null && (
                <div style={endMarkerStyle}>
                    {/* End point marker */}
                </div>
            )}
            {startX !== null && endX !== null && (
                <svg style={lineStyle}>
                    <line x1={startX} y1={startY} x2={endX} y2={endY} stroke="blue" strokeWidth="2" />
                </svg>
            )}
            {imageWidth && imageHeight && (
                <p>Image Original Size: {imageWidth} x {imageHeight}</p>
            )}
        </div>
    );
};

export default ImageDetection;

我想要一个基于其原始宽度和高度的图像点

Answer 1

您必须计算原始图像宽度和高度与屏幕上尺寸图像的比率。我可以在代码中看到，提供的尺寸图像宽度和高度为“w-[740px] h-[540px]”。如果有一个宽度为 370px、高度为 270px 的图像，则比例将为 2（如果将实际尺寸除以屏幕尺寸，则为 0.5）。代码是：

const handleClick = (event) => {
    const { offsetX, offsetY } = event.nativeEvent;
    const { width, height } = event.currentTarget.getBoundingClientRect();

    // Calculate the width ratio
    const ratioX = width / imageWidth
    
    // Calculate the height ratio
    const ratioY = height / imageHeight

    // Calculate the offset X for the real size 
    const imageOffsetX = offsetX / ratioX
    // Calculate the offset Y for the real size 
    const imageOffsetY = offsetY / ratioY

  
    if (isSelecting) {
        setEndX(offsetX);
        setEndY(offsetY);
        setIsSelecting(false);
        console.log(`End clicked at: (${offsetX}, ${offsetY})`);
    } else {
        setStartX(offsetX);
        setStartY(offsetY);
        setIsSelecting(true);
        console.log(`Start clicked at: (${offsetX}, ${offsetY})`);
    }
};

如果用户在屏幕尺寸上点击 100h 100w，则实际尺寸图像上的点将为 50h 50w。