文章来源: 小白学视觉
作者:努比
本期将创建一个类似于Adobe Lightroom的Web应用程序,使用OpenCV和Streamlit实现图像的卡通化
作为一个狂热的街头摄影爱好者,几乎每个周末都要在城市中拍摄一些照片,因此Adobe Lightroom始终是我们的首选软件,通过它可以编辑原始照片以使其更具“ Instagram风格”。
我们想能否创建一个自己的图像编辑软件?
开源计算机视觉库(如OpenCV)和开源应用程序框架(如Streamlit)的出现使这一想法得以实现。使用不到100行代码,我们就可以构建一个简单的图像卡通化Web应用程序,模仿Adobe Lightroom的功能。
在本文中,我们将展示如何使用OpenCV和Streamlit,根据滤波器,构建一个简单的Web应用程序,以将图像转换为卡通图像。
如何使图像成为卡通图?
我们通常需要执行两个主要步骤将图像转换为卡通图像:边缘检测和区域平滑。
边缘检测的主要目的显然是为了强调图像的边缘,因为卡通图像通常具有良好的边缘。同时,区域平滑的主要目的是消除颜色边界并减少图像的噪点,使图像像素化程度降低。
根据不同滤波器,我们可以获得不同的图像卡通化结果。在本文中,将有四个不同的过滤器:
1. 铅笔素描
2. 细节增强
3. 双边过滤器
4. 铅笔边缘
接下来,我们将展示如何应用每个过滤器,以及从每个过滤器中获得什么样的结果。
铅笔素描滤波器
使用“铅笔素描”滤波器,您的图像将被转换为素描,就像使用铅笔绘制图像一样。下面是使用OpenCV将图像转换为铅笔素描的完整代码。
# Convert the image into grayscale image gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) # Blur the image using Gaussian Blur gray_blur = cv2.GaussianBlur(gray, (25, 25), 0) # Convert the image into pencil sketch cartoon = cv2.divide(gray, gray_blur, scale=250.0)
令人惊讶的是,使用OpenCV,我们只需三行代码就可以将图像转换成铅笔素描状的图片。现在让我逐行解释一下该图像发生了哪些变化。
在第一行中,我们使用OpenCV的cvtColor()功能将图像从彩色通道转换为灰度通道。这很简单,处理的结果是我们将图像变成了灰度图。
接下来,我们使用高斯模糊对图像进行模糊处理。模糊灰度图像,实际上是在平滑图像,减少图像的噪点。另外,模糊也是我们检测图像边缘的必要步骤。
模糊图像,可以使用OpenCV中的GaussianBlur()功能。我在GaussianBlur()函数中输入的(25,25)是内核的大小。
由于我们使用高斯模糊,因此内核中像素值的分布遵循正态分布。核数越大,标准偏差将越大,因此模糊效果越强。下面是内核大小不同时的模糊结果示例。
基于不同内核大小的模糊效果
最后一步是将原始灰度图像除以模糊后的灰度图像。这样可以得出两个图像中每个像素之间的变化率。模糊效果越强,每个像素的值相对于其原点的变化就越大,因此,它使我们的铅笔素描更加清晰。
以下是使用铅笔素描过滤器的结果。
铅笔素描过滤器实现示例
细节增强滤波器
简而言之,“细节增强”滤镜通过锐化图像,平滑颜色以及增强边缘效果为我们提供了卡通效果。以下是使用此滤镜将您的图像转换成卡通的完整代码。
#convert the image into grayscale image gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) #Blur the grayscale image with median blur gray_blur = cv2.medianBlur(gray, 3) #Apply adaptive thresholding to detect edges edges = cv2.adaptiveThreshold(gray_blur, 255, cv2.ADAPTIVE_THRESH_MEAN_C, cv2.THRESH_BINARY, 9, 9) #Sharpen the image color = cv2.detailEnhance(img, sigma_s=5, sigma_r=0.5) #Merge the colors of same images using "edges" as a mask cartoon = cv2.bitwise_and(color, color, mask=edges)
第一步与之前相同,我们需要将图像转换为灰度图像。
接下来,不使用高斯模糊,而是应用中值模糊。为此,我们使用OpenCV中的medianBlur() 函数。中值模糊通过计算与内核重叠的像素值的中值,然后将其中心像素替换为中值。但是,我们可以根据需要先使用高斯模糊。
接下来,我们需要检测图像的边缘。为此,将自适应阈值与OpenCV中的adaptiveThreshold() 函数一起应用。自适应阈值的主要目标是根据内核重叠的像素的平均值,将图像每个区域中的每个像素值转换为黑色或白色。
以下是自适应阈值对模糊图像的影响的可视化结果。
左:自适应阈值之前—右:自适应阈值之后
为了使图像看起来更清晰,我们可以使用OpenCV中的detailEnhance()函数。我们需要指定两个参数:
• sigma_s:控制着邻域的大小,该邻域的大小将被加权以替换图像中的像素值。值越高,邻域越大。这样可以使图像更平滑。
• sigma_r:如果要在平滑图像时保留边缘,这很重要。较小的值只会产生非常相似的颜色进行平均(即平滑),而相差很大的颜色将保持不变。
最后,我们使用自适应阈值的结果作为掩码。然后,根据蒙版的值合并细节增强的结果,以创建具有清晰边缘的清晰效果。
以下是“细节增强”过滤器的示例结果。
细节增强过滤器实现示例
双边过滤器
使用双边滤镜的一大优势是,我们可以在保留边缘的同时使图像和颜色平滑。以下是通过双边过滤将您的图像转换为卡通图像的完整代码。
#convert the image into grayscale image gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) #Blur the grayscale image with median blur gray_blur = cv2.medianBlur(gray, 3) #Apply adaptive thresholding to detect edges edges = cv2.adaptiveThreshold(gray_blur, 255, cv2.ADAPTIVE_THRESH_MEAN_C, cv2.THRESH_BINARY, 9, 9) #Sharpen the image color = cv2.detailEnhance(img, sigma_s=5, sigma_r=0.5) #Merge the colors of same images using "edges" as a mask cartoon = cv2.bitwise_and(color, color, mask=edges)
如果仔细看,所有步骤都与“细节增强”过滤器中的步骤相似,但是这次不是使用detailEnhance() 函数,而是使用openCV中的bilateralFilter()函数。
调用此函数时需要传递的参数与detailEnhance()相同,只多一个附加参数,即内核大小d。首先,我们指定图像源,然后是d,sigma_s和sigma_r值控制平滑效果,并保持边缘。
以下是使用双边过滤器的结果示例。
双边过滤器实施示例
铅笔边缘滤波器
铅笔边缘滤镜可创建仅包含重要边缘和白色背景的新图像。要应用此滤波器,下面是完整的代码。
#Convert the image into grayscale image gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) #Blur the grayscale image using median blur gray = cv2.medianBlur(gray, 25) #Detect edges with Laplacian edges = cv2.Laplacian(gray, -1, ksize=3) #Invert the edges edges_inv = 255-edges #Create a pencil edge sketch dummy, cartoon = cv2.threshold(edges_inv, 150, 255, cv2.THRESH_BINARY)
前两个步骤与其他过滤器相同。首先,我们将图像转换为灰度图像。接下来,我们使用大小为25的内核对图像进行模糊处理。
接下来,我们应用拉普拉斯滤波器来检测边缘。根据内核的大小,拉普拉斯滤波器中的值可以不同。
Laplacian滤波器的工作是,将通过对象内部的灰度级和图像背景强度来突出对象的边缘。以下是拉普拉斯滤波器应用结果。
左:拉普拉斯滤波器应用之前—右:拉普拉斯滤波器应用之后
接下来,我们将Laplacian滤波器的结果求反。最后,通过应用openCV中的threshold()函数,根据指定的阈值将灰度图像转换为全黑或全白。
以下是“铅笔边缘”过滤器的结果示例。
Pencil Edges滤镜实现示例
使用Streamlit构建图像卡通化Web应用程序
在创建了图像卡通化滤波器的代码之后,现在就可以创建图像卡通化Web应用程序了。
第一步,需要将创建图像卡通化滤波器的所有代码放入一个函数中,以便于访问。到目前为止,我们已经对每个参数值进行了硬编码,例如内核的大小等等。
现在,我们可以让用户使用滑块根据自己的喜好指定一个值,而不是对每个参数值进行硬编码。为此,我们可以使用Streamlit中的streamlit.slider()函数。下面是其实现的示例。
gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) scale_val = st.slider('Tune the brightness of your sketch (the higher the value, the brighter your sketch)', 0.0, 300.0, 250.0) kernel = st.slider('Tune the boldness of the edges of your sketch (the higher the value, the bolder the edges)', 1, 99, 25, step=2) gray_blur = cv2.GaussianBlur(gray, (kernel, kernel), 0) cartoon = cv2.divide(gray, gray_blur, scale= scale_val)
使用此滑块,可以创建一个交互式图像卡通化Web应用程序,就像Adobe Lightroom一样。每次调整内核的值和其他参数时,图像卡通化的结果都会实时更改和更新。
我们可以将其应用到streamlit.slider()上,创建的每个图像卡通化滤波器,以替换硬编码的参数值。
接下来,我们需要添加一个小插件,以便用户可以上传自己想要转换为卡通的图像。为此,我们可以使用Streamlit中的streamlit.file_uploader()函数。要添加某些文本到Web应用程序中,我们可以使用Streamlit 中的streamlit.text()或streamlit.write()。
用户上传图像后,现在我们需要显示图像,使用图像卡通化滤波器之一编辑图像,并显示卡通化图像,以便用户知道他们是否要进一步调整滑块。要显示图像,我们可以使用Streamlit中的streamlit.image()函数。
以下是在不到100行代码的情况下如何构建图像卡通化Web应用程序的实现。
import cv2 import streamlit as st import numpy as np from PIL import Image def cartoonization (img, cartoon): gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) if cartoon == "Pencil Sketch": value = st.sidebar.slider('Tune the brightness of your sketch (the higher the value, the brighter your sketch)', 0.0, 300.0, 250.0) kernel = st.sidebar.slider('Tune the boldness of the edges of your sketch (the higher the value, the bolder the edges)', 1, 99, 25, step=2) gray_blur = cv2.GaussianBlur(gray, (kernel, kernel), 0) cartoon = cv2.divide(gray, gray_blur, scale=value) if cartoon == "Detail Enhancement": smooth = st.sidebar.slider('Tune the smoothness level of the image (the higher the value, the smoother the image)', 3, 99, 5, step=2) kernel = st.sidebar.slider('Tune the sharpness of the image (the lower the value, the sharper it is)', 1, 21, 3, step =2) edge_preserve = st.sidebar.slider('Tune the color averaging effects (low: only similar colors will be smoothed, high: dissimilar color will be smoothed)', 0.0, 1.0, 0.5) gray = cv2.medianBlur(gray, kernel) edges = cv2.adaptiveThreshold(gray, 255, cv2.ADAPTIVE_THRESH_MEAN_C, cv2.THRESH_BINARY, 9, 9) color = cv2.detailEnhance(img, sigma_s=smooth, sigma_r=edge_preserve) cartoon = cv2.bitwise_and(color, color, mask=edges) if cartoon == "Pencil Edges": kernel = st.sidebar.slider('Tune the sharpness of the sketch (the lower the value, the sharper it is)', 1, 99, 25, step=2) laplacian_filter = st.sidebar.slider('Tune the edge detection power (the higher the value, the more powerful it is)', 3, 9, 3, step =2) noise_reduction = st.sidebar.slider('Tune the noise effects of your sketch (the higher the value, the noisier it is)', 10, 255, 150) gray = cv2.medianBlur(gray, kernel) edges = cv2.Laplacian(gray, -1, ksize=laplacian_filter) edges_inv = 255-edges dummy, cartoon = cv2.threshold(edges_inv, noise_reduction, 255, cv2.THRESH_BINARY) if cartoon == "Bilateral Filter": smooth = st.sidebar.slider('Tune the smoothness level of the image (the higher the value, the smoother the image)', 3, 99, 5, step=2) kernel = st.sidebar.slider('Tune the sharpness of the image (the lower the value, the sharper it is)', 1, 21, 3, step =2) edge_preserve = st.sidebar.slider('Tune the color averaging effects (low: only similar colors will be smoothed, high: dissimilar color will be smoothed)', 1, 100, 50) gray = cv2.medianBlur(gray, kernel) edges = cv2.adaptiveThreshold(gray, 255, cv2.ADAPTIVE_THRESH_MEAN_C, cv2.THRESH_BINARY, 9, 9) color = cv2.bilateralFilter(img, smooth, edge_preserve, smooth) cartoon = cv2.bitwise_and(color, color, mask=edges) return cartoon ############################################################################### st.write(""" # Cartoonize Your Image! """ ) st.write("This is an app to turn your photos into cartoon") file = st.sidebar.file_uploader("Please upload an image file", type=["jpg", "png"]) if file is None: st.text("You haven't uploaded an image file") else: image = Image.open(file) img = np.array(image) option = st.sidebar.selectbox( 'Which cartoon filters would you like to apply?', ('Pencil Sketch', 'Detail Enhancement', 'Pencil Edges', 'Bilateral Filter')) st.text("Your original image") st.image(image, use_column_width=True) st.text("Your cartoonized image") cartoon = cartoonization(img, option) st.image(cartoon, use_column_width=True)
现在,可以打开提示符,然后转到包含上面代码的Python文件的工作目录。接下来,您需要使用以下命令运行代码。
streamlit run your_app_name.py
最后,您可以在本地计算机上使用图像卡通化Web应用程序!以下是该网络应用程序的示例。
该网络应用程序示例
部署Web应用
本节是可选的,但是如果小伙伴需要部署Web应用程序以便其他人也可以访问您的Web应用程序,则可以使用Heroku部署Web应用程序。
要将Web应用程序部署到Heroku,首先要免费创建一个Heroku帐户,然后下载Heroku CLI。
接下来需要在与Python文件相同的目录中创建四个其他文件,它们是:
• requirements.txt:这是文本文件,用于告诉Heroku构建Web应用程序需要哪些依赖项。因为在我们的web应用程序,我们使用四种不同的库:opencv,numpy,Pillow,和streamlit,那么我们就可以写所有这些库及其版本为requirements.txt的
opencv-python==4.3.0.36 streamlit==0.63.0 Pillow==7.0.0 numpy==1.18.1
• setup.sh:这是用于在Heroku上设置配置的文件。为此setup.sh文件编写以下内容。
mkdir -p ~/.streamlit/ echo "\ [server]\n\ headless = true\n\ port = $PORT\n\ enableCORS = false\n\ \n\ " > ~/.streamlit/config.toml
• Procfile:这是告诉Heroku哪些文件以及应如何执行文件的文件。为Procfile编写以下内容。
web: sh setup.sh && streamlit run cartoon_app.py
• Aptfile:这是Heroku 构建包的文件,以使OpenCV能够在Heroku中运行。为Aptfile编写以下内容。
libsm6 libxrender1 libfontconfig1 libice6
接下来,打开命令提示符,然后转到Python文件和这四个其他文件的工作目录。在其中键入heroku login命令,以便您登录到Heroku帐户。
现在,您可以通过键入来创建新应用heroku create your-app-name。为确保您位于新创建的应用程序内部,请键入以下内容:
heroku git:remote -a your-app-name
接下来,我们需要在新创建的应用程序中添加一个buildpack,以使OpenCV能够在Heroku上运行。要添加必要的buildpack,请在Heroku CLI上键入以下内容。
heroku create --buildpack https://github.com/heroku/heroku-buildpack-apt.git
现在设置好了。接下来,您需要通过打字来初始化一个空的git git init其次是git add .,git commit和git push heroku master命令。
git init git add . git commit -m "Add your messages" git push heroku master
之后,部署过程就开始了,并且可能需要一些时间来等待此部署过程。最后,Heroku将生成新部署的Web应用程序的URL。
就是这样!现在,我们已经构建了自己的图像卡通化Web应用程序,该应用程序模仿了Adobe Lightroom的功能。
数据分析咨询请扫描二维码
数据分析需要学习的内容非常广泛,涵盖了从理论知识到实际技能的多个方面。以下是数据分析所需学习的主要内容: 数学和统计学 ...
2024-11-24数据分析师需要具备一系列多方面的技能和能力,以应对复杂的数据分析任务和业务需求。以下是数据分析师所需的主要能力: 统计 ...
2024-11-24数据分析师需要学习的课程内容非常广泛,涵盖了从基础理论到实际应用的多个方面。以下是根据我搜索到的资料整理出的数据分析师需 ...
2024-11-24《Python数据分析极简入门》 第2节 6 Pandas合并连接 在pandas中,有多种方法可以合并和拼接数据。常见的方法包括append()、conc ...
2024-11-24《Python数据分析极简入门》 第2节 5 Pandas数学计算 importpandasaspdd=np.array([[81,&n ...
2024-11-23数据分析涉及多个方面的学习,包括理论知识和实践技能。以下是数据分析需要学习的主要方面: 基础知识: 数据分析的基本概念 ...
2024-11-22数据分析适合在多个单位工作,包括但不限于以下领域: 金融行业:金融行业对数据分析人才的需求非常大,数据分析师可以从事经 ...
2024-11-22数据分析是一种涉及从大量数据中提取有用信息和洞察力的过程。其工作内容主要包括以下几个方面: 数据收集与整理:数据分析师 ...
2024-11-22数据分析师需要掌握多种技能,以确保能够有效地处理和分析数据,并为业务决策提供支持。以下是数据分析师需要掌握的主要技能: ...
2024-11-22数据开发和数据分析是两个密切相关但又有所区别的领域。以下是它们的主要区别: 定义和目标: 数据开发:数据开发涉及数据的 ...
2024-11-22数据架构师是负责设计和管理企业数据架构的关键角色,其职责涵盖了多个方面,包括数据治理、数据模型设计、数据仓库构建、数据安 ...
2024-11-22数据分析师需要具备一系列技能,以确保能够有效地处理、分析和解释数据,从而支持决策制定。以下是数据分析师所需的关键技能: ...
2024-11-22数据分析师需要具备一系列技能,以确保能够有效地处理、分析和解释数据,从而支持决策制定。以下是数据分析师所需的关键技能: ...
2024-11-22数据分析师需要具备一系列的技能和能力,以确保能够有效地处理、分析和解释数据,从而支持业务决策。以下是数据分析师所需的主要 ...
2024-11-22需求持续增长 - 未来数据分析师需求将持续上升,企业对数据驱动决策的依赖加深。 - 预测到2025年,中国将需要高达220万的数据人 ...
2024-11-22《Python数据分析极简入门》 第2节 4 Pandas条件查询 在pandas中,可以使用条件筛选来选择满足特定条件的数据 importpanda ...
2024-11-22数据分析师的工作内容涉及多个方面,主要包括数据的收集、整理、分析和可视化,以支持商业决策和问题解决。以下是数据分析师的一 ...
2024-11-21数据分析师必须掌握的技能可以从多个方面进行归纳和总结。以下是数据分析师需要具备的主要技能: 统计学基础:数据分析师需要 ...
2024-11-21数据分析入门的难易程度因人而异,总体来看,入门并不算特别困难,但需要一定的学习和实践积累。 入门难度:数据分析入门相对 ...
2024-11-21数据分析是一项通过收集、整理和解释数据来发现有用信息的过程,它在现代社会中具有广泛的应用和重要性。数据分析能够帮助人们更 ...
2024-11-21