✨ gestion d'erreur + page d'accueil

image_project/init_image/src/blend_images.py

@@ -6,14 +6,14 @@ def blend_images(img1, img2, blend_ratio, position):
     new_img1 = img1
     new_img2 = img2
 
-    if (np.asarray(img1).shape[-1] != np.asarray(img2).shape[-1]):
+    if (np.asarray(img1).shape[-1] or np.asarray(img2).shape[-1] == 4):
         # On regarde si l'image 1 a le canal alpha, si oui on l'enlève
         if (np.asarray(img1).shape[-1] == 4):
             new_img1 = new_img1.convert("RGB")
         else:
             new_img2 = new_img2.convert("RGB")
-
-    the_new_img2 = img2
+        
+    the_new_img2 = new_img2
 
     # Ajuster la position de l'image 2 en fonction de la position relative
     x, y = position

image_project/init_image/src/create_gif.py

@@ -9,15 +9,12 @@ def creer_gif(tableau_images, duree):
 
     for img in tableau_images:
         img_red = img
-        
+    
         img_red = img_red.convert("RGB") 
-        
-        if (tableau_images[0].size[1] != img.size[1]):
-            nouvelle_largeur = int(img.size[0] * (tableau_images[0].size[1] / img.size[1]))
-            nouvelle_hauteur = tableau_images[0].size[1]
-            img_red = redimensionner_image(np.asarray(img), nouvelle_largeur, nouvelle_hauteur)
-
+        if (tableau_images[0].size != img.size):
+            img_red = img_red.resize(tableau_images[0].size)
+            
         gif.append(img_red)
 
-    # Enregistrer le GIF // duree en ms
+    # Enregistrer le GIF
     imageio.mimsave('media/new_gif.gif', gif, duration=duree, loop=0)

image_project/init_image/src/fusionner_verticalement.py

@@ -6,12 +6,11 @@ def fusionner_verticalement(image1, image2):
     image2_redimensionnee = image2
     
     if (image1.size[0] != image2.size[0]):
-        nouvelle_largeur = image1.size[0]
-        nouvelle_hauteur = int(image2.size[1] * (image1.size[0] / image2.size[0]))
-        image2_redimensionnee = redimensionner_image(np.asarray(image2), nouvelle_largeur, nouvelle_hauteur)
+        image2_redimensionnee = image2_redimensionnee.resize(image1.size)
 
     result = Image.new('RGB', (image1.width, image1.height + image2_redimensionnee.height))
     result.paste(image1, (0, 0))
     result.paste(image2_redimensionnee, (0, image1.height))
     
     return result
+

image_project/init_image/templates/init_image/align_horizontal.html

@@ -30,6 +30,12 @@
         <h1 class="mb-5">
             Your are in page alignement horizontal
         </h1>
+        
+        {% if message_erreur %}
+            <div class="text-white bg-danger text-center fs-4 p-3 mb-4">
+                {{ message_erreur }}
+            </div>
+        {% endif %}
 
         <div class="d-flex justify-content-center mb-5">
             <form class="border boder-1 border-black p-3 w-50" action="" method="post" enctype="multipart/form-data">

image_project/init_image/templates/init_image/align_vertical.html

@@ -31,6 +31,12 @@
             Your are in page alignement vertical
         </h1>
 
+        {% if message_erreur %}
+            <div class="text-white bg-danger text-center fs-4 p-3 mb-4">
+                {{ message_erreur }}
+            </div>
+        {% endif %}
+
         <div class="d-flex justify-content-center mb-5">
             <form class="border boder-1 border-black p-3 w-50" action="" method="post" enctype="multipart/form-data">
                 {% csrf_token %}

image_project/init_image/templates/init_image/animation.html

@@ -31,16 +31,18 @@
             Your are in page animation
         </h1>
 
+        {% if message_erreur %}
+            <div class="text-white bg-danger text-center fs-4 p-3 mb-4">
+                {{ message_erreur }}
+            </div>
+        {% endif %}
+
         <div class="d-flex justify-content-center mb-5">
             <form class="border boder-1 border-black p-3 w-50" action="" method="post" enctype="multipart/form-data">
                 {% csrf_token %}
-                <div class="form-group">
-                    <label class="mb-2" for="image">Choississez une image</label>
-                    <input type="file" id="image" name="image" accept="image/*">
-                </div>
                 <div class="form-group mb-3">
-                    <label class="mb-2" for="image2">Choississez une image</label>
-                    <input type="file" id="image2" name="image2" accept="image/*">
+                    <label class="mb-2" for="images">Choississez une image</label>
+                    <input type="file" id="images" name="images[]" accept="image/*" multiple><br>
                 </div>
                 <div class="form-group">
                     <label class="mb-2" for="duree">Durée en ms: </label>
@@ -50,13 +52,22 @@
             </form>
         </div>
 
+        <div class="d-flex mb-5 justify-content-center flex-wrap">
+            {% if image_classique %}
+                {% for i in tab_number %}
+                    <div class="container__image">
+                        <img class="w-100 h-100" src="../../media/image_classique_{{i}}.png">
+                    </div>
+                {% endfor %}
+            {% endif %}
+        </div>
+
         {% if image_classique %}
-            <div class="w-full">
-                <img class="w-100 mb-5" src="../../media/image_classique_1.png">
-                <img class="w-100 mb-5" src="../../media/image_classique_2.png">
+            <div class="w-100">
                 <img class="w-100 mb-5" src="../../media/new_gif.gif">
             </div>
         {% endif %}
+       
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"

image_project/init_image/templates/init_image/black_white.html

@@ -31,6 +31,12 @@
             Your are in page black and white
         </h1>
 
+        {% if message_erreur %}
+            <div class="text-white bg-danger text-center fs-4 p-3 mb-4">
+                {{ message_erreur }}
+            </div>
+        {% endif %}
+
         <div class="d-flex justify-content-center mb-5">
             <form class="border boder-1 border-black p-3 w-50" action="" method="post" enctype="multipart/form-data">
                 {% csrf_token %}

image_project/init_image/templates/init_image/fusion.html

@@ -31,6 +31,12 @@
             Your are in page fusion
         </h1>
 
+        {% if message_erreur %}
+            <div class="text-white bg-danger text-center fs-4 p-3 mb-4">
+                {{ message_erreur }}
+            </div>
+        {% endif %}
+
         <div class="d-flex justify-content-center mb-5">
             <form class="border boder-1 border-black p-3 w-50" action="" method="post" enctype="multipart/form-data">
                 {% csrf_token %}
@@ -38,10 +44,22 @@
                     <label class="mb-2" for="image">Choississez une image</label>
                     <input type="file" id="image" name="image" accept="image/*">
                 </div>
-                <div class="form-group">
+                <div class="form-group mb-3">
                     <label class="mb-2" for="image2">Choississez une image</label>
                     <input type="file" id="image2" name="image2" accept="image/*">
                 </div>
+                <div class="form-group">
+                    <label class="mb-2" for="opacite">Choississez une opacité</label>
+                    <input type="text" id="opacite" name="opacite" accept="image/*">
+                </div>
+                <div class="form-group">
+                    <label class="mb-2" for="position_x">Choississez une position x</label>
+                    <input type="text" id="position_x" name="position_x" accept="image/*">
+                </div>
+                <div class="form-group">
+                    <label class="mb-2" for="position_y">Choississez une position y</label>
+                    <input type="text" id="position_y" name="position_y" accept="image/*">
+                </div>
                 <input type="submit" class="btn btn-primary mt-3" value="Telecharger">
             </form>
         </div>

image_project/init_image/templates/init_image/gray.html

@@ -31,6 +31,12 @@
             Your are in page gray
         </h1>
 
+        {% if message_erreur %}
+            <div class="text-white bg-danger text-center fs-4 p-3 mb-4">
+                {{ message_erreur }}
+            </div>
+        {% endif %}
+
         <div class="d-flex justify-content-center mb-5">
             <form class="border boder-1 border-black p-3 w-50" action="" method="post" enctype="multipart/form-data">
                 {% csrf_token %}

image_project/init_image/templates/init_image/index.html

@@ -21,17 +21,62 @@
             <li class="nav-item"><a href="./animation" class="nav-link">Animation</a></li>
           </ul>
         </header>
+    </div>
+
+    <div class="container">
+      <h3>Mini projet</h3>
+      <div>
+        L'objectif de ce projet est de réaliser une application web qui regroupe plusieurs fonctionnalités 
+        sur la transformation d'images. Vous pouvez naviguez sur nos différentes fonctionnalités à l'aide de notre 
+        menu. Plus d'information en dessous.
+      </div>
+      <br>
+      <br>
+
+      <div class="grid">
+        <div class="col-10">
+          <table class="table">
+            <thead>
+              <tr>
+                <th scope="col">Name</th>
+                <th scope="col">Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">B&W</th>
+                <td>Transformation to black and white of an image</td>
+              </tr>
+              <tr>
+                <th scope="row">Gray</th>
+                <td>Transformation to shade of gray of an image</td>
+              </tr>
+              <tr>
+                <th scope="row">Resize</th>
+                <td>Resize the size of an image (height, width)</td>
+              </tr>
+              <tr>
+                <th scope="row">Align_V</th>
+                <td>Align vertically two images</td>
+              </tr>
+              <tr>
+                <th scope="row">Align_H</th>
+                <td>Align horizontally two images</td>
+              </tr>
+              <tr>
+                <th scope="row">Fusion</th>
+                <td>Merge of two image with an opacity and a position</td>
+              </tr>
+              <tr>
+                <th scope="row">Animation</th>
+                <td>Creation of a gif with many images</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
+    </div>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
-</body>
+  </body>
 </html>
-
-<!-- <form action="" method="post" enctype="multipart/form-data">
-    {% csrf_token %}
-
-    <label for="image">Choisir une image :</label>
-    <input type="file" id="image" name="image" accept="image/*">
-
-    <input type="submit" value="telecharger">
-</form> -->

image_project/init_image/templates/init_image/resize.html

@@ -31,6 +31,12 @@
             Your are in page resize
         </h1>
 
+        {% if message_erreur %}
+            <div class="text-white bg-danger text-center fs-4 p-3 mb-4">
+                {{ message_erreur }}
+            </div>
+        {% endif %}
+
         <div class="d-flex justify-content-center mb-5">
             <form class="border boder-1 border-black p-3 w-50" action="" method="post" enctype="multipart/form-data">
                 {% csrf_token %}

image_project/init_image/templates/init_image/traitement.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-    <title>Document</title>
-</head>
-<body>
-    
-</body>
-</html>
-
-<h1>traitement</h1>
-<div class="container">
-    <img src="../media/image_classique.png">
-    <img src="../media/image_gray.png">
-    <img src="../media/image_noir-blanc.png">
-    <img src="../media/image_redimension.png">
-    <img src="../media/image_fusion_vertical.png">
-</div>

image_project/init_image/views.py

@@ -12,21 +12,47 @@ from .src.fusionner_horizontalement import fusionner_horizontalement
 from .src.create_gif import creer_gif
 
 # Create your views here.
-def upload_image(request):
+def upload_image(request):   
+   return render(request, 'init_image/index.html')
+
+def black_white(request):
+   tableau_extension = ['jpeg', 'jpg', 'svg', 'png']
+
    if request.method == 'POST' and request.FILES:
       image = request.FILES['image']
 
-      # ouvrir image
+      nom_image = str(image)
+      nom_fichier, extension = nom_image.split(".")
+
+      if extension not in tableau_extension:
+         return render(request, 'init_image/black_white.html', context={"image_classique" : False,
+            'message_erreur' : 'mauvaise extension (jpeg/jpg, png ou svg)'})
+
+      # ouvrir image 
       image_t = open_image(image)
       image_t.save("media/image_classique.png")
-      return render(request, 'init_image/traitement.html')
-   
-   return render(request, 'init_image/index.html')
+      
+      # 1. Transformation en noir et blanc
+      image_noir_blanc = convert_to_black_and_white(image_t)
+      image_noir_blanc.save("media/image_noir-blanc.png")
+
+      return render(request, 'init_image/black_white.html', context={"image_classique" : True})
+
+   return render(request, 'init_image/black_white.html', context={"image_classique" : False})
 
 def page_gray(request):
+   tableau_extension = ['jpeg', 'jpg', 'svg', 'png']
+
    if request.method == 'POST' and request.FILES:
       image = request.FILES['image']
 
+      nom_image = str(image)
+      nom_fichier, extension = nom_image.split(".")
+
+      if extension not in tableau_extension:
+         return render(request, 'init_image/gray.html', context={"image_classique" : False,
+            'message_erreur' : 'mauvaise extension (jpeg/jpg, png ou svg)'})
+
       # ouvrir image
       image_t = open_image(image)
       image_t.save("media/image_classique.png")
@@ -39,27 +65,25 @@ def page_gray(request):
          
    return render(request, 'init_image/gray.html', context={"image_classique" : False})
 
-def black_white(request):
+def resize_picture(request):
+   tableau_extension = ['jpeg', 'jpg', 'svg', 'png']
+
    if request.method == 'POST' and request.FILES:
       image = request.FILES['image']
 
-      # ouvrir image
-      image_t = open_image(image)
-      image_t.save("media/image_classique.png")
-      
-      # 1. Transformation en noir et blanc
-      image_noir_blanc = convert_to_black_and_white(image_t)
-      image_noir_blanc.save("media/image_noir-blanc.png")
-
-      return render(request, 'init_image/black_white.html', context={"image_classique" : True})
+      nom_image = str(image)
+      nom_fichier, extension = nom_image.split(".")
 
-   return render(request, 'init_image/black_white.html', context={"image_classique" : False})
+      if extension not in tableau_extension:
+         return render(request, 'init_image/resize.html', context={"image_classique" : False,
+            'message_erreur' : 'Erreur : mauvaise extension (jpeg/jpg, png ou svg)'})
 
-def resize_picture(request):
-   if request.method == 'POST' and request.FILES:
-      image = request.FILES['image']
-      hauteur = int(request.POST['hauteur'])
-      largeur = int(request.POST['largeur'])
+      try :
+         hauteur = int(request.POST['hauteur'])
+         largeur = int(request.POST['largeur'])
+      except:
+         return render(request, 'init_image/resize.html', context={"image_classique" : False,
+            'message_erreur' : 'Erreur : seulement des intiers pour la hauteur et la largeur'})
 
       if(hauteur < 1 ):
          hauteur = 100
@@ -79,10 +103,21 @@ def resize_picture(request):
    return render(request, 'init_image/resize.html', context={"image_classique" : False})
 
 def alignement_vertical(request):
+   tableau_extension = ['jpeg', 'jpg', 'svg', 'png']
+
    if request.method == 'POST' and request.FILES:
       image = request.FILES['image']
       image2 = request.FILES['image2']
 
+      nom_image = str(image)
+      nom_image2 = str(image2)
+      nom_fichier, extension = nom_image.split(".")
+      nom_fichier, extension2 = nom_image2.split(".")
+
+      if extension not in tableau_extension or extension2 not in tableau_extension:
+         return render(request, 'init_image/align_vertical.html', context={"image_classique" : False,
+            'message_erreur' : 'Erreur : mauvaise extension (jpeg/jpg, png ou svg)'})
+
       # ouvrir image
       image_t1 = open_image(image)
       image_t1.save("media/image_classique_1.png")
@@ -99,10 +134,21 @@ def alignement_vertical(request):
    return render(request, 'init_image/align_vertical.html', context={"image_classique" : False})
 
 def alignement_horizontal(request):
+   tableau_extension = ['jpeg', 'jpg', 'svg', 'png']
+
    if request.method == 'POST' and request.FILES:
       image = request.FILES['image']
       image2 = request.FILES['image2']
 
+      nom_image = str(image)
+      nom_image2 = str(image2)
+      nom_fichier, extension = nom_image.split(".")
+      nom_fichier, extension2 = nom_image2.split(".")
+
+      if extension not in tableau_extension or extension2 not in tableau_extension:
+         return render(request, 'init_image/align_horizontal.html', context={"image_classique" : False,
+            'message_erreur' : 'Erreur : mauvaise extension (jpeg/jpg, png ou svg)'})
+
       # ouvrir image
       image_t1 = open_image(image)
       image_t1.save("media/image_classique_1.png")
@@ -119,10 +165,32 @@ def alignement_horizontal(request):
    return render(request, 'init_image/align_horizontal.html', context={"image_classique" : False})
 
 def fusion(request):
+   tableau_extension = ['jpeg', 'jpg', 'svg', 'png']
+
    if request.method == 'POST' and request.FILES:
       image = request.FILES['image']
       image2 = request.FILES['image2']
 
+      nom_image = str(image)
+      nom_image2 = str(image2)
+      nom_fichier, extension = nom_image.split(".")
+      nom_fichier, extension2 = nom_image2.split(".")
+
+      if extension not in tableau_extension or extension2 not in tableau_extension:
+         return render(request, 'init_image/fusion.html', context={"image_classique" : False,
+            'message_erreur' : 'Erreur : mauvaise extension (jpeg/jpg, png ou svg)'})
+
+      opacite = request.POST['opacite']
+      opacite = opacite.replace(',', '.')
+      opacite = float(opacite)
+
+      try :
+         position_x = int(request.POST['position_x'])
+         position_y = int(request.POST['position_y'])
+      except:
+         return render(request, 'init_image/fusion.html', context={"image_classique" : False,
+            'message_erreur' : 'Erreur : seulement des intiers pour l\'opacité et la position (x,y)'})
+
       # ouvrir image
       image_t1 = open_image(image)
       image_t1.save("media/image_classique_1.png")
@@ -131,7 +199,7 @@ def fusion(request):
       image_t2.save("media/image_classique_2.png")
       
       # 1. Transformation en noir et blanc
-      image_noir_blanc = blend_images(image_t1, image_t2, 0.1, (1000,1000))
+      image_noir_blanc = blend_images(image_t1, image_t2, opacite, (position_x,position_y))
       image_noir_blanc.save("media/image_fusion.png")
 
       return render(request, 'init_image/fusion.html', context={"image_classique" : True})
@@ -139,22 +207,41 @@ def fusion(request):
    return render(request, 'init_image/fusion.html', context={"image_classique" : False})
 
 def animation(request):
+   tableau_extension = ['jpeg', 'jpg', 'svg', 'png']
+
    if request.method == 'POST' and request.FILES:
-      image = request.FILES['image']
-      image2 = request.FILES['image2']
+
+      tableau_images = []
+      i = 0
+
       duree = int(request.POST['duree'])
+      images = request.FILES.getlist('images[]')
 
-      # ouvrir image
-      image_t1 = open_image(image)
-      image_t1.save("media/image_classique_1.png")
+      for image in images :
+        tableau_images.append(image)
 
-      image_t2 = open_image(image2)
-      image_t2.save("media/image_classique_2.png")
+      for image in tableau_images:
+         nom_image = str(image)
+         nom_fichier, extension = nom_image.split(".")
+         if extension not in tableau_extension:
+            return render(request, 'init_image/animation.html', context={"image_classique" : False,
+               'message_erreur' : 'Erreur : mauvaise extension (jpeg/jpg, png ou svg)'})
+
+      
+      # save all picture
+      for image in tableau_images:
+         image_t1 = open_image(image)
+         image_t1.save("media/image_classique_" + str(i) + ".png")
+         tableau_images[i] = image_t1
+         i += 1
+
+      tab_number = [number for number in range(0, i)]
       
       # 1. Transformation en noir et blanc
-      image_noir_blanc = creer_gif([image_t1, image_t2], duree)
+      image_noir_blanc = creer_gif(tableau_images, duree)
 
-      return render(request, 'init_image/animation.html', context={"image_classique" : True})
+      return render(request, 'init_image/animation.html', context={"image_classique" : True, 
+            'tab_number' : tab_number})
 
    return render(request, 'init_image/animation.html', context={"image_classique" : False})
 

image_project/media/style.css

@@ -1,3 +1,6 @@
-.formulaire{
-    
+.container__image{
+    max-width: 400px;
+    max-height: 250px;
+    width: 400px;
+    height: 250px;
 }