如果满足条件，如何绘制线条并保存所有线条

Question

我正在使用 Node.Js 并尝试在条件成立时在图像的某些部分周围画线。我实际上是在尝试从 API 的图像响应中勾勒对象。我有一个来自 API 的响应，每当该响应包含“WORD”时，我想画两条线来包裹图像的一部分。最后，我想保存所有绘制的线条并导出图像，现在绘制线条。

我已经设法从 API 获取响应，遍历响应中的对象，并检查对象是否符合过滤条件。然后我设法画了一组线，但我无法确定每次满足条件时如何画线并保存所有生成的图纸。生成的图像上仅绘制了一组线条。我正在使用 Images 包以及 Canvas。

// get image
var ImageDATA = await getImage()

// Get the height, width of the image
const dimensions = sizeOf(ImageDATA.Body)
const width = dimensions.width
const height = dimensions.height
console.log(ImageDATA.Body)
console.log(width, height)

try{
  // Call API and log response
  const res = await client.detectDocumentText(params).promise();
  // set the response as an image and get width and height
  var image = images(ImageDATA.Body).size(width, height)
  //console.log(res)
  res.Blocks.forEach(block => {
    if (block.BlockType.indexOf('WORD') > -1)
    {
      //console.log("Word Geometry Found.");
      console.log("FOUND POLYGONS")
      ctx.strokeStyle = 'rgba(0,0,0,0.5)';
      console.log(block.Geometry.Polygon[0].X)
      ctx.beginPath();
      ctx.lineTo(width * block.Geometry.Polygon[3].X, height * block.Geometry.Polygon[3].Y);
      ctx.moveTo(width * block.Geometry.Polygon[1].X, height * block.Geometry.Polygon[1].Y);
      ctx.lineTo(width * block.Geometry.Polygon[2].X, height * block.Geometry.Polygon[2].Y);
      ctx.stroke();
    }

    console.log("-----")
  }) 

  // render image
  // convert canvas to buffer
  var buffer = canvas.toBuffer("image/png");
  // draw the buffer onto the image
  image.draw(images(buffer), 10, 10)
  // save image
  image.save("output.jpg");
  
} catch (err){
console.error(err);}

下面是 Polygon 数组的示例：

[
  { X: 0.9775164723396301, Y: 0.985478401184082 },
  { X: 0.9951508641242981, Y: 0.985478401184082 },
  { X: 0.9951508641242981, Y: 0.9966437816619873 },
  { X: 0.9775164723396301, Y: 0.9966437816619873 }
]

它定义了从左上角开始顺时针移动的边界。

如果有人知道如何实现这一点，我将非常感激。非常感谢您。

Answer 1

试试这个：

    ctx.strokeStyle = 'rgba(0,0,0,0.5)';
    ctx.beginPath();
    block.Geometry.Polygon.forEach(({X, Y}) =>
      ctx.lineTo(width * X, height * Y)
    );
    ctx.closePath();
    ctx.stroke();

这是一个工作示例：

const boudingBoxes = [
  {
    label: "Pen",
    polygon: [
      {x: 0.60, y: 0.64},
      {x: 0.83, y: 0.66},
      {x: 0.82, y: 0.70},
      {x: 0.60, y: 0.70},
    ]
  },
  {
    label: "Camera",
    polygon: [
      {x: 0.72, y: 0.20},
      {x: 0.93, y: 0.25},
      {x: 0.88, y: 0.43},
      {x: 0.71, y: 0.39},
    ]
  },
]


init();

async function init() {
  const image = new Image();
  image.crossOrigin = "";
  await new Promise(res => {
    image.onload = res;
    image.src = "https://picsum.photos/id/180/600/400";
  });
  
  const [width, height] = [image.naturalWidth, image.naturalHeight];
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  
  // Draw the image
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(image, 0, 0);
  
  // Start Drawing the bounding boxes
  ctx.fillStyle = "red"
  ctx.strokeStyle = "red";
  boudingBoxes.forEach(bBox => {
  
    // label
    ctx.font = "13px Verdana";
    ctx.fillText(bBox.label, width * bBox.polygon[0].x, height * bBox.polygon[0].y - 6);

    // Bounding box
    ctx.beginPath();
    bBox.polygon.forEach(({x, y}) =>
      ctx.lineTo(width * x, height * y)
    );
    ctx.closePath();
    ctx.stroke();
  });
  
  document.body.appendChild(canvas);  
}

// TMP 
const p = document.querySelector("p");
window.onmousemove = (e) => {
  const x = e.clientX / 600;
  const y = e.clientY / 400;
  p.innerHTML = `x: ${x} <br/> y: ${y}`;
}

body {
  margin: 0
}

p {position: absolute }

<p></p>