根据坐标截取图片上指定的区域，坐标可以是规则的图片截取，也可以是不规则的图片截取
实现思路：
规则裁剪自然不用多说，我们使用画布的getImageData(x,y,width,height)方法就可以得到指定规则区域的图片信息，其中参数在规则裁剪时也很好计算。
按照这个逻辑，在不规则裁剪时，我们也有个方法可以使用，即是画布的clip()截取。但是这个截取虽然遮蔽掉了我们不要的那部分，让在裁选区内的那部分得以显示，但画布实际上还是完整图片的大小。所以我们需要抠出需要的那部分，这时只需要计算出不规则图形的最小外接矩形，再使用getImageData(x,y,width,height)方法，就可以了
完整代码如下：
<!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>获取图片上指定位置的截图</title>
<style>
.box{
width: 50%;
position: relative;
float: left;
}
.divss{
position: absolute;
top: 0;
}
.cdd{
position: absolute;
border: 5px solid rgb(179, 2, 2);
border-radius: 50%;
}
canvas{
border: 1px solid #666;
}
</style>
</head>
<body>
<div class="box">
<img src="./4.png" alt="">
<!-- 截取坐标在图上的位置 -->
<div class="divss">
<div class="cdd" style="left: 50px;top:150px;"></div>
<div class="cdd" style="left: 150px;top:200px;"></div>
<div class="cdd" style="left: 100px;top:250px;"></div>
<div class="cdd" style="left: 20px;top:210px;"></div>
</div>
</div>
<div style="float: right;">
<p>画布首次裁剪</p>
<canvas id="imgDom">画布首次裁剪</canvas>
<p>画布最终规则裁剪</p>
<canvas id="imgClipDom">画布最终规则裁剪</canvas>
</div>
<script src="./lib/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<script>
// 截取指定坐标的图片信息
var canvas=document.getElementById('imgDom');
var ctx=canvas.getContext('2d');
var img=new Image();
img.src='./4.png';
// img.crossOrigin = ''
var clipPos=[[50,150],[150,200],[100,250],[20,210]]
img.onload=function(){
console.log(this)
canvas.width=img.width;
canvas.height=img.height;
ctx.beginPath();
ctx.moveTo(clipPos[0][0],clipPos[0][1]);
ctx.lineTo(clipPos[1][0],clipPos[1][1]);
ctx.lineTo(clipPos[2][0],clipPos[2][1]);
ctx.lineTo(clipPos[3][0],clipPos[3][1]);
// 裁剪后其他区域不可见，然后再绘制图片，就会只剩下指定的区域；
// 实际上画布还是原本图片的宽高大小，只是指定的区域里面才有图片内容，其他区域是空白的；
// 画布裁剪只能裁剪出规则的矩形，这时候需要算出指定有效坐标区域的最小外接矩形，使不规则转变为规则
ctx.clip();
ctx.drawImage(img,0,0,img.width,img.height);
// 当绘制图形不规则时，根据左右上下的坐标得到不规则图形外的最小外接矩形，进行规则裁剪
// 首先循环获取最小的x，y 和 最大的x，y
var minLeft=clipPos[0][0],maxLeft=clipPos[0][0],minTop=clipPos[0][1],maxTop=clipPos[0][1]
for (let index = 1; index < clipPos.length; index++) {
const item = clipPos[index];
if(item[0]<minLeft){
minLeft=item[0]
}
if(item[0]>maxLeft){
maxLeft=item[0]
}
if(item[1]<minTop){
minTop=item[1]
}
if(item[1]>maxTop){
maxTop=item[1]
}
}
// 得到规则矩形对应区域的图片数据
console.log(minLeft,minTop,maxLeft-minLeft,maxTop-minTop)
var imgClipData=ctx.getImageData(minLeft,minTop,maxLeft-minLeft,maxTop-minTop);
var canvas2 = document.getElementById("imgClipDom")
var cxt2=canvas2.getContext("2d")
canvas2.width=imgClipData.width
canvas2.height=imgClipData.height
cxt2.putImageData(imgClipData,0,0,0,0,imgClipData.width,imgClipData.height)
// 可以转换为base64进行查看
// var img2 = canvas2.toDataURL("image/png");
}
</script>
</body>
</html>
效果如下：
