手把手教你构建OpenCV Web应用程序

本文将介绍如何轻松地将 OpenCV 项目转换为可以展示的 Web 应用程序。您将使用一个名为 Streamlit 的库，它可以帮助您轻松地用 Python 构建 Web 用户界面。是的，您没听错——不需要 HTML、CSS 或 JavaScript，只需要Python！先决条件

你应该能够轻松使用基本的OpenCV函数。你应该能够轻松地使用Python进行编码。

安装依赖项

使用 pip 安装 OpenCV 和 Streamlit，以及另一个图像库——Pillow。

pip install opencv-python streamlit Pillow

创建一个小型 OpenCV 项目

import cv2
def brighten_image(image, amount):    img_bright = cv2.convertScaleAbs(image, beta=amount)    return img_bright
def blur_image(image, amount):    img = cv2.cvtColor(image, 1)    blur_img = cv2.GaussianBlur(img, (11, 11), amount)    return blur_img
def enhance_details(img):    hdr = cv2.detailEnhance(img, sigma_s=12, sigma_r=0.15)    return hdr
img = cv2.imread(filename='tony_stark.jpg')
# do some cool image processing stuffimg = enhance_details(img)img = brighten_image(img, amount=25)img = blur_image(img, amount=0.2)
cv2.imshow('Tony Stark', img)cv2.waitKey(0)cv2.destroyAllWindows()

以下是三个图像处理函数，它们接受图像、进行一些处理并返回处理后的图像。

• brighten_image— 增加图像的亮度。blur_image— 对图像应用模糊效果。enhance_details— 应用效果来增强图像的细节。

这些函数利用 OpenCV 函数进行实际处理 - 例如：cv2.GaussianBlur 等。我不会深入解释它们以及它们接受的各种参数，因为本教程更侧重于将 OpenCV 与 Streamlit 集成。     filepath该程序从使用中读取图像cv2.imread()；然后，它将图像传递给这些进行处理的函数。最后，使用 来显示图像cv2.imshow()。cv2.waitKey(0)就是等待用户按下任意键，然后退出程序。Streamlit基础知识    Streamlit 提供了一些开箱即用的常见 UI 组件，您可以将它们放置在网页上。这使得快速编写代码变得非常容易。Streamlit 的工作方式是每次用户与组件交互时，它都会重新运行 Python 脚本。它们有一些缓存和优化，但这种简单的设计使得使用 Streamlit 构建交互式网页变得容易。    创建demo-app.py，将下面代码复制进去：

import streamlit as st
st.title("OpenCV Demo App")st.subheader("This app allows you to play with Image filters!")st.text("We use OpenCV and Streamlit for this demo")if st.checkbox("Main Checkbox"):    st.text("Check Box Active")
slider_value = st.slider("Slider", min_value=0.5, max_value=3.5)st.text(f"Slider value is {slider_value}")
st.sidebar.text("text on side panel")st.sidebar.checkbox("Side Panel Checkbox")

要启动 Streamlit 应用程序，只需使用文件名运行命令streamlit run- 例如：

streamlit run demo-app.py

您应该得到类似的输出，如下所示：

单击输出中的链接在浏览器中打开 Streamlit 应用程序。您会看到如下内容：

看下代码，就会发现非常简单。它将streamlit导入为st。默认是简单的线性布局，您可以在其中按顺序将组件放置在网页上。    例如，st.title() , st.checkbox(), st.slider()按照组件的调用顺序将组件放置在主页上。    Streamlit 还提供侧面板。为了将组件放置在侧面板中，您可以执行以下操作：    st.sidebar.title() , st.sidebar.checkbox(), st.sidebar.slider()    除了这些之外，还有其他组件。更多内容可以在官方文档中查看：

https://docs.streamlit.io/library/get-started

将 Streamlit 集成到您的 OpenCV 项目中    接下来让我们将OpenCV程序集成到Streamlit 中。下面是完整代码：

import cv2import streamlit as stimport numpy as npfrom PIL import Image

def brighten_image(image, amount):    img_bright = cv2.convertScaleAbs(image, beta=amount)    return img_bright

def blur_image(image, amount):    blur_img = cv2.GaussianBlur(image, (11, 11), amount)    return blur_img

def enhance_details(img):    hdr = cv2.detailEnhance(img, sigma_s=12, sigma_r=0.15)    return hdr

def main_loop():    st.title("OpenCV Demo App")    st.subheader("This app allows you to play with Image filters!")    st.text("We use OpenCV and Streamlit for this demo")
    blur_rate = st.sidebar.slider("Blurring", min_value=0.5, max_value=3.5)    brightness_amount = st.sidebar.slider("Brightness", min_value=-50, max_value=50, value=0)    apply_enhancement_filter = st.sidebar.checkbox('Enhance Details')
    image_file = st.file_uploader("Upload Your Image", type=['jpg', 'png', 'jpeg'])    if not image_file:        return None
    original_image = Image.open(image_file)    original_image = np.array(original_image)
    processed_image = blur_image(original_image, blur_rate)    processed_image = brighten_image(processed_image, brightness_amount)
    if apply_enhancement_filter:        processed_image = enhance_details(processed_image)
    st.text("Original Image vs Processed Image")    st.image([original_image, processed_image])

if __name__ == '__main__':    main_loop()

简单说明：    除了图像处理函数之外，您还有一个“main_loop”函数来添加网页逻辑。    没什么特别的st.title(), st.subheader(), st.text()——他们只是打印一些不同尺寸的文本。    接下来，有两个滑块用于获取您需要应用模糊和亮度滤镜的量。    请注意，st.sidebar将这些组件放置在侧边栏中。    slider()接受一些参数：滑块的名称、最小值、最大值和滑块的默认值。该函数返回滑块的当前值。    接下来，有一个复选框组件。    checkbox()如果复选框被选中，则返回True ；否则，它将返回False。    接下来是一个file_uploader组件，用户可以通过该组件上传参数指定的不同类型的文件type。在这里，它仅限于演示用例所需的图像文件类型。、    当程序启动时，用户没有选择任何文件。此时，该组件返回None。当从 UI 上传文件时，该组件会返回文件的路径。    这就是为什么对该组件的返回值进行 if 检查的原因。如果没有选择文件，您可以通过从该main_loop()函数返回来跳过程序的其余部分。    请记住，只要页面的任何组件上有用户交互，整个程序就会重新运行。当用户上传文件时，整个程序会再次执行 - 并且 if 检查失败，以便程序执行图像处理逻辑。    Pillow.Image()用于打开该文件，然后将其转换为 numpy 数组，np.array()以便 OpenCV 可以处理它。    现在，它与参数一起传递到不同的处理函数amount。    最后，程序使用该st.image()组件显示原始图像和处理后的图像。    要启动该应用程序，只需运行：

streamlitrundemo-app.py

初始效果：

测试效果：

如何发布您的应用程序？

要发布您的应用程序，您需要在某处托管该程序。对于复杂的项目有不同的托管提供商。但对于这个爱好项目，有没有简单快捷的解决方案呢？    您可以在Streamlit Cloud中免费托管 Streamlit 应用程序。您可以在一个帐户中免费托管最多 3 个应用程序，内存最多为 1GB。

https://streamlit.io/cloud

项目就托管在这里：

https://dingusagar-opencv-streamlit-demo-demo-app-pwkiy4.streamlit.app/