├── .gitattributes
├── main.py
├── static
    ├── 2.jpg
    ├── 2.png
    ├── 2.webp
    └── hZ7ntRp.webp
├── templates
    ├── about.html
    └── index.html
└── uploads
    ├── 2.png
    └── hZ7ntRp.png


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/main.py:
--------------------------------------------------------------------------------
 1 | # pip3 install flask opencv-python
 2 | from flask import Flask, render_template, request, flash
 3 | from werkzeug.utils import secure_filename
 4 | import cv2
 5 | import os
 6 | 
 7 | UPLOAD_FOLDER = 'uploads'
 8 | ALLOWED_EXTENSIONS = {'png', 'webp', 'jpg', 'jpeg', 'gif'}
 9 | 
10 | app = Flask(__name__)
11 | app.secret_key = 'super secret key'
12 | app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
13 | 
14 | def allowed_file(filename):
15 |     return '.' in filename and \
16 |            filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
17 | 
18 | def processImage(filename, operation):
19 |     print(f"the operation is {operation} and filename is {filename}")
20 |     img = cv2.imread(f"uploads/{filename}")
21 |     match operation:
22 |         case "cgray":
23 |             imgProcessed = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
24 |             newFilename = f"static/{filename}"
25 |             cv2.imwrite(newFilename, imgProcessed)
26 |             return newFilename
27 |         case "cwebp": 
28 |             newFilename = f"static/{filename.split('.')[0]}.webp"
29 |             cv2.imwrite(newFilename, img)
30 |             return newFilename
31 |         case "cjpg": 
32 |             newFilename = f"static/{filename.split('.')[0]}.jpg"
33 |             cv2.imwrite(newFilename, img)
34 |             return newFilename
35 |         case "cpng": 
36 |             newFilename = f"static/{filename.split('.')[0]}.png"
37 |             cv2.imwrite(newFilename, img)
38 |             return newFilename
39 |     pass
40 | 
41 | @app.route("/")
42 | def home():
43 |     return render_template("index.html")
44 | 
45 | @app.route("/about")
46 | def about():
47 |     return render_template("about.html")
48 | 
49 | @app.route("/edit", methods=["GET", "POST"])
50 | def edit():
51 |     if request.method == "POST": 
52 |         operation = request.form.get("operation")
53 |         # check if the post request has the file part
54 |         if 'file' not in request.files:
55 |             flash('No file part')
56 |             return "error"
57 |         file = request.files['file']
58 |         # If the user does not select a file, the browser submits an
59 |         # empty file without a filename.
60 |         if file.filename == '':
61 |             flash('No selected file')
62 |             return "error no selected file"
63 |         if file and allowed_file(file.filename):
64 |             filename = secure_filename(file.filename)
65 |             file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
66 |             new = processImage(filename, operation)
67 |             flash(f"Your image has been processed and is available <a href='/{new}' target='_blank'>here</a>")
68 |             return render_template("index.html")
69 | 
70 |     return render_template("index.html")
71 | 
72 | 
73 | app.run(debug=True, port=5001)


--------------------------------------------------------------------------------
/static/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeWithHarry/flask-image-editor/9f6a2d7f05ca676ef8b29bcde02d9eedbc070ec0/static/2.jpg


--------------------------------------------------------------------------------
/static/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeWithHarry/flask-image-editor/9f6a2d7f05ca676ef8b29bcde02d9eedbc070ec0/static/2.png


--------------------------------------------------------------------------------
/static/2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeWithHarry/flask-image-editor/9f6a2d7f05ca676ef8b29bcde02d9eedbc070ec0/static/2.webp


--------------------------------------------------------------------------------
/static/hZ7ntRp.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeWithHarry/flask-image-editor/9f6a2d7f05ca676ef8b29bcde02d9eedbc070ec0/static/hZ7ntRp.webp


--------------------------------------------------------------------------------
/templates/about.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     your about page here
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <title>Edit Monkey - Edit your images online</title>
 8 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
 9 |         integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
10 | </head>
11 | 
12 | <body>
13 |     <nav class="navbar navbar-expand-lg bg-body-tertiary">
14 |         <div class="container-fluid">
15 |             <a class="navbar-brand" href="/">Edit Monkey</a>
16 |             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
17 |                 data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
18 |                 aria-label="Toggle navigation">
19 |                 <span class="navbar-toggler-icon"></span>
20 |             </button>
21 |             <div class="collapse navbar-collapse" id="navbarSupportedContent">
22 |                 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
23 |                     <li class="nav-item">
24 |                         <a class="nav-link active" aria-current="page" href="/">Home</a>
25 |                     </li>
26 |                     <li class="nav-item">
27 |                         <a class="nav-link" href="/about">About</a>
28 |                     </li>
29 |                     <li class="nav-item">
30 |                         <a class="nav-link" href="/how">How to use</a>
31 |                     </li>
32 |                     <li class="nav-item">
33 |                         <a class="nav-link" href="/contact">Contact Us</a>
34 |                     </li>
35 | 
36 |                 </ul>
37 |                 <div class="d-flex" role="search">
38 |                     <button class="btn btn-outline-success mx-1" type="submit">Login</button>
39 |                     <button class="btn btn-outline-success mx-1" type="submit">Signup</button>
40 |                 </div>
41 |             </div>
42 |         </div>
43 |     </nav>
44 | 
45 |     {% with messages = get_flashed_messages(with_categories=true) %}
46 |     {% if messages %}
47 |      
48 |         {% for category, message in messages %} 
49 |         <div class="alert alert-success alert-dismissible fade show" role="alert">
50 |             <strong>Success!</strong> {{ message | safe}}
51 |             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
52 |           </div>
53 |         {% endfor %}
54 | 
55 |     {% endif %}
56 |     {% endwith %}
57 | 
58 | 
59 |     <div class="container my-4">
60 | 
61 |         <h1 class="fs-2 text">Edit Monkey - Edit your app online</h1>
62 | 
63 |         <form action="/edit" method="post" enctype="multipart/form-data">
64 | 
65 |             <div class="mb-3">
66 |                 <label for="formFile" class="form-label">Select an Image to edit</label>
67 |                 <input class="form-control" type="file" name="file" id="formFile">
68 |             </div>
69 |             <div class="mb-3">
70 |                 <div class="form-floating">
71 |                     <select name="operation" class="form-select" id="floatingSelect"
72 |                         aria-label="Floating label select example">
73 |                         <option selected>Choose an Operation</option>
74 |                         <option value="cpng">Convert to PNG</option>
75 |                         <option value="cgray">Convert to Grayscale</option>
76 |                         <option value="cwebp">Convert to Webp</option>
77 |                         <option value="cjpg">Convert to Jpg</option>
78 |                     </select>
79 |                     <label for="floatingSelect">Select an Editing Operation</label>
80 |                 </div>
81 |             </div>
82 |             <button type="submit" class="btn btn-success">Submit</button>
83 | 
84 |         </form>
85 |     </div>
86 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
87 |         integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
88 |         crossorigin="anonymous"></script>
89 | </body>
90 | 
91 | </html>


--------------------------------------------------------------------------------
/uploads/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeWithHarry/flask-image-editor/9f6a2d7f05ca676ef8b29bcde02d9eedbc070ec0/uploads/2.png


--------------------------------------------------------------------------------
/uploads/hZ7ntRp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeWithHarry/flask-image-editor/9f6a2d7f05ca676ef8b29bcde02d9eedbc070ec0/uploads/hZ7ntRp.png


--------------------------------------------------------------------------------