These bounds are returned from the doctext.py DocText.py:
def draw_boxes(image, bounds, color):
draw = ImageDraw.Draw(image)
for bound in bounds:
draw.polygon([
bound.vertices[0].x, bound.vertices[0].y,
bound.vertices[1].x, bound.vertices[1].y,
bound.vertices[2].x, bound.vertices[2].y,
bound.vertices[3].x, bound.vertices[3].y], None, color)
return image
def get_document_bounds(image_file, feature):
client = vision.ImageAnnotatorClient()
bounds = []
with io.open(image_file, 'rb') as image_file:
content = image_file.read()
image = types.Image(content=content)
response = client.document_text_detection(image=image)
document = response.full_text_annotation
# Collect specified feature bounds by enumerating all document features
for page in document.pages:
for block in page.blocks:
for paragraph in block.paragraphs:
for word in paragraph.words:
for symbol in word.symbols:
if (feature == FeatureType.SYMBOL):
bounds.append(symbol.bounding_box)
if (feature == FeatureType.WORD):
bounds.append(word.bounding_box)
if (feature == FeatureType.PARA):
bounds.append(paragraph.bounding_box)
if (feature == FeatureType.BLOCK):
bounds.append(block.bounding_box)
if (feature == FeatureType.PAGE):
bounds.append(block.bounding_box)
# The list `bounds` contains the coordinates of the bounding boxes.
return bounds
def render_doc_text(filein, fileout):
image = Image.open(filein)
bounds = get_document_bounds(filein, FeatureType.PAGE)
draw_boxes(image, bounds, 'blue')
bounds = get_document_bounds(filein, FeatureType.PARA)
draw_boxes(image, bounds, 'red')
bounds = get_document_bounds(filein, FeatureType.WORD)
draw_boxes(image, bounds, 'yellow')
app.py using flask:
@app.route('/tagger')
def tagger():
if (app.config["HEAD"] == len(app.config["FILES"])):
return redirect(url_for('bye'))
directory = app.config['IMAGES']
image = app.config["FILES"][app.config["HEAD"]]
labels = app.config["LABELS"]
not_end = not(app.config["HEAD"] == len(app.config["FILES"]) - 1)
opn = 'directory/'
for f in os.listdir(opn):
boundingpoly = doctext.render_doc_text(os.path.join(opn,f))
print(boundingpoly)
print(type(boundingpoly))
print(not_end)
return render_template('tagger.html', not_end=not_end, directory=directory, image=image, bounds=boundingpoly, labels=labels, head=app.config["HEAD"] + 1, len=len(app.config["FILES"]))
boundingpoly value
boundingpoly =
[vertices {
x: 15
y: 5
}
vertices {
x: 28
y: 2
}
vertices {
x: 37
y: 49
}
vertices {
x: 24
y: 51
}
]
when I pass bounds to html, I want to access this boundingpoly list in js for drawing rectangles using the canvas js in html
<script>
var bounds = {{bounds}}
</script>
It is not working.
I want to read it as an object in js and access these object vertices and draw on canvas.
bounds.vertices.forEach(vertices => {
ctx.beginPath();
ctx.moveTo(vertices[0].x, vertices[0].y)
for (var i = 1; i < vertices.length; i++) {
ctx.lineTo(vertices[i].x, vertices[i].y);
}
ctx.closePath();
ctx.fillStyle = "pink";
ctx.strokeStyle = "pink";
ctx.stroke();
ctx.lineWidth="5";
when render template variable bounds it is passing as a list and is not able to read in javascript and even tried json dumps, it is displaying Object BoundingPoly is not Json serializable. How am I supposed to do it?
