这些边界从 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 使用烧瓶：
@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 =
[vertices {
x: 15
y: 5
}
vertices {
x: 28
y: 2
}
vertices {
x: 37
y: 49
}
vertices {
x: 24
y: 51
}
]
当我将边界传递给 html 时，我想在 js 中访问这个 boundingpoly 列表以使用 html 中的 canvas js 绘制矩形
<script>
var bounds = {{bounds}}
</script>
它不工作。
我想将它作为 js 中的对象读取并访问这些对象顶点并在画布上绘制。
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";
当渲染模板变量边界时，它作为列表传递并且无法在 javascript 中读取，甚至尝试过 json 转储，它显示 Object BoundingPoly is not Json serializable。我该怎么做？