flask+opencv+real-time filter (original image, black and white, nostalgic, sketch)

Introduction : Filters are mainly used to achieve various special effects on images. Image filters are used to change the visual effect of an image to give it a specific style. The following are detailed descriptions of the three filters:

1. Black and white (Grayscale) : The black and white filter converts a color image into a grayscale image, that is, an image that only contains grayscale information. This filter removes color from an image so that it only retains luminance information. Black and white filters are often used to simulate vintage photographs, or to accentuate the texture and shape of an image in certain scenes.

2. Sepia : Sepia filter (also known as Sepia filter) converts a color image into an image with a specific tone. Sepia filters typically use warm tones, such as sepia and yellow, to simulate the look of an old photo. This filter can give an image a vintage and warm feel.

3. Sketch : The sketch filter converts a color image into an image similar to a hand-drawn sketch. This type of filter is often used to emphasize edges and outlines in an image, making it look like it was drawn with a pencil or other drawing tool. Sketch filters can give an image a unique artistic style.

These filters can give an image a more distinctive look and can also be used for specific artistic effects or visual expression. These filters are common basic functions in many image processing applications and software.

History Raiders:

flask+opencv: Demo of real-time live video streaming platform

python: convert color photo to black and white photo

Python: Use the cv2 module to quickly generate sketches

Case source code:

# -*- coding: utf-8 -*-
# time: 2023/5/3 18:29
# file: RealTimeFilter.py
# 公众号: 玩转测试开发
import cv2
import numpy as np
from flask import Flask, Response

app = Flask(__name__)


def apply_sepia_filter(frame):
    sepia_filter = np.array([[0.272, 0.534, 0.131],
                             [0.349, 0.686, 0.168],
                             [0.393, 0.769, 0.189]])
    sepia_frame = cv2.transform(frame, sepia_filter)
    return sepia_frame


def apply_sketch_filter(frame):
    gray_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
    inv_gray_frame = cv2.bitwise_not(gray_frame)
    blur_frame = cv2.GaussianBlur(inv_gray_frame, (13, 13), 0)
    sketch_frame = cv2.divide(gray_frame, 255 - blur_frame, scale=256)
    return cv2.cvtColor(sketch_frame, cv2.COLOR_GRAY2BGR)


def apply_filter(frame):
    gray_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
    gray_frame = cv2.cvtColor(gray_frame, cv2.COLOR_GRAY2BGR)

    sepia_frame = apply_sepia_filter(frame)
    sketch_frame = apply_sketch_filter(frame)

    row1_frame = cv2.hconcat([frame, gray_frame])
    row2_frame = cv2.hconcat([sepia_frame, sketch_frame])
    combined_frame = cv2.vconcat([row1_frame, row2_frame])

    return combined_frame


def generate_frames():
    cap = cv2.VideoCapture(0)

    while True:
        ret, frame = cap.read()

        if not ret:
            break

        filtered_frame = apply_filter(frame)
        _, buffer = cv2.imencode('.jpg', filtered_frame)
        frame = buffer.tobytes()

        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

    cap.release()


@app.route('/video_feed')
def video_feed():
    return Response(generate_frames(),
                    mimetype='multipart/x-mixed-replace; boundary=frame')


@app.route('/')
def index():
    return """
    <!DOCTYPE html>
    <html>
    <head>
        <title>Real-time Filter Application</title>
        <style>
            body, html {
                margin: 0;
                padding: 0;
                height: 100%;
                width: 100%;
            }
            .video-container {
                width: 100%;
                height: calc(100% - 40px);
                display: flex;
                justify-content: center;
                align-items: center;
            }
            img {
                display: block;
                max-width: 100%;
                max-height: 100%;
            }
            .container {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 100%;
                width: 100%;
            }
            .row {
                display: flex;
                width: 100%;
            }
            .column {
                flex: 50%;
            }
</style>
    </head>
       <body>
        <div class="container">
            <div class="video-container">
                <img src="/video_feed" alt="Video stream not available">
        </div>
        </div>
    </body>
    </html>
    """


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

operation result:

insert image description here

Guess you like

Origin blog.csdn.net/hzblucky1314/article/details/130517216