通过canvas绘制人脸识别数据

最新推荐文章于 2024-01-03 09:22:13 发布

@Justin丶

最新推荐文章于 2024-01-03 09:22:13 发布

阅读量140

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/q1260257710/article/details/133809538

版权

效果

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="1000" height="500"></canvas>

    <script>

      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");

      var backgroundImage = new Image();
      backgroundImage.src = "../img.jpg";

      
      backgroundImage.onload = function () {

        ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);

        // 根据后端接口返回的定位数据渲染
        var dataList = [
          { x: 125, y: 125, width: 100, height: 100 },
          { x: 303, y: 90, width: 100, height: 100 },
          { x: 490, y: 130, width: 100, height: 100 },
          { x: 695, y: 140, width: 100, height: 100 },
          { x: 830, y: 110, width: 100, height: 100 },
        ];


        dataList.forEach(function (rect) {
          ctx.fillStyle = "transparent";
          ctx.strokeStyle = "red";
          ctx.lineWidth = 2;
          ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
          ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
        });
      };
    </script>
  </body>
</html>