I am using Node.Js and attempting to draw lines around portions of an image whenever a condition proves true. I'm essentially trying to outline objects in an image response from an API. I have a response coming in from an API and whenever that response contains "WORD", I would like to draw two lines that encase a portion of an image. At the end, I would like to save all the lines that were drawn and export the image, now with the lines drawn on it.
I have managed to get the response from the API, loop through the objects in the response, and check to see if the objects match a filtering condition. I have then managed to draw one set of lines, but I cannot determine how to draw the lines everytime the condition is satifised and save all the resulting drawings. The resulting image only has a single group of lines drawn on it. I am using the Images package as well as 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);}
Here's a sample of the Polygon array:
[
{ X: 0.9775164723396301, Y: 0.985478401184082 },
{ X: 0.9951508641242981, Y: 0.985478401184082 },
{ X: 0.9951508641242981, Y: 0.9966437816619873 },
{ X: 0.9775164723396301, Y: 0.9966437816619873 }
]
It defines the boundary starting from the top-left and moving clockwise.
If anyone knows how to achieve this, I would be extremely grateful. Thank you so much in advance.
Try this :
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();
Here is a working example:
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>