【Web前端问题】js怎么根据坐标在图片上画出矩形框？

如图本地上传的图片，并点击获取到这个图片里每个地方的坐标，根据4个角坐标在图片上画出矩形框，该怎么画？大神支招。
我图片是显示在div里的，是不是应该用canvas显示图片？
图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/default.css">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<style>
    #box{
        width:448px;
        height: 300px;
        border:10px solid #ccc;
        text-align: center;
        /* border-radius:10px; */
    }
    #cropedBigImg{
        max-width:100%;
        max-height:100%;
        vertical-align: middle;
    }
    #cvs{
        border: 1px solid red;
        position:absolute;
        left:9px;
        top:28px;
        /* z-index: -99; */
    }
    a{
        display:inline-block;
        width:100px;
        height:40px;
        line-height:40px;
        text-align: center;
        position:relative;
        overflow:hidden;
        color:#fff;
        background:rgb(9, 98, 128);
    }
    input{
        position:absolute;left:0px;top:0px;zoom:1;filter:alpha(opacity=0);opacity:0;font-size:20px;margin-left:-240px
    }
</style>
</head>
<body>
<form class="container" method="post" id='formBox' name="form">             
     <!-- 保存用户自定义的背景图片 --> 
     <!-- <canvas id="cvs"  ></canvas>      -->
    <div id='box'>
         <img id="cropedBigImg"   alt="lorem ipsum dolor sit" title="自定义背景"/>      
    </div>
    <a href="">本地上传<input type="file" id="chooseImage" name="file" >   </a>       
</form>
<script>
    $(function(){
        $('#chooseImage').on('change',function(){        
            var filePath = $(this).val();      
            //获取到input的value，里面是文件的路径            
            var fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
            var src = window.URL.createObjectURL(this.files[0]); 
                    //转成可以在本地预览的格式                    
                    // 检查是否是图片   
                    //   console.log(fileFormat);     
            if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {            
                    alert('上传错误,文件格式必须为：png/jpg/jpeg');            
                    return;          
                }          
                    $('#cropedBigImg').attr('src',src);
                    $('#cropedBigImg').click(function(e){
                        var X=e.pageX-$(this).offset().left;
                        var Y=e.pageY-$(this).offset().top; 
                        console.log(X+'   '+Y);  
                    })  
            });
        })
</script>
</body>
</html>

回答：

四个点怎么画矩形框？两个点就可以了吧

回答：

四个角如果就是图片的四个角，加个矩形框的话，直接给这个img外层的div添加border

div{
    border: 2px solid #ccc;
    display: inline-block;
}

如果四个角就是图上的四个组成矩形的点，把画矩形的操作，写在img的load里面，就不会被图片挡住了

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = new Image()
    img.src = "./test.png"
    img.onload = function () {
      ctx.drawImage(img, 0, 0);
      //图片加载完之后再画矩形
      //我这里用的是rect方法，这里可以替换成你写的mveto和lineto的方法
      ctx.rect(20, 20, 150, 100);
      ctx.stroke();
    }

以上是 【Web前端问题】js怎么根据坐标在图片上画出矩形框？ 的全部内容， 来源链接： utcz.com/a/140240.html

回到顶部