Javascript 如何在画布中按对角线裁剪图像

我试图将图像裁剪到画布中选定的红色矩形，但我被卡住了。你知道吗

我有关于坐标矩形和顶点的数据，我可以计算到像素

让arr=[
[2333748.391245694, 6846480.395930305],
[2343351.375319867, 6838186.909684428],
[2339754.200562619, 6834021.75996551],
[2330151.216488446, 6842315.246211386],
[2333748.391245694, 6846480.395930305]
]
设xmax=2343351.375319867
设xmin=2330151.216488446
设ymax=6846480.395930305
设ymin=6834021.75996551
常量mapWidth=xmax-xmin
常数mapHeight=ymax-ymin
设h=600；
设w=637.0370370371；
设A=[（（arr[0][0]-xmin）*w）/mapWidth，0]
设B=[w，（（ymax-arr[1][1]）*w）/mapeight]
设C=[（（xmax-arr[0][0]）*w）/mapWidth，h]
设D=[0，（（arr[1][1]-ymin）*w）/mapHeight]
var canvas=document.getElementById（'image'）；
var context=canvas.getContext（'2d'）；
var imageObj=新图像（）；
imageObj.onload=（）=>{
drawImage（imageObj，…A，…B，…C，…D）；
context.beginPath（）；
context.lineWidth=“6”；
context.strokeStyle=“蓝色”；
context.rect（…A，5，5）；
context.rect（…B，5，5）；
context.rect（…C，5，5）；
context.rect（…D，5，5）；
stroke（）；
};
imageObj.src='./test.png'您可以使用，如本例所示：


img{
宽度：100px；
高度：100px；
}
.剪短{
剪辑路径：多边形（30px 0，0 30px，70px 100px，100px 70px）；
}
1：
2:
您有几个选项：


旋转基础图像，使剪辑矩形水平和垂直对齐。然后使用
ctx.rect
定义剪辑区域

根据@peter-b的答案使用CSS剪辑

剪辑为多边形路径


类似的答案如下：


第三个选项可能是最简单的，但它可能取决于您打算对裁剪后的图像执行什么操作。i、 e.你打算旋转它吗

以下是使用图像和类似代码的工作代码段：


const originalImg=new Image（）
originalImg.onload=（）=>{
const srcCanvas=document.getElementById（'srcCanvas'）
const srcCtx=srcCanvas.getContext（'2d'）
//计算矩形坐标。
//以下是此代码段的硬编码近似值：
设srcA=[172,0]
设srcB=[originalImg.width，originalImg.height/4*3-50]
设srcC=[465，原始高度]
设srcD=[0，originalImg.height/3]
srcCtx.moveTo（…srcA）
srcCtx.beginPath（）
srcCtx.lineTo（…srcB）
srcCtx.lineTo（…srcC）
srcCtx.lineTo（…srcD）
srcCtx.lineTo（…srcA）
srcCtx.closePath（）
srcCtx.clip（）
srcCtx.drawImage（原始图像，0,0）
};
originalImg.src=https://i.stack.imgur.com/15BPX.png“

剪短
我会先旋转整张图片，然后裁剪会更容易。旋转背景图像，使红色矩形变成一个直矩形，然后你可以裁剪。是的，这正是我需要的。谢谢