图片上进行红框框选

最新推荐文章于 2024-04-25 17:37:08 发布

时小帅

最新推荐文章于 2024-04-25 17:37:08 发布

阅读量1.7k

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/sgj2015/article/details/105976383

版权

js图片上进行红框框选,标注，canvas帮你实现

关于在图片上进行标注，比如在图片上进行人像框选，使用canvas标签画矩形选框，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style> 
    div{
        width:300px;
        height:300px;
        object-fit: cover;
        position: relative;
    }
    img{
        position: absolute;
        width:300px;
        height:300px;
    }
    #canvas{
        position: absolute;
        width:100%;
        height:100%;

    }
</style>
<body>
    <div>
        <img src="./logo.png" alt="">
        <canvas id='canvas'></canvas>
    </div>
</body>
<script type="text/javascript">

    function draw(id){
  
        var canvas = document.getElementById(id);
  
        var context = canvas.getContext('2d');  //getContext() 方法可返回一个对象
  
        context.strokeStyle = "red";  //图形边框的填充颜色
  
        context.lineWidth = 2;  //用宽度为 5 像素的线条来绘制矩形：     
  
        context.strokeRect(34,45,50,50);  //绘制矩形（无填充）参数分别代表下x,y，长，宽
  
           
  
   }
  
   draw("canvas");
  
  </script>
</html>

显示效果
在这里插入图片描述
根据业务去传入相应的参数，比如坐标数据、id

//需要自定义一些参数
function draw(图片存放的dom的id，坐标数据){
  
        var canvas = document.getElementById(id);
  
        var context = canvas.getContext('2d');  //getContext() 方法可返回一个对象
  
        context.strokeStyle = "red";  //图形边框的填充颜色
  
        context.lineWidth = 2;  //用宽度为 5 像素的线条来绘制矩形：     
  
        遍历坐标数据、、、   
  
   }