Commit a0299c85 authored by Elijah Justin Medina's avatar Elijah Justin Medina
Browse files

Removed morphological operations

Unable to make it work... yet. For later revisions
parent dc2a970e
......@@ -45,38 +45,38 @@ def apply_mask(img, R_min, R_max, G_min, G_max, B_min, B_max):
return ('', 204)
def morph_delete_files():
files = glob.glob(f'web/data/morph/morph_new_*')
os.remove(files[0])
operations = {'dilation':binary_dilation, 'erosion':binary_erosion}
@app.route('/morph/<string:process>/<string:img>/<int:radius>')
def morph(process, img, radius):
op = operations[process]
selem = np.zeros((50, 50))
# mask = imageio.imread(filenames[-1])
files = glob.glob(f'web/data/morph/morph_new*')
if files:
mask = imageio.imread(files[0])
else:
mask = imageio.imread(f'web/data/morph/morph_init.png')
morph_delete_files()
ci = 25
cj = 25
# Create index arrays to z
I,J=np.meshgrid(np.arange(50),np.arange(50))
# calculate distance of all points to centre
dist=np.sqrt((I-ci)**2+(J-cj)**2)
# Assign value of 1 to those points where dist<cr:
selem[np.where(dist<=radius)]=1
mask_new = op(mask, selem)
imageio.imwrite(f"web/data/morph/morph_new_{img.replace('.','-')}-{radius}-{process}.png", mask_new.astype(np.uint8)*255)
# filenames.append("web/data/morph/morph_new_{img.replace('.','-')}-{radius}-{process}.png")
return ('', 204)
# def morph_delete_files():
# files = glob.glob(f'web/data/morph/morph_new_*')
# os.remove(files[0])
# operations = {'dilation':binary_dilation, 'erosion':binary_erosion}
# @app.route('/morph/<string:process>/<string:img>/<int:radius>')
# def morph(process, img, radius):
# op = operations[process]
# selem = np.zeros((50, 50))
# # mask = imageio.imread(filenames[-1])
# files = glob.glob(f'web/data/morph/morph_new*')
# if files:
# mask = imageio.imread(files[0])
# else:
# mask = imageio.imread(f'web/data/morph/morph_init.png')
# morph_delete_files()
# ci = 25
# cj = 25
# # Create index arrays to z
# I,J=np.meshgrid(np.arange(50),np.arange(50))
# # calculate distance of all points to centre
# dist=np.sqrt((I-ci)**2+(J-cj)**2)
# # Assign value of 1 to those points where dist<cr:
# selem[np.where(dist<=radius)]=1
# mask_new = op(mask, selem)
# imageio.imwrite(f"web/data/morph/morph_new_{img.replace('.','-')}-{radius}-{process}.png", mask_new.astype(np.uint8)*255)
# # filenames.append("web/data/morph/morph_new_{img.replace('.','-')}-{radius}-{process}.png")
# return ('', 204)
# @app.route('/maskthres')
\ No newline at end of file
#img-container {
width: 256px;
height: 256px;
text-align: center;
body {
height: 100%;
}
.slider::-webkit-slider-thumb {
background: #575252;
width: 5px;
}
img {
max-width: 100%;
max-height: 100%;
margin: 15px 5px;
.slider::-moz-range-thumb {
background: #ffffff ;
width: 5px;
}
.slider {
......@@ -35,4 +37,59 @@ img {
width: 33%;
display: inline-block;
padding: 0px;
}
#img-container {
width: 250px;
height: 250px;
text-align: center;
}
#morphed-container {
width: 550px;
height: 275px;
text-align: center;
}
img {
max-width: 100%;
max-height: 100%;
margin: 15px 5px;
}
#select-image {
width: 25%;
padding-right: 2%;
float: left;
position: fixed;
height: 100%;
}
#results {
margin-top: 25px;
margin-left: 27%;
width: 70%;
float: left;
overflow: auto;
z-index: 10;
}
#mask, #dilateerode {
float: left;
width: 50%;
z-index: 10;
}
#dilateerode{
padding-right: 10px;
}
.slider.morph {
width: 65%;
margin-right: 10px;
float: right;
}
div#morphological-operations h4 {
margin-top: 100px;
padding-top: 250px;
}
\ No newline at end of file
web/data/morph/morph_init.png

2.58 KB | W: | H:

web/data/morph/morph_init.png

474 Bytes | W: | H:

web/data/morph/morph_init.png
web/data/morph/morph_init.png
web/data/morph/morph_init.png
web/data/morph/morph_init.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -3,8 +3,7 @@
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/slider.css">
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
<link rel="newer stylesheet" type="text/css" href="css/slider.css">
<style>
body {
height: 100%;
......@@ -163,7 +162,7 @@
</div>
</div>
<div id="morphological-operations">
<!-- <div id="morphological-operations">
<h4>Morphological Operations</h4>
<p>When the colors of the images are too mixed, i.e. the foreground is not easily separable from the background using thresholding techniques, some operations can be done on the mask in order to improve the results.
There are many operations but most of them can be traced back to two fundamental operations: erosion and dilation.
......@@ -190,7 +189,7 @@
<img src="" alt="Select image first" id="morphed">
</div>
</div>
</div>
</div> -->
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
......@@ -227,32 +226,32 @@
)
}
function erodeImage() {
let rad = document.querySelector("input#erosion").value
// console.log(rad)
let selImg = document.querySelector("select#img").value
fetch('/morph/erosion/'+selImg+'/'+rad).then(
function (r){
document.querySelector("img#morphed").src = "data/morph/morph_new_"+selImg.slice(0, -4)+ '-' + selImg.slice(selImg.length - 3)+"-" + rad + "-" + "erosion.png"
}
)
}
// function erodeImage() {
// let rad = document.querySelector("input#erosion").value
// // console.log(rad)
// let selImg = document.querySelector("select#img").value
// fetch('/morph/erosion/'+selImg+'/'+rad).then(
// function (r){
// document.querySelector("img#morphed").src = "data/morph/morph_new_"+selImg.slice(0, -4)+ '-' + selImg.slice(selImg.length - 3)+"-" + rad + "-" + "erosion.png"
// }
// )
// }
function dilateImage() {
let rad = document.querySelector("input#dilation").value
// console.log(rad)
let selImg = document.querySelector("select#img").value
fetch('/morph/dilation/'+selImg+'/'+rad).then(
function (r){
document.querySelector("img#morphed").src = "data/morph/morph_new_"+selImg.slice(0, -4)+ '-' + selImg.slice(selImg.length - 3)+"-" + rad + "-" + "dilation.png"
}
)
}
// function dilateImage() {
// let rad = document.querySelector("input#dilation").value
// // console.log(rad)
// let selImg = document.querySelector("select#img").value
// fetch('/morph/dilation/'+selImg+'/'+rad).then(
// function (r){
// document.querySelector("img#morphed").src = "data/morph/morph_new_"+selImg.slice(0, -4)+ '-' + selImg.slice(selImg.length - 3)+"-" + rad + "-" + "dilation.png"
// }
// )
// }
document.querySelector("button#get-mask").addEventListener("click", getMask)
document.querySelector("button#apply-mask").addEventListener("click", applyMask)
document.querySelector("button#erode").addEventListener("click", erodeImage)
document.querySelector("button#dilate").addEventListener("click", dilateImage)
// document.querySelector("button#erode").addEventListener("click", erodeImage)
// document.querySelector("button#dilate").addEventListener("click", dilateImage)
</script>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment