javascript - 无法读取从烧瓶发送到 javascript 的对象 BoundingPoly。想在 html 中使用这个边界并在图像上绘制这个边界

Question

这些边界从 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。我该怎么做？

标签： javascriptpythonflaskvision-api

Answer 1

你有

var bounds = [
    { x: 15 y: 5} { x: 28 y: 2} { x: 37 y: 49} { x: 24 y: 51},
    { x: 106 y: 5} { x: 252 y: 3} { x: 252 y: 36} { x: 106 y: 38},
    { x: 16 y: 40} { x: 296 y: 41} { x: 296 y: 100} { x: 16 y: 99},
]    

但我认为 Javascript 期望

var bounds = {'vertices': [
    [{'x': 15, 'y': 5}, {'x': 28, 'y': 2}, {'x': 37, 'y': 49}, {'x': 24, 'y': 51}],
    [{'x': 106, 'y': 5}, {'x': 252, 'y': 3}, {'x': 252, 'y': 36}, {'x': 106, 'y': 38}],
    [{...}, {...}, {...}, {...}],
]}

使用其中的代码draw_boxes()可以转换为

result = {'vertices':[]}

for bound in bounds:
    item = [
        {'x': bound.vertices[0].x, 'y': bound.vertices[0].y},
        {'x': bound.vertices[1].x, 'y': bound.vertices[1].y},
        {'x': bound.vertices[2].x, 'y': bound.vertices[2].y},
        {'x': bound.vertices[3].x, 'y': bound.vertices[3].y},
    ]
    result['vertices'].append(item)

print(result)