Как нарисовать линии, если условие выполнено, и сохранить все линии

ProgramBox

Как нарисовать линии, если условие выполнено, и сохранить все линии

Post author:admin
Запись опубликована:14 января, 2022
Post category:Вопросы по программированию

#javascript #node.js #canvas

Вопрос:

Я использую узел.Js и попытка нарисовать линии вокруг частей изображения всякий раз, когда условие оказывается верным. По сути, я пытаюсь очертить объекты в ответе на изображение из API. У меня есть ответ, поступающий из API, и всякий раз, когда этот ответ содержит «СЛОВО», я хотел бы нарисовать две линии, которые заключают часть изображения. В конце я хотел бы сохранить все нарисованные линии и экспортировать изображение, теперь с нарисованными на нем линиями.

Мне удалось получить ответ от API, просмотреть объекты в ответе и проверить, соответствуют ли объекты условиям фильтрации. Затем мне удалось нарисовать один набор линий, но я не могу определить, как рисовать линии каждый раз, когда выполняется условие, и сохранить все полученные рисунки. На полученном изображении нарисована только одна группа линий. Я использую пакет изображений, а также холст.

 // 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);}

Вот образец полигонального массива:

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

Он определяет границу, начиная с верхнего левого угла и двигаясь по часовой стрелке.

Если кто-нибудь знает, как этого добиться, я был бы чрезвычайно признателен. Заранее большое вам спасибо.

1. Можете ли вы поделиться содержимым одного из block.Geometry.Polygon массивов, являются ли вершины, возвращаемые API, упорядоченными по часовой стрелке или против часовой стрелки, или вообще не упорядочены … и последнее, у большинства API распознавания объектов есть несколько полезных методов для такого рода операций (рисование контура). Проверьте документ, есть ли какие-либо

2. Я не видел удобного метода рисования ограничительной рамки, но я обновил свой вопрос с помощью массива полигонов и формата по часовой стрелке.

Ответ №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>