Javascript 通过图像贴图坐标提取图像的一部分，并将其显示在画布中

我有一个图像，它在画布上显示，我有这样的坐标

428,361,432,374,475,399,470,472,420,
494,400,486,328,461,183,409,176,386,
178,356,182,345,270,309,192,288,072,
257,069,228,069,219,077,212,112,205,
133,207,185,201,213,203,277,215,291,
220,298,222,323,225,388,235,418,244,
412,269,393,312,387,332,388,349,407,
356,414,360

它们是

标记格式

我想做的是从我的图像中提取那个区域，并在另一个画布中显示它（那个提取的区域）

我该怎么做

---

谢谢

这是我用来制作这些坐标的代码

function clipIt(){
  // calculate the size of the user's clipping area
  if(points=="")
   bootbox.alert("Not selected", function() {

    });
  else{
  var minX=10000;
  var minY=10000;
  var maxX=-10000;
  var maxY=-10000;
  for(var i=1;i<points.length;i++){
    var p=points[i];
    if(p.x<minX){minX=p.x;}
    if(p.y<minY){minY=p.y;}
    if(p.x>maxX){maxX=p.x;}
    if(p.y>maxY){maxY=p.y;}
  }
  var width=maxX-minX;
  var height=maxY-minY;

  // clip the image into the user's clipping area
  ctx.save();
  ctx.clearRect(0,0,cw,ch);
  ctx.beginPath();
  ctx.moveTo(points[0].x,points[0].y);
  for(var i=1;i<points.length;i++){
    var p=points[i];
    ctx.lineTo(points[i].x,points[i].y);
  }
  ctx.closePath();
  ctx.clip();
  ctx.drawImage(img,0,0);
  ctx.restore();

  // create a new canvas 
  var c=document.createElement('canvas');
  var cx=c.getContext('2d');

  // resize the new canvas to the size of the clipping area
  c.width=width;
  c.height=height;

  // draw the clipped image from the main canvas to the new canvas
  cx.drawImage(canvas, minX,minY,width,height, 0,0,width,height);

  // create a new Image() from the new canvas
  var clippedImage=new Image();
  //clippedImage.name="img"+ nameimageis 
  clippedImage.id="img"+ nameimageis
  clippedImage.onload=function(){
    // append the new image to the page

    //document.body.appendChild(clippedImage );
    new_parts=new_parts+1;
    $("#contain").append(clippedImage)
    $("#img"+nameimageis ).wrap( "<div class='ins' id='in_"+nameimageis+"'></div>" );
    $("#in_"+nameimageis ).append("<input type='hidden' id='new_"+nameimageis+"' value='new'/><div class='inner' id='inner_"+nameimageis+"' onclick='removeit("+nameimageis+")'></div>");

    nameimageis++; 
  }
  clippedImage.src=c.toDataURL();


  // clear the previous points 
  points.length=0;

  // redraw the image on the main canvas for further clipping
  drawImage(1);

}
}

函数clipIt（）{
//计算用户剪裁区域的大小
如果（点数==“”）
bootbox.alert（“未选择”，函数（）{
});
否则{
var minX=10000；
var minY=10000；
var maxX=-10000；
var maxY=-10000；
对于（var i=1；i而言，您的区域点实际上是多边形的点对。该多边形是源图像的所需区域

以下是如何从源图像中提取区域映射像素：


计算区域坐标的边界框：minX，minY&maxX，maxY

将目标画布调整为边界框的大小：

width=maxX-minX, height=maxY-minY


在目标上创建剪切路径。剪切路径是移动到目标画布左上角的原始区域

// draw the clipping path
ctx.beginPath();
ctx.moveTo(pointpairs[0]-minX,pointpairs[1]-minY);
for(var i=2;i<pointpairs.length;i+=2){
    var x=pointpairs[i];
    var y=pointpairs[i+1];
    ctx.lineTo(x-minX,y-minY);
}
ctx.closePath();
ctx.clip();




下面是示例代码和演示：


var srcnavas=document.getElementById（“源”）；
var sctx=srcCanvas.getContext（“2d”）；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
变量点对=[
428,361,432,374,475,399,470,472,420,
494,400,486,328,461,183,409,176,386,
178,356,182,345,270,309,192,288,072,
257,069,228,069,219,077,212,112,205,
133,207,185,201,213,203,277,215,291,
220,298,222,323,225,388,235,418,244,
412,269,393,312,387,332,388,349,407,
356,414,360];
var minX=1000000；
var minY=minX；
var maxX=-1000000；
var maxY=maxX；
对于（var i=0；iI）有这样的坐标吗？你有66维的坐标系吗？x，y，z…，μ，º？对不起，这还不清楚；你的坐标看起来更像：（428361），（432374）…？@theonlygusti我不知道那种坐标的名称，这就是为什么我放了一个例子，但我用用户点击的x和y来制作这些坐标。@theonlygusti它是一组
标记坐标，用于
tag@charlietfl是的。所有这些都是一个区域标签？它的形状是什么？多边形？这应该是一个ed这是你的问题，不是答案。不过还是谢谢你：）@theonlygusti操作。抱歉，如果这是您的意思，这就是clipit所使用的代码。@theonlygusti我想我们需要用这些坐标填充点数组并调用该函数。但是如何操作呢？这有一个问题。比如说，在第一个画布中绘制图像后，我们希望在原始图像的一半上显示另一个图像，另一个p图片位于半底，但在提取该部分后，它会拍摄第一张图片，而不包括我们在那之后绘制的其他两张图片。对此我该怎么办？只需清除画布并按所需顺序重新绘制完整/部分图片。干杯！
ctx.drawImage(img,-minX,-minY);