Как нарисовать ограничивающую рамку на изображении, возвращенном с сервера?
У меня есть сервер Python, возвращающий список ограничивающих рамок после запуска OCR (например, Tesseract или что-то в этом роде)
"bbox": [{
"x1": 223,
"y1": 426,
"x2": 1550,
"y2": 1736
}..]
Теперь, чтобы нарисовать эту ограничивающую рамку на клиенте, я использую тег Q-img и создал внутри него тег div вот так.
<q-img :src = "imageData.src">
<div
style = "
position: absolute;
background-color: rgba(0, 100, 0, 0.1);
left: 223px;
top: 426px;
height: 1310px;
width: 1327px;
border: 0.5px solid blue;
"
/>
</q-img>
Проблема в том, что эта ограничивающая рамка, нарисованная на клиенте, находится далеко от фактического местоположения объекта на изображении, которое вернул сервер.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Похоже, что существует несовпадение между системами координат, используемыми вашим сервером Python для ограничивающих рамок, и системой координат, используемой тегом Q-img в вашем интерфейсе.
Проверьте размер изображения, чтобы убедиться, что размеры изображения (imageData.width и imageData.height), предоставленные сервером, соответствуют фактическим размерам изображения, отображаемого тегом Q-img. Любое изменение размера или масштабирование на стороне клиента может привести к смещению координат.
Также проверьте, возвращает ли сервер координаты ограничивающего прямоугольника относительно размеров изображения (например, в процентах) или в абсолютных пикселях. В ваших стилях CSS в настоящее время используются абсолютные значения пикселей. Если сервер предоставляет абсолютные координаты в пикселях, а вашему тегу div требуется относительное позиционирование, вам необходимо вычислить проценты:
left: ((box.x1 / imageData.width) * 100) + '%',
top: ((box.y1 / imageData.height) * 100) + '%',
width: ((box.x2 - box.x1) / imageData.width) * 100) + '%',
height: ((box.y2 - box.y1) / imageData.height) * 100) + '%'
Зарегистрируйте координаты ограничивающего прямоугольника, полученные с сервера, и вычисленные стили элемента div в консоли браузера (используя console.info). Сравните их, чтобы увидеть, станет ли несоответствие очевидным. Используйте инструменты разработчика вашего браузера, чтобы проверить изображение и наложение div. Проверьте, отображается ли тег div в ожидаемом месте и имеет ли он правильные размеры. Вам придется провести здесь небольшое расследование.
Предполагая, что ваш сервер возвращает координаты в процентах (от 0,0 до 1,0), вы можете изменить шаблон следующим образом:
<q-img :src = "imageData.src">
<div v-for = "box in bboxes" :key = "box.x1"
style = "
position: absolute;
background-color: rgba(0, 100, 0, 0.1);
left: {{ box.x1 * 100 }}%;
top: {{ box.y1 * 100 }}%;
width: {{ (box.x2 - box.x1) * 100 }}%;
height: {{ (box.y2 - box.y1) * 100 }}%;
border: 0.5px solid blue;
"
>
</div>
</q-img>