Невозможно прочитать объект BoundingPoly, отправленный из фляги в javascript.Хотите использовать эти границы в HTML и нарисовать эти границы на изображении - PullRequest
1 голос
/ 03 мая 2019

Эти границы возвращаются из 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, я хочу получить доступ к списку boundingpoly в js для рисования прямоугольников, используя холст js в html

 <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 не является Json-сериализуемым.Как я должен это сделать?

1 Ответ

0 голосов
/ 04 мая 2019

У вас есть

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)    
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...