在图片上框选，适用于图片找不同

最新推荐文章于 2022-08-06 11:05:09 发布

tongyiyou

最新推荐文章于 2022-08-06 11:05:09 发布

阅读量1.4k

点赞数

文章标签： Canvas

本文链接：https://blog.csdn.net/tongyiyou/article/details/84882729

版权

有个需求是后台上传两张图片，前台对比两张图片找不同。

在原图中框出不同之处，然后将框的坐标点放入数组，后台只要上传图片和不同处的点位坐标即可。

后台上传实现如下：

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas 图片框选</title>
<style type="text/css"> 

</style>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head> 
<body>


<img id="scream" src="4b227f83d3140ed7c0b8b051dff7bccc.jpg" alt="The Scream" width="500" height="500" style="display: none"><p>Canvas:</p>
<canvas id="myCanvas"  style="border:1px solid #d3d3d3;" width="500" height="500" >
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<button onclick="showRect();">确定</button>
<button onclick="clean();">重置</button>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,0,0,500,500);
    var flag = true;
    var x,y;
    var points = [];
    var point = [];

$(function(){
    $('#myCanvas').mousedown(function(e){
        point = [];
        flag = true;
        x = e.offsetX; // 鼠标落下时的X
        y = e.offsetY; // 鼠标落下时的Y
        console.log("x1:"+x+",y1:"+y);
        point.push(x,y);
    }).mouseup(function(e){
        flag = false;
        x = e.offsetX; // 鼠标落下时的X
        y = e.offsetY;
        console.log("x2:"+x+",y2:"+y);
        point.push(x,y);
        points.push(point);
      //  point.length=0;
    }).mousemove(function(e){
        if(flag){
            ctx.clearRect(0,0,c.width,c.height);
            ctx.drawImage(img,0,0,500,500);
            ctx.beginPath();
            ctx.strokeRect(x,y,e.offsetX-x,e.offsetY-y);
        }
    });
})

function showRect(){
   $.each(points,function (i,n) {
       console.info(n);
       ctx.strokeRect(n[0],n[1],n[2]-n[0],n[3]-n[1]);
   });
}
function clean(){
    points.length=0;
    ctx.clearRect(0,0,c.width,c.height);
    ctx.drawImage(img,0,0,500,500);
}
</script>
</body> 
</html>