如何获取图片透明区域坐标以在HTML中定位文本？

第一步：用Python正确获取透明区域的中点（基于图片本身像素） #

你的原代码问题在于混淆了图片像素坐标和屏幕显示坐标：pyautogui.moveTo用的是屏幕坐标，但你遍历的是图片自身的像素坐标，而图片打开后在屏幕上的位置并非(0,0)，还可能被缩放，导致鼠标移动到的位置和实际透明区域不匹配。

直接解析图片文件获取透明区域中点，完全不受外部查看器影响：

import os
import pathlib
from PIL import Image

# 加载目标PNG图片
img_path = os.path.join(pathlib.Path(__file__).parent.resolve(), 'test.png')
image = Image.open(img_path)
alpha_channel = image.split()[-1]  # 提取alpha通道

transparent_pixels = []
# 遍历所有像素，收集透明像素坐标（alpha=0）
for x in range(image.width):
    for y in range(image.height):
        if alpha_channel.getpixel((x, y)) == 0:
            transparent_pixels.append((x, y))

if not transparent_pixels:
    print("图片中未检测到透明区域")
else:
    # 计算透明区域的中点坐标（图片像素坐标系）
    avg_x = sum(x for x, y in transparent_pixels) / len(transparent_pixels)
    avg_y = sum(y for x, y in transparent_pixels) / len(transparent_pixels)
    print(f"透明区域中点（图片像素坐标）: X={round(avg_x, 2)}, Y={round(avg_y, 2)}")

第二步：将像素坐标转换为HTML/CSS定位值 #

要让文本精准落在透明区域中点，需要让文本容器相对于图片定位，分两种情况处理：

情况1：图片以原始尺寸显示

如果HTML中图片保持原始像素尺寸，直接将Python输出的avg_x和avg_y作为CSS的left和top值：

HTML结构：

<div class="image-wrapper">
    <img src="test.png" alt="目标图片">
    <div class="code-container">需要放置的文本</div>
</div>

CSS样式：

.image-wrapper {
    position: relative; /* 作为绝对定位的参考容器 */
    width: fit-content; /* 适配图片宽度 */
}

.code-container {
    position: absolute;
    top: /* 替换为Python输出的avg_y值 */ px;
    left: /* 替换为Python输出的avg_x值 */ px;
    transform: translate(-50%, -50%); /* 让文本自身居中于坐标点 */
}

情况2：图片被缩放显示

如果图片在HTML中被缩放（比如设置了width: 100%或固定宽度），需要先计算缩放比例：

缩放比例 = 图片显示宽度 / 图片原始宽度

然后将Python得到的原始像素坐标乘以缩放比例，得到CSS中的定位值：

转换后X = avg_x * 缩放比例
转换后Y = avg_y * 缩放比例

关键注意事项 #

• 不要用pyautogui的屏幕坐标判断：图片查看器的背景色（如黑色、白色）不是图片本身的像素，无法用来识别透明区域，必须直接解析图片的alpha通道。
• 确保文本容器的参考系正确：必须给图片的父容器设置position: relative，否则code-container会相对于整个页面定位，导致位置偏移。

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