filtre 3*3 fonctionnel, next commit will try to make median filter and fourrier transformation

Author: apachefranklin

.gitignore

@@ -4,7 +4,10 @@
 __pycache__/*
 migrations/*
 */migrations/
-*/static/imageprocess/images/
+*.jpg
+*.png
+*.pgm
+*.jpeg
 *.py[cod]
 *$py.class
 

imgprocess/img_api.py

@@ -110,4 +110,28 @@ def _make_operation(request):
 
     image_info_1["matrix"]=None
     image_info_1["saved_name"]=new_image_name
-    return JsonResponse(image_info_1)
+    return JsonResponse(image_info_1)
+
+
+def _convolution(request):
+    """take all data come from convolution page and make all operation
+    about convolution, now we consider only the 3*3 convolution matrix"""
+    conv_field=request.POST["convolution_matrix"]
+    conv_field=conv_field.split("\r\n")
+    conv_matrix=np.zeros((3,3))
+    for i in range(len(conv_field)):
+        elts=conv_field[i].split()
+        elts=[float(elt) for elt in elts]
+        conv_matrix[i,]=elts
+    image_info=save_image(request.FILES["imguploaded"],img_path)
+    new_img_matrix=ImgLib().convolution(image_info["matrix"],conv_matrix)
+
+    new_img_matrix=new_img_matrix.astype(np.uint8)
+    new_img=Image.fromarray(new_img_matrix)
+
+    new_image_name=get_random_string(random.randint(15,20))+image_info["extension"]
+    new_img.save(img_path+new_image_name)
+
+    image_info["matrix"]=None
+    image_info["saved_name"]=new_image_name
+    return JsonResponse(image_info)

imgprocess/static/shared/js/img_process.js

@@ -85,7 +85,26 @@ $(function (e) {
         });
         return false;
     });
-
+   
+    $("#form_make_convolution").submit(function () {
+        form_data = new FormData(this)
+        $.ajax({
+            url: $(this).attr("action"),
+            data: form_data,
+            contentType: false,
+            cache: false,
+            processData: false,
+            dataType: "json",
+            method: "POST",
+            success: function (result) {
+                $("#result-box").html("<img src='/static/imageprocess/images/" + result["saved_name"] + "' width='100%' height='100%' />");
+            },
+            error: function (result) {
+                console.log("error");
+            }
+        });
+        return false;
+    });
 
 });
 

imgprocess/templates/imgprocess/convolution.html

@@ -0,0 +1,42 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<br />
+<br />
+    <div class="container">
+        <h3>Welcome to convolution</h3>
+        <hr />
+        <form class="" id="form_make_convolution" enctype="multipart/form-data"  method="post" action="{% url 'imageprocess:pconvolution' %}">
+        {% csrf_token %}
+        <div class="row">
+        </div>
+        <div class="row img-list-work">
+            <div class="col-6">
+                <h4>Preview</h4>
+                <div class="card border-0 shadow-lg" id="img_preview">
+                    
+                </div>
+                <label>upload image</label>
+                <input type="file" name="imguploaded"  class="form-control form-control-file" onChange="showPreview(this,'#img_preview')" />
+            </div>
+            <div class="col-6">
+                <h4>Masque de convolution</h4>
+                <div class="card border-0 shadow-lg" id="img_preview">
+                <textarea class="form-control form-control-lg" name="convolution_matrix" placeholder="Enter the convolution mask" width="100%" height="100%"></textarea>    
+                </div>
+                
+            </div>
+            <div class="col">
+             <br />
+             <button type="submit" class="btn btn-info rounded btn-lg second-color shadow-lg text-white">MAKE CONVOLUTION</button>
+            <br />        <br />
+            <h4>Result</h4>
+                <div class="card border-0 shadow-lg" id="result-box">
+                    
+                </div>
+            </div>
+        </div>
+       
+        </form>
+    </div>
+{% endblock content %}

imgprocess/templates/imgprocess/index.html

@@ -40,9 +40,9 @@ <h3>Basic operation</h3>
                 </div>
 
                 <div class="col-lg-4 col-6 col-md col-sm">
-                    <a class="nav-link" href="">
+                    <a class="nav-link" href="{% url 'imageprocess:convolution' %}">
                         <div class="card shadow border-0">
-                            MORCEAU
+                            Convolution
                         </div>        
                     </a>
                 </div>

imgprocess/urls.py

@@ -11,5 +11,7 @@
     path("egalisation",views.egalisation_histogramme,name="egalisation"),
     path("pegalisation",img_api._egalisation_histogramme,name="pegalisation"),
     path("two_image_operation",views.basic_operation,name="operation"),
-    path("poperation",img_api._make_operation,name="poperation")
+    path("poperation",img_api._make_operation,name="poperation"),
+    path("convolution",views.convolution,name="convolution"),
+    path("pconvolution",img_api._convolution,name="pconvolution")
 ]

imgprocess/utils/img_lib.py

@@ -135,9 +135,23 @@ def and_operation(self,img_matrix1,img_matrix2):
                 new_matrix[i][j]=int(img_matrix1[i][j]) & int(img_matrix2[i][j])
         return new_matrix
 
-    def convolution(self,img_matrix,convolution_matrix):
-        """That function take the matrix of image and convolution"""
-        pass
+    def convolution(self,img_matrix,kernel):
+        """That function take the matrix of image and convolution
+        The principe of convolution is to make translation of convolution matrix
+        on the img matrix, at each time, the center of submatrix take the sum of all  values multiplity
+        of arround pixel with the convolution matrix
+        @img_matrix must be an numpy array
+        @kernel matrix must be an numpy array"""
+
+        dimension=img_matrix.shape
+        new_img_matrix=np.zeros(dimension)
+        #We need to know were will be the center of convolution
+        #now we will consider only 3*3 convolution matrix
+        for i in range(1,dimension[0]-1):
+            for j in range(1,dimension[1]-1):
+                p_pixel=img_matrix[i-1][j-1]*kernel[0][0]+img_matrix[i-1,j]*kernel[0][1]+img_matrix[i-1,j+1]*kernel[0][2]+img_matrix[i,j-1]*kernel[1][0]+img_matrix[i][j]*kernel[1][1]+img_matrix[i][j+1]*kernel[1,2]+img_matrix[i+1][j-1]*kernel[2][0]+img_matrix[i+1][j]*kernel[2][1]+img_matrix[i+1,j+1]*kernel[2][2]
+                new_img_matrix[i][j]=p_pixel
+        return new_img_matrix
 
     def get_delay(self,pusblish_time,current_time):
         passed_time=current_time-pusblish_time

imgprocess/views.py

@@ -35,4 +35,8 @@ def egalisation_histogramme(request):
 
 
 def basic_operation(request):
-    return render(request,"imgprocess/image_operation.html")
+    return render(request,"imgprocess/image_operation.html")
+
+
+def convolution(request):
+    return render(request,"imgprocess/convolution.html")