根据坐标截取图片上指定的区域，坐标可以是规则的图片截取，也可以是不规则的图片截取
实现思路：
规则裁剪自然不用多说，我们使用画布的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>
效果如下：
