Расположение HTML-формы с CSS
Существует несколько способов, которыми OpenCV поддерживает сравнение двух изображений и то, насколько «похожи» эти изображения. Эти методы включают сравнение гистограмм, сопоставление с шаблоном и сопоставление признаков.
Метод сравнения гистограмм cv2.compareHist(), вероятно, является самым простым и быстрым методом, однако иногда он может быть слишком упрощенным и неточным. Другим методом является сопоставление с шаблоном cv2.matchTemplate(), который сравнивает поисковое изображение «шаблона» с целевым изображением. Этот метод хорошо работает для идентичных изображений с одинаковым размером и ориентацией, но может быть неэффективным с угловыми изображениями. Метод сопоставления признаков , вероятно, является одним из наиболее эффективных методов, поскольку извлеченные признаки можно использовать для определения сходства между изображениями. Эти признаки можно распознать по повернутым или масштабированным целям, так как большая часть сходств подразумевает один и тот же объект. Эта категория может быть далее разделена на дескрипторы текстуры (HOG, LBP, Haar) и дескрипторы ключевых точек (SIFT / SURF).
Для вашего приложения я бы посмотрел на соответствие шаблона или функции, так как ваши изображения могут отличаться по углу.
4 ответа
CSS will work fine -- IF you are okay with entering pixel widths for things But sadly fails when you need to localize your strings and discover labels don't fit. For an address entry form, I would stick to using Tables, as they do all the right re-sizing and wrap behaviour and work w/o issues on almost every browser there is.
EDIT: I kinda wonder if any of the down-voters has checked the layout for these S.O. pages
Вам НЕ нужны таблицы для создания отличных HTML-форм. На самом деле, вы не хотите их! Попробуйте этот код дома и посмотрите, что вы думаете ..
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact info</title>
<LINK href="main2.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<style>
fieldset.nested
{
position: relative;
margin-top: 15px;
}
fieldset.nested legend
{
position: absolute; top: -8px; left: 1em;
}
</style>
<![endif]-->
</head>
<body>
<div>
<form>
<fieldset class="main">
<legend>Contact info</legend>
<fieldset class="nested">
<legend>Name</legend>
<ol>
<li>
<label for="textboxName">Name</label>
<input id="textboxName" name="textboxName" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxName" >Title</label>
<input id="textboxName" name="textboxTitle" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCompany">Company</label>
<input id="textboxCompany" name="textboxCompany" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<fieldset class="nested">
<legend>Address</legend>
<ol>
<li>
<label for="textboxAddress1" >Street address</label>
<input id="textboxAddress1" name="textboxAddress1" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxAddress2" >Street address</label>
<input id="textboxAddress2" name="textboxAddress2" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCity" >City</label>
<input id="textboxCity" name="textboxCity" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxRegion" >City/Region</label>
<input id="textboxRegion" name="textboxRegion" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxPostalCode" >Postal code</label>
<input id="textboxPostalCode" name="textboxPostalCode" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCountry" >Country</label>
<input id="textboxCountry" name="textboxCountry" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<fieldset class="nested">
<legend>Phone numbers</legend>
<ol>
<li style="display:none">
<label for="textboxName" >Name</label>
<input id="text1" name="textboxName" type="text" style="width: 15em;"/>
</li>
<li style="display:none">
<label for="textboxAddress1" >Address</label>
<input id="text2" name="textboxAddress1" type="text" style="width: 15em;" />
</li>
<li>
<label for="textboxAddress2" >Phone</label>
<input id="text3" name="textboxAddress2" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<div class="buttonsContainer">
<input class="button" type="submit" value="OK" />
<input class="button" type="button" value="Cancel" />
</div>
</fieldset>
</form>
</div>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
font-family: Verdana, Tahoma, Arial, sans-serif;
}
fieldset.main
{
margin: 1.5em 0 0 1.5em;
padding: 1em 0 0 0;
width: 400px;
font-size: .9em;
}
fieldset.main legend
{
margin-left: 1em;
color: #000000;
font-weight: bold;
}
fieldset.main ol
{
padding: 1em 1em 0 1em;
list-style: none;
}
fieldset.main li
{
padding-bottom: .5em;
}
fieldset.main ol li label
{
float: left;
width: 10em;
margin-right: 1em;
}
/* ----------------------------------------- */
fieldset.nested
{
margin: 0 0 1em 1em;
padding: 0;
width: 93%;
font-size: .8em;
border: 1px solid gray;
background: #B0C4DE;
}
fieldset.nested legend
{
margin-left: 1em;
font-weight: normal;
font-size: .9em;
color: black;
background-color: white;
padding: 0 1em 0 1em;
border: 1px solid black;
}
fieldset.nested ol
{
padding: 0 1em 0 1em;
list-style: none;
}
fieldset.nested li
{
/* Control leading between rows. */
padding-bottom: .7em;
}
fieldset.nested ol li label
{
float: left;
width: 10em;
margin-right: 1em;
}
/* ----------------------------------------- */
input.button
{
/* border-style: none; */
width: 6em;
height: 2.5em;
}
div.buttonsContainer
{
float: right;
margin: 1em 1em 1em 0;
}
Действительно хороший способ сделать это самостоятельно - установить firebug на firefox и проверять элементы на веб-сайтах, которые действительно хорошо это реализуют. .
Существует огромный сокрушительный маагзин на регистрационных формах . Можно увидеть несколько подходов в CSS, с некоторыми действительно хорошими примерами.