js人脸关键点画线，五官位置标记

最新推荐文章于 2022-02-11 21:07:34 发布

赞赞007

最新推荐文章于 2022-02-11 21:07:34 发布

阅读量363

点赞数

分类专栏：前端js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_39509000/article/details/121994130

版权

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{margin: 0 0}
.dynamic_plot {
width: 35px;
height: 35px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
opacity: 0.5; /*透明*/

animation: warn 1s ease-in;
-webkit-animation: warn 1s ease-in;
-moz-animation: warn 1s ease-in;

/*规定动画无限次播放*/
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;

background-color: #f0f0f0;
}
@keyframes warn {
0% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 1;
}
25% {
transform: scale(1);
-webkit-transform: scale(0.8);
opacity: 0.8;
}
50% {
transform: scale(1);
-webkit-transform: scale(0.5);
opacity: 0.6;
}
75% {
transform: scale(1);
-webkit-transform: scale(0.3);
opacity: 0.4;
}
100% {
transform: scale(1);
-webkit-transform: scale(0.3);
opacity: 0;
}
}
</style>
</head>
<body>
<canvas id="cvs" style="position: absolute;z-index: 10000"></canvas>

<img id="img" src="http://img.auto24h.cn/Uploads/images/2021-12-16/202112161518335654841.jpeg" style="width:100%;" alt="">
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" style="width:100%;"></script>
<script>
// var a = {
// "error_code": 0,
// "error_msg": "SUCCESS",
// "log_id": 1545352017525,
// "timestamp": 1639629672,
// "cached": 0,
// "result": {
// "face_num": 1,
// "face_list": [
// {
// "face_token": "b39cc38fba077ff19f502c38bb0e7386",
// "location": {
// "left": 1027.65,
// "top": 1899.85,
// "width": 1536,
// "height": 1667,
// "rotation": -90
// },
// "face_probability": 1,
// "angle": {
// "yaw": -4.57,
// "pitch": 12.79,
// "roll": -90.85
// },
// "age": 26,
// "gender": {
// "type": "male",
// "probability": 1
// },
// "landmark4": [
// {
// "x": 1380.06,
// "y": 1469.85
// },
// {
// "x": 1378.7,
// "y": 718.91
// },
// {
// "x": 1791.03,
// "y": 1073.64
// },
// {
// "x": 2237.15,
// "y": 1094.83
// }
// ],
// "landmark72": [
// {
// "x": 1335.62,
// "y": 1899.82
// },
// {
// "x": 1600.38,
// "y": 1880.85
// },
// {
// "x": 1865.37,
// "y": 1837.67
// },
// {
// "x": 2127.67,
// "y": 1774.56
// },
// {
// "x": 2403.46,
// "y": 1613.75
// },
// {
// "x": 2624.7,
// "y": 1356.9
// },
// {
// "x": 2693.77,
// "y": 1089.2
// },
// {
// "x": 2599.4,
// "y": 839.83
// },
// {
// "x": 2361.59,
// "y": 613.37
// },
// {
// "x": 2100.16,
// "y": 483.01
// },
// {
// "x": 1847.8,
// "y": 422.07
// },
// {
// "x": 1593.38,
// "y": 379.78
// },
// {
// "x": 1345.02,
// "y": 362.81
// },
// {
// "x": 1389.5,
// "y": 1644.42
// },
// {
// "x": 1346.66,
// "y": 1564.9
// },
// {
// "x": 1334.53,
// "y": 1479.13
// },
// {
// "x": 1351.18,
// "y": 1398.21
// },
// {
// "x": 1415.03,
// "y": 1324.67
// },
// {
// "x": 1433.04,
// "y": 1401.72
// },
// {
// "x": 1441.51,
// "y": 1486.78
// },
// {
// "x": 1424.39,
// "y": 1574.71
// },
// {
// "x": 1380.06,
// "y": 1469.85
// },
// {
// "x": 1163.61,
// "y": 1770.97
// },
// {
// "x": 1045.77,
// "y": 1665.8
// },
// {
// "x": 1026.54,
// "y": 1529.57
// },
// {
// "x": 1048.62,
// "y": 1400.86
// },
// {
// "x": 1137.95,
// "y": 1283.16
// },
// {
// "x": 1134.5,
// "y": 1409.77
// },
// {
// "x": 1126.97,
// "y": 1532.47
// },
// {
// "x": 1134.62,
// "y": 1657
// },
// {
// "x": 1417.44,
// "y": 860.63
// },
// {
// "x": 1352.29,
// "y": 787.35
// },
// {
// "x": 1333.08,
// "y": 706.82
// },
// {
// "x": 1343.49,
// "y": 625.24
// },
// {
// "x": 1387.64,
// "y": 552.26
// },
// {
// "x": 1424.93,
// "y": 615.69
// },
// {
// "x": 1440.69,
// "y": 696.97
// },
// {
// "x": 1433.63,
// "y": 782.96
// },
// {
// "x": 1378.7,
// "y": 718.91
// },
// {
// "x": 1140.73,
// "y": 888.3
// },
// {
// "x": 1049.22,
// "y": 778.03
// },
// {
// "x": 1026.15,
// "y": 655.74
// },
// {
// "x": 1043.4,
// "y": 528.89
// },
// {
// "x": 1156.05,
// "y": 436.82
// },
// {
// "x": 1130.25,
// "y": 539.6
// },
// {
// "x": 1125.39,
// "y": 652.17
// },
// {
// "x": 1135.21,
// "y": 769.01
// },
// {
// "x": 1420.7,
// "y": 1199.37
// },
// {
// "x": 1569.15,
// "y": 1231.16
// },
// {
// "x": 1721.17,
// "y": 1264.46
// },
// {
// "x": 1892.6,
// "y": 1321.48
// },
// {
// "x": 1896.08,
// "y": 1199.89
// },
// {
// "x": 1896.83,
// "y": 966.5
// },
// {
// "x": 1891.52,
// "y": 860.38
// },
// {
// "x": 1720.2,
// "y": 910.93
// },
// {
// "x": 1570.02,
// "y": 943.63
// },
// {
// "x": 1421.07,
// "y": 976.54
// },
// {
// "x": 1791.03,
// "y": 1073.64
// },
// {
// "x": 2222.26,
// "y": 1376.7
// },
// {
// "x": 2154.52,
// "y": 1241.24
// },
// {
// "x": 2144.64,
// "y": 1091.83
// },
// {
// "x": 2155.73,
// "y": 946.13
// },
// {
// "x": 2223.45,
// "y": 829.69
// },
// {
// "x": 2325.54,
// "y": 934.44
// },
// {
// "x": 2368.8,
// "y": 1089.65
// },
// {
// "x": 2331.03,
// "y": 1255.57
// },
// {
// "x": 2217.77,
// "y": 1233.33
// },
// {
// "x": 2223.5,
// "y": 1093.47
// },
// {
// "x": 2218.77,
// "y": 957.85
// },
// {
// "x": 2241,
// "y": 957.21
// },
// {
// "x": 2250.34,
// "y": 1091.14
// },
// {
// "x": 2242.69,
// "y": 1229.36
// }
// ],
// "landmark150": {
// "cheek_right_1": {
// "x": 1410.08,
// "y": 1877.94
// },
// "cheek_right_3": {
// "x": 1661.66,
// "y": 1859.47
// },
// "cheek_right_5": {
// "x": 1916.55,
// "y": 1815.72
// },
// "cheek_right_7": {
// "x": 2171.62,
// "y": 1746.2
// },
// "cheek_right_9": {
// "x": 2429.73,
// "y": 1582.55
// },
// "cheek_right_11": {
// "x": 2635.58,
// "y": 1335.6
// },
// "chin_2": {
// "x": 2689.09,
// "y": 1080.48
// },
// "cheek_left_11": {
// "x": 2609.55,
// "y": 831.68
// },
// "cheek_left_9": {
// "x": 2376.55,
// "y": 602.39
// },
// "cheek_left_7": {
// "x": 2129.02,
// "y": 471.81
// },
// "cheek_left_5": {
// "x": 1879.93,
// "y": 413.98
// },
// "cheek_left_3": {
// "x": 1632.41,
// "y": 372.94
// },
// "cheek_left_1": {
// "x": 1382.82,
// "y": 362.83
// },
// "eye_right_corner_right": {
// "x": 1397.54,
// "y": 1643.15
// },
// "eye_right_eyelid_upper_2": {
// "x": 1353.11,
// "y": 1568.18
// },
// "eye_right_eyelid_upper_4": {
// "x": 1341.14,
// "y": 1486.96
// },
// "eye_right_eyelid_upper_6": {
// "x": 1355.85,
// "y": 1403.79
// },
// "eye_right_corner_left": {
// "x": 1415.06,
// "y": 1331.79
// },
// "eye_right_eyelid_lower_6": {
// "x": 1432.87,
// "y": 1406.29
// },
// "eye_right_eyelid_lower_4": {
// "x": 1442.24,
// "y": 1488.89
// },
// "eye_right_eyelid_lower_2": {
// "x": 1429.59,
// "y": 1573.28
// },
// "eye_right_eyeball_center": {
// "x": 1381.07,
// "y": 1479.6
// },
// "eyebrow_right_corner_right": {
// "x": 1168.02,
// "y": 1784.59
// },
// "eyebrow_right_upper_2": {
// "x": 1053.51,
// "y": 1680.59
// },
// "eyebrow_right_upper_3": {
// "x": 1038.78,
// "y": 1544.26
// },
// "eyebrow_right_upper_4": {
// "x": 1058.06,
// "y": 1413.36
// },
// "eyebrow_right_corner_left": {
// "x": 1142.64,
// "y": 1287.95
// },
// "eyebrow_right_lower_3": {
// "x": 1144.63,
// "y": 1419.42
// },
// "eyebrow_right_lower_2": {
// "x": 1135.6,
// "y": 1547.88
// },
// "eyebrow_right_lower_1": {
// "x": 1140.51,
// "y": 1672.32
// },
// "eye_left_corner_right": {
// "x": 1407.79,
// "y": 846.92
// },
// "eye_left_eyelid_upper_2": {
// "x": 1341.96,
// "y": 780.56
// },
// "eye_left_eyelid_upper_4": {
// "x": 1324.4,
// "y": 700.83
// },
// "eye_left_eyelid_upper_6": {
// "x": 1333.89,
// "y": 619.97
// },
// "eye_left_corner_left": {
// "x": 1377.59,
// "y": 547.53
// },
// "eye_left_eyelid_lower_6": {
// "x": 1408.41,
// "y": 611.91
// },
// "eye_left_eyelid_lower_4": {
// "x": 1423.6,
// "y": 692.72
// },
// "eye_left_eyelid_lower_2": {
// "x": 1419.09,
// "y": 773.96
// },
// "eye_left_eyeball_center": {
// "x": 1364.54,
// "y": 719.16
//