将图片转换为按钮数组及拆分图片为可获坐标的按钮图片数组的技术咨询

Great question! Let me walk you through how to tackle this—whether you're building a web app, desktop tool, or something else, the core steps are mapping button regions, creating your array, and handling click events to capture coordinates. Here's a detailed breakdown:

Step 1: Map Button Regions & Build Your Button Array #

First, you need to define the boundaries of each button in your image. You can do this manually using an image editor like Photoshop or GIMP: just hover over the corners of each button to get their pixel coordinates (top-left (x1, y1) and bottom-right (x2, y2)).

Once you have those coordinates, structure your button array to store all relevant info for each button. Here are examples in two common languages:

JavaScript Example #

const buttonArray = [
  {
    id: "login-btn",
    label: "Login",
    coords: { x1: 85, y1: 320, x2: 240, y2: 370 },
    // Optional: path to a cropped version of the button image
    croppedImage: "login-btn.png"
  },
  {
    id: "signup-btn",
    label: "Sign Up",
    coords: { x1: 260, y1: 320, x2: 415, y2: 370 },
    croppedImage: "signup-btn.png"
  }
];

Python Example #

button_array = [
    {
        "id": "login_btn",
        "label": "Login",
        "coords": (85, 320, 240, 370),
        "cropped_image_path": "login_btn.png"
    },
    {
        "id": "signup_btn",
        "label": "Sign Up",
        "coords": (260, 320, 415, 370),
        "cropped_image_path": "signup_btn.png"
    }
]

Step 2: Extract Individual Button Images (Optional) #

If you want to split the original image into separate button images, you can use an image processing library. Here's how to do it with Python's Pillow library:

from PIL import Image

# Load your original image
base_image = Image.open("main-image.png")

# Crop each button region and save it
for button in button_array:
    x1, y1, x2, y2 = button["coords"]
    button_img = base_image.crop((x1, y1, x2, y2))
    button_img.save(button["cropped_image_path"])

Step 3: Handle Clicks to Get Coordinates #

The next step is to detect when a user clicks a button region and retrieve the corresponding coordinates. Here's a web-focused example using HTML and JavaScript:

HTML #

<!-- Make sure the image is positioned relatively for accurate coordinate calculation -->
<img id="interactive-image" src="main-image.png" alt="Interactive Buttons" style="position: relative; max-width: 100%;">

JavaScript #

const img = document.getElementById("interactive-image");

img.addEventListener("click", (e) => {
    // Get the image's position on the screen to calculate relative click coordinates
    const imgRect = img.getBoundingClientRect();
    const clickX = e.clientX - imgRect.left;
    const clickY = e.clientY - imgRect.top;

    // Adjust for image scaling (if the image is resized from its original dimensions)
    const scaleX = img.naturalWidth / img.width;
    const scaleY = img.naturalHeight / img.height;
    const actualX = clickX * scaleX;
    const actualY = clickY * scaleY;

    // Find which button was clicked
    const clickedButton = buttonArray.find(btn => {
        const { x1, y1, x2, y2 } = btn.coords;
        return actualX >= x1 && actualX <= x2 && actualY >= y1 && actualY <= y2;
    });

    if (clickedButton) {
        console.log(`Clicked button: ${clickedButton.label}`);
        console.log(`Button coordinates: (${clickedButton.coords.x1}, ${clickedButton.coords.y1}) to (${clickedButton.coords.x2}, ${clickedButton.coords.y2})`);
        // Add your button click logic here (e.g., navigate to a page, trigger an action)
    } else {
        console.log("Clicked outside of any button region");
    }
});

Key Notes to Keep in Mind #

• Scaling Adjustments: If your image is displayed at a different size than its original, always scale the click coordinates to match the original image's pixel dimensions (like we did in the JavaScript example).
• Desktop/Mobile Apps: The logic translates to other platforms too—for example, in PyQt (desktop) or Flutter (mobile), you'd load the image, listen for tap/click events, calculate relative coordinates, and match against your button array.
• Auto-Detection: If you have a large number of buttons, you could use image processing tools like OpenCV to detect button shapes automatically, but manual mapping is simpler for small use cases.

内容的提问来源于stack exchange，提问作者Mario