微信截图pos值转换

sky wide

于 2024-09-27 10:43:59 发布

阅读量189

点赞数 2

文章标签： web3

本文链接：https://blog.csdn.net/qq_44652591/article/details/142587842

版权

微信截图生成的 pos 值来转换为 HTML 的 coords 值
需要进行一定的调整，因为两者的坐标系统可能有所不同。

微信截图的 `pos` 值

微信截图的 pos 值通常是以某种形式表示的区域坐标，可能包括位置的左上角和右下角坐标。
例如，pos: [x1, y1, x2, y2] 表示一个矩形区域。

如何转换成 HTML 的 `coords` 值

矩形区域 (rect): - 微信坐标：pos: [x1, y1, x2, y2] - HTML coords：coords="x1,y1,x2,y2"
圆形区域 (circle): - 如果 pos 表示的是某个点的坐标和半径，你需要把它按照 coords="x,y,r" 的格式填写。

示例：如果你有 pos: [x, y] 和半径 r，则 coords 可以写为 coords="x,y,r"。

多边形区域 (poly):

如果 pos 是一系列顶点的坐标，你只需要将这些坐标提取并用逗号分隔：
示例：pos: [x1, y1, x2, y2, x3, y3] 应改为 coords="x1,y1,x2,y2,x3,y3"。
假设你的微信截图 pos 值是：pos: [50, 50, 250, 200]，你想将其转换为 HTML 的 coords 值。

<area shape="rect" coords="50,50,250,200" href="https://www.example.com" alt="链接">

注意事项

坐标系统：确保你理解微信截图坐标是相对于图像大小的，而 HTML 中的坐标是基于网页布局的。
响应式设计：如果图像是响应式的，可能需要使用 JavaScript 来调整 coords，以适应不同屏幕尺寸。

举例代码：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>热点链接图片示例</title>

    <style>

        body {

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            background-color: #f0f0f0;

        }

        img {

            max-width: 800px;

        }

    </style>

</head>

<body>

  

<a href="https://www.baidu.com" target="_blank">

    <img src="1.jpg" alt="热点链接图片" usemap="#image-map">

</a>

  

<map name="image-map">

    <area shape="rect" coords="13,11,165,144" href="https://www.baidu.com" alt="链接1">

    <area shape="rect" coords="325,5,479,148" href="https://blog.csdn.net/qq_44652591?type=blog" alt="链接2">

    <area shape="rect" coords="10,325,175,479" href="https://www.bilibili.com/" alt="链接3">

</map>

  

</body>

</html>