/example.html

https://bitbucket.org/rdllopes/image-analyzer · HTML · 160 lines · 156 code · 4 blank · 0 comment · 0 complexity · 3540450d63bf263f2bc3f95cae901752 MD5 · raw file 

    

  1. <html>
    2. 

  2. <head>
    3. 

  3. <style type="text/css">
    4. 

  4. .color_block {height: 100px; border-style:solid; border-width:1px; float: left; margin: 5px}
    5. 

  5. </style>
    6. 

  6. </head>
    7. 

  7. <body>
    8. 

  8.   
    9. 

  9. <div id="initial_image">
    10. 

  10.   <h3>Original vs 32 colors (Image Magick)</h3>
    11. 

  11.     <img src="eyes.jpg" style="height: 300px;"/>  
    12. 

  12.     <img src="eyes.gif" style="height: 300px; float: left"/>
    13. 

  13. </div>
    14. 

  14. 

  15. <div id="64 colors histogram" style="clear:both">
    16. 

  16.   <h3>64 colors reduction (Image Magick) - histogram</h3>
    17. 

  17.   <div class="color_block" style="background:#d3ddc2; width:113px; "></div>
    18. 

  18.   <div class="color_block" style="background:#c0d0b1; width:109px; "></div>
    19. 

  19.   <div class="color_block" style="background:#f0f1e9; width:69px; "></div>
    20. 

  20.   <div class="color_block" style="background:#d9dcc1; width:67px; "></div>
    21. 

  21.   <div class="color_block" style="background:#aec3a1; width:64px; "></div>
    22. 

  22.   <div class="color_block" style="background:#e9ebd9; width:61px; "></div>
    23. 

  23.   <div class="color_block" style="background:#e4e4be; width:48px; "></div>
    24. 

  24.   <div class="color_block" style="background:#e5ead7; width:45px; "></div>
    25. 

  25.   <div class="color_block" style="background:#c7cba3; width:39px; "></div>
    26. 

  26.   <div class="color_block" style="background:#cbceb1; width:39px; "></div>
    27. 

  27.   <div class="color_block" style="background:#224535; width:38px; "></div>
    28. 

  28.   <div class="color_block" style="background:#2e3e2f; width:36px; "></div>
    29. 

  29.   <div class="color_block" style="background:#315440; width:36px; "></div>
    30. 

  30.   <div class="color_block" style="background:#b2be92; width:36px; "></div>
    31. 

  31.   <div class="color_block" style="background:#bfdec5; width:35px; "></div>
    32. 

  32.   <div class="color_block" style="background:#3e4e39; width:32px; "></div>
    33. 

  33.   <div class="color_block" style="background:#40654a; width:32px; "></div>
    34. 

  34.   <div class="color_block" style="background:#4f7757; width:28px; "></div>
    35. 

  35.   <div class="color_block" style="background:#5e8864; width:26px; "></div>
    36. 

  36.   <div class="color_block" style="background:#92936b; width:23px; "></div>
    37. 

  37.   <div class="color_block" style="background:#353229; width:22px; "></div>
    38. 

  38.   <div class="color_block" style="background:#757351; width:21px; "></div>
    39. 

  39.   <div class="color_block" style="background:#d5d3d7; width:20px; "></div>
    40. 

  40.   <div class="color_block" style="background:#b2b591; width:20px; "></div>
    41. 

  41.   <div class="color_block" style="background:#8fb694; width:20px; "></div>
    42. 

  42.   <div class="color_block" style="background:#a1b083; width:20px; "></div>
    43. 

  43.   <div class="color_block" style="background:#54503d; width:19px; "></div>
    44. 

  44.   <div class="color_block" style="background:#4a6735; width:19px; "></div>
    45. 

  45.   <div class="color_block" style="background:#6f9972; width:19px; "></div>
    46. 

  46.   <div class="color_block" style="background:#7fa882; width:19px; "></div>
    47. 

  47.   <div class="color_block" style="background:#edf3e7; width:18px; "></div>
    48. 

  48.   <div class="color_block" style="background:#9db48f; width:18px; "></div>
    49. 

  49.   <div class="color_block" style="background:#9fc6aa; width:18px; "></div>
    50. 

  50.   <div class="color_block" style="background:#709f65; width:16px; "></div>
    51. 

  51.   <div class="color_block" style="background:#16362d; width:16px; "></div>
    52. 

  52.   <div class="color_block" style="background:#aed6bf; width:14px; "></div>
    53. 

  53.   <div class="color_block" style="background:#222e22; width:12px; "></div>
    54. 

  54.   <div class="color_block" style="background:#4d6044; width:12px; "></div>
    55. 

  55.   <div class="color_block" style="background:#9bdfc2; width:12px; "></div>
    56. 

  56.   <div class="color_block" style="background:#819262; width:12px; "></div>
    57. 

  57.   <div class="color_block" style="background:#8fa272; width:12px; "></div>
    58. 

  58.   <div class="color_block" style="background:#8da47e; width:12px; "></div>
    59. 

  59.   <div class="color_block" style="background:#504f50; width:11px; "></div>
    60. 

  60.   <div class="color_block" style="background:#5d7150; width:11px; "></div>
    61. 

  61.   <div class="color_block" style="background:#7c936c; width:10px; "></div>
    62. 

  62.   <div class="color_block" style="background:#68814f; width:10px; "></div>
    63. 

  63.   <div class="color_block" style="background:#667; width:10px; "></div>
    64. 

  64.   <div class="color_block" style="background:#6c825c; width:9px; "></div>
    65. 

  65.   <div class="color_block" style="background:#91312; width:8px; "></div>
    66. 

  66.   <div class="color_block" style="background:#feb; width:7px; "></div>
    67. 

  67.   <div class="color_block" style="background:#69b4a1; width:6px; "></div>
    68. 

  68.   <div class="color_block" style="background:#66a784; width:6px; "></div>
    69. 

  69.   <div class="color_block" style="background:#141c14; width:6px; "></div>
    70. 

  70.   <div class="color_block" style="background:#2f7967; width:5px; "></div>
    71. 

  71.   <div class="color_block" style="background:#80c3a7; width:4px; "></div>
    72. 

  72.   <div class="color_block" style="background:#282628; width:4px; "></div>
    73. 

  73.   <div class="color_block" style="background:#3a815c; width:3px; "></div>
    74. 

  74.   <div class="color_block" style="background:#a9e2d6; width:3px; "></div>
    75. 

  75.   <div class="color_block" style="background:#c4e30; width:3px; "></div>
    76. 

  76.   <div class="color_block" style="background:#153727; width:2px; "></div>
    77. 

  77.   <div class="color_block" style="background:#5a6; width:1px; "></div>
    78. 

  78.   <div class="color_block" style="background:#1d9863; width:1px; "></div>
    79. 

  79.   <div class="color_block" style="background:#49c593; width:0px; "></div>
    80. 

  80.   <div class="color_block" style="background:#22967c; width:0px; "></div>
    81. 

  81.   <div class="color_block" style="background:#000; width:0px; "></div>
    82. 

  82. </div>
    83. 

  83. 

  84. <div id="cluster_40" style="clear:both">
    85. 

  85.   <h3>Group by clustering - Weighted Euclidean Distance max = 12</h3>
    86. 

  86.   <div class="color_block" style="background:#d8dec1; width:229px; "></div>
    87. 

  87.   <div class="color_block" style="background:#ebeee0; width:195px; "></div>
    88. 

  88.   <div class="color_block" style="background:#c4ceae; width:188px; "></div>
    89. 

  89.   <div class="color_block" style="background:#b0bf9a; width:120px; "></div>
    90. 

  90.   <div class="color_block" style="background:#284232; width:75px; "></div>
    91. 

  91.   <div class="color_block" style="background:#37513d; width:68px; "></div>
    92. 

  92.   <div class="color_block" style="background:#899369; width:46px; "></div>
    93. 

  93.   <div class="color_block" style="background:#446448; width:44px; "></div>
    94. 

  94.   <div class="color_block" style="background:#87a57c; width:43px; "></div>
    95. 

  95.   <div class="color_block" style="background:#2e2f27; width:40px; "></div>
    96. 

  96.   <div class="color_block" style="background:#537555; width:39px; "></div>
    97. 

  97.   <div class="color_block" style="background:#9fb289; width:38px; "></div>
    98. 

  98.   <div class="color_block" style="background:#6f9c6c; width:36px; "></div>
    99. 

  99.   <div class="color_block" style="background:#bfdec5; width:35px; "></div>
    100. 

  100.   <div class="color_block" style="background:#535044; width:31px; "></div>
    101. 

  101.   <div class="color_block" style="background:#5e8864; width:26px; "></div>
    102. 

  102.   <div class="color_block" style="background:#e1410; width:22px; "></div>
    103. 

  103.   <div class="color_block" style="background:#757351; width:21px; "></div>
    104. 

  104.   <div class="color_block" style="background:#d5d3d7; width:20px; "></div>
    105. 

  105.   <div class="color_block" style="background:#8fb694; width:20px; "></div>
    106. 

  106.   <div class="color_block" style="background:#4a6735; width:19px; "></div>
    107. 

  107.   <div class="color_block" style="background:#6a8155; width:19px; "></div>
    108. 

  108.   <div class="color_block" style="background:#16362c; width:18px; "></div>
    109. 

  109.   <div class="color_block" style="background:#9fc6aa; width:18px; "></div>
    110. 

  110.   <div class="color_block" style="background:#aed6bf; width:14px; "></div>
    111. 

  111.   <div class="color_block" style="background:#9bdfc2; width:12px; "></div>
    112. 

  112.   <div class="color_block" style="background:#677; width:11px; "></div>
    113. 

  113.   <div class="color_block" style="background:#347c62; width:9px; "></div>
    114. 

  114.   <div class="color_block" style="background:#69b4a1; width:6px; "></div>
    115. 

  115.   <div class="color_block" style="background:#66a784; width:6px; "></div>
    116. 

  116.   <div class="color_block" style="background:#80c3a7; width:4px; "></div>
    117. 

  117.   <div class="color_block" style="background:#a9e2d6; width:3px; "></div>
    118. 

  118.   <div class="color_block" style="background:#c4e30; width:3px; "></div>
    119. 

  119.   <div class="color_block" style="background:#1d9863; width:1px; "></div>
    120. 

  120.   <div class="color_block" style="background:#49c593; width:0px; "></div>
    121. 

  121.   <div class="color_block" style="background:#22967c; width:0px; "></div>
    122. 

  122. </div>
    123. 

  123. 

  124. <div id="cluster_40" style="clear:both">
    125. 

  125.   <h3>32 colors reduction (Image Magick) - Histogram</h3>
    126. 

  126.   <div class="color_block" style="background:#c9d7b9; width:228px; "></div>
    127. 

  127.   <div class="color_block" style="background:#d7dabe; width:160px; "></div>
    128. 

  128.   <div class="color_block" style="background:#a7be9b; width:158px; "></div>
    129. 

  129.   <div class="color_block" style="background:#eaecdd; width:124px; "></div>
    130. 

  130.   <div class="color_block" style="background:#e5ead7; width:94px; "></div>
    131. 

  131.   <div class="color_block" style="background:#3f5841; width:88px; "></div>
    132. 

  132.   <div class="color_block" style="background:#7f9e75; width:79px; "></div>
    133. 

  133.   <div class="color_block" style="background:#5d7d58; width:79px; "></div>
    134. 

  134.   <div class="color_block" style="background:#283e2f; width:64px; "></div>
    135. 

  135.   <div class="color_block" style="background:#b2b591; width:57px; "></div>
    136. 

  136.   <div class="color_block" style="background:#92936b; width:39px; "></div>
    137. 

  137.   <div class="color_block" style="background:#d5d3d7; width:35px; "></div>
    138. 

  138.   <div class="color_block" style="background:#54503d; width:31px; "></div>
    139. 

  139.   <div class="color_block" style="background:#757351; width:30px; "></div>
    140. 

  140.   <div class="color_block" style="background:#353229; width:29px; "></div>
    141. 

  141.   <div class="color_block" style="background:#16362d; width:24px; "></div>
    142. 

  142.   <div class="color_block" style="background:#c4e30; width:21px; "></div>
    143. 

  143.   <div class="color_block" style="background:#504f50; width:18px; "></div>
    144. 

  144.   <div class="color_block" style="background:#66a784; width:17px; "></div>
    145. 

  145.   <div class="color_block" style="background:#a9e2d6; width:13px; "></div>
    146. 

  146.   <div class="color_block" style="background:#f15f; width:13px; "></div>
    147. 

  147.   <div class="color_block" style="background:#2f7a68; width:12px; "></div>
    148. 

  148.   <div class="color_block" style="background:#3a815c; width:12px; "></div>
    149. 

  149.   <div class="color_block" style="background:#9bdfc2; width:12px; "></div>
    150. 

  150.   <div class="color_block" style="background:#69b4a1; width:10px; "></div>
    151. 

  151.   <div class="color_block" style="background:#667; width:9px; "></div>
    152. 

  152.   <div class="color_block" style="background:#91312; width:8px; "></div>
    153. 

  153.   <div class="color_block" style="background:#feb; width:6px; "></div>
    154. 

  154.   <div class="color_block" style="background:#80c3a7; width:6px; "></div>
    155. 

  155.   <div class="color_block" style="background:#282628; width:3px; "></div>
    156. 

  156.   <div class="color_block" style="background:#49c593; width:2px; "></div>
    157. 

  157.   <div class="color_block" style="background:#1d9863; width:2px; "></div>
    158. 

  158.   <div class="color_block" style="background:#000; width:0px; "></div>
    159. 

  159. </body>
    160. 

  160. </html>
    161.