文章來(lái)源： 小白學(xué)視覺(jué)

作者：努比

本期將創(chuàng)建一個(gè)類似于Adobe Lightroom的Web應(yīng)用程序，使用OpenCV和Streamlit實(shí)現(xiàn)圖像的卡通化

作為一個(gè)狂熱的街頭攝影愛(ài)好者，幾乎每個(gè)周末都要在城市中拍攝一些照片，因此Adobe Lightroom始終是我們的首選軟件，通過(guò)它可以編輯原始照片以使其更具“ Instagram風(fēng)格”。

我們想能否創(chuàng)建一個(gè)自己的圖像編輯軟件？

開(kāi)源計(jì)算機(jī)視覺(jué)庫(kù)（如OpenCV）和開(kāi)源應(yīng)用程序框架（如Streamlit）的出現(xiàn)使這一想法得以實(shí)現(xiàn)。使用不到100行代碼，我們就可以構(gòu)建一個(gè)簡(jiǎn)單的圖像卡通化Web應(yīng)用程序，模仿Adobe Lightroom的功能。

在本文中，我們將展示如何使用OpenCV和Streamlit，根據(jù)濾波器，構(gòu)建一個(gè)簡(jiǎn)單的Web應(yīng)用程序，以將圖像轉(zhuǎn)換為卡通圖像。

如何使圖像成為卡通圖？

我們通常需要執(zhí)行兩個(gè)主要步驟將圖像轉(zhuǎn)換為卡通圖像：邊緣檢測(cè)和區(qū)域平滑。

邊緣檢測(cè)的主要目的顯然是為了強(qiáng)調(diào)圖像的邊緣，因?yàn)榭ㄍ▓D像通常具有良好的邊緣。同時(shí)，區(qū)域平滑的主要目的是消除顏色邊界并減少圖像的噪點(diǎn)，使圖像像素化程度降低。

根據(jù)不同濾波器，我們可以獲得不同的圖像卡通化結(jié)果。在本文中，將有四個(gè)不同的過(guò)濾器：

1. 鉛筆素描

2. 細(xì)節(jié)增強(qiáng)

3. 雙邊過(guò)濾器

4. 鉛筆邊緣

接下來(lái)，我們將展示如何應(yīng)用每個(gè)過(guò)濾器，以及從每個(gè)過(guò)濾器中獲得什么樣的結(jié)果。

鉛筆素描濾波器

使用“鉛筆素描”濾波器，您的圖像將被轉(zhuǎn)換為素描，就像使用鉛筆繪制圖像一樣。下面是使用OpenCV將圖像轉(zhuǎn)換為鉛筆素描的完整代碼。

# 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，我們只需三行代碼就可以將圖像轉(zhuǎn)換成鉛筆素描狀的圖片?，F(xiàn)在讓我逐行解釋一下該圖像發(fā)生了哪些變化。

在第一行中，我們使用OpenCV的cvtColor()功能將圖像從彩色通道轉(zhuǎn)換為灰度通道。這很簡(jiǎn)單，處理的結(jié)果是我們將圖像變成了灰度圖。

接下來(lái)，我們使用高斯模糊對(duì)圖像進(jìn)行模糊處理。模糊灰度圖像，實(shí)際上是在平滑圖像，減少圖像的噪點(diǎn)。另外，模糊也是我們檢測(cè)圖像邊緣的必要步驟。

模糊圖像，可以使用OpenCV中的GaussianBlur()功能。我在GaussianBlur()函數(shù)中輸入的（25，25）是內(nèi)核的大小。

由于我們使用高斯模糊，因此內(nèi)核中像素值的分布遵循正態(tài)分布。核數(shù)越大，標(biāo)準(zhǔn)偏差將越大，因此模糊效果越強(qiáng)。下面是內(nèi)核大小不同時(shí)的模糊結(jié)果示例。

基于不同內(nèi)核大小的模糊效果

最后一步是將原始灰度圖像除以模糊后的灰度圖像。這樣可以得出兩個(gè)圖像中每個(gè)像素之間的變化率。模糊效果越強(qiáng)，每個(gè)像素的值相對(duì)于其原點(diǎn)的變化就越大，因此，它使我們的鉛筆素描更加清晰。

以下是使用鉛筆素描過(guò)濾器的結(jié)果。

鉛筆素描過(guò)濾器實(shí)現(xiàn)示例

細(xì)節(jié)增強(qiáng)濾波器

簡(jiǎn)而言之，“細(xì)節(jié)增強(qiáng)”濾鏡通過(guò)銳化圖像，平滑顏色以及增強(qiáng)邊緣效果為我們提供了卡通效果。以下是使用此濾鏡將您的圖像轉(zhuǎn)換成卡通的完整代碼。

#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)

第一步與之前相同，我們需要將圖像轉(zhuǎn)換為灰度圖像。

接下來(lái)，不使用高斯模糊，而是應(yīng)用中值模糊。為此，我們使用OpenCV中的medianBlur() 函數(shù)。中值模糊通過(guò)計(jì)算與內(nèi)核重疊的像素值的中值，然后將其中心像素替換為中值。但是，我們可以根據(jù)需要先使用高斯模糊。

接下來(lái)，我們需要檢測(cè)圖像的邊緣。為此，將自適應(yīng)閾值與OpenCV中的adaptiveThreshold() 函數(shù)一起應(yīng)用。自適應(yīng)閾值的主要目標(biāo)是根據(jù)內(nèi)核重疊的像素的平均值，將圖像每個(gè)區(qū)域中的每個(gè)像素值轉(zhuǎn)換為黑色或白色。

以下是自適應(yīng)閾值對(duì)模糊圖像的影響的可視化結(jié)果。

左：自適應(yīng)閾值之前—右：自適應(yīng)閾值之后

為了使圖像看起來(lái)更清晰，我們可以使用OpenCV中的detailEnhance()函數(shù)。我們需要指定兩個(gè)參數(shù)：

? sigma_s：控制著鄰域的大小，該鄰域的大小將被加權(quán)以替換圖像中的像素值。值越高，鄰域越大。這樣可以使圖像更平滑。

? sigma_r：如果要在平滑圖像時(shí)保留邊緣，這很重要。較小的值只會(huì)產(chǎn)生非常相似的顏色進(jìn)行平均（即平滑），而相差很大的顏色將保持不變。

最后，我們使用自適應(yīng)閾值的結(jié)果作為掩碼。然后，根據(jù)蒙版的值合并細(xì)節(jié)增強(qiáng)的結(jié)果，以創(chuàng)建具有清晰邊緣的清晰效果。

以下是“細(xì)節(jié)增強(qiáng)”過(guò)濾器的示例結(jié)果。

細(xì)節(jié)增強(qiáng)過(guò)濾器實(shí)現(xiàn)示例

雙邊過(guò)濾器

使用雙邊濾鏡的一大優(yōu)勢(shì)是，我們可以在保留邊緣的同時(shí)使圖像和顏色平滑。以下是通過(guò)雙邊過(guò)濾將您的圖像轉(zhuǎn)換為卡通圖像的完整代碼。

#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)

如果仔細(xì)看，所有步驟都與“細(xì)節(jié)增強(qiáng)”過(guò)濾器中的步驟相似，但是這次不是使用detailEnhance() 函數(shù)，而是使用openCV中的bilateralFilter()函數(shù)。

調(diào)用此函數(shù)時(shí)需要傳遞的參數(shù)與detailEnhance()相同，只多一個(gè)附加參數(shù)，即內(nèi)核大小d。首先，我們指定圖像源，然后是d，sigma_s和sigma_r值控制平滑效果，并保持邊緣。

以下是使用雙邊過(guò)濾器的結(jié)果示例。

雙邊過(guò)濾器實(shí)施示例

鉛筆邊緣濾波器

鉛筆邊緣濾鏡可創(chuàng)建僅包含重要邊緣和白色背景的新圖像。要應(yīng)用此濾波器，下面是完整的代碼。

#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)

前兩個(gè)步驟與其他過(guò)濾器相同。首先，我們將圖像轉(zhuǎn)換為灰度圖像。接下來(lái)，我們使用大小為25的內(nèi)核對(duì)圖像進(jìn)行模糊處理。

接下來(lái)，我們應(yīng)用拉普拉斯濾波器來(lái)檢測(cè)邊緣。根據(jù)內(nèi)核的大小，拉普拉斯濾波器中的值可以不同。

Laplacian濾波器的工作是，將通過(guò)對(duì)象內(nèi)部的灰度級(jí)和圖像背景強(qiáng)度來(lái)突出對(duì)象的邊緣。以下是拉普拉斯濾波器應(yīng)用結(jié)果。

左：拉普拉斯濾波器應(yīng)用之前—右：拉普拉斯濾波器應(yīng)用之后

接下來(lái)，我們將Laplacian濾波器的結(jié)果求反。最后，通過(guò)應(yīng)用openCV中的threshold()函數(shù)，根據(jù)指定的閾值將灰度圖像轉(zhuǎn)換為全黑或全白。

以下是“鉛筆邊緣”過(guò)濾器的結(jié)果示例。

Pencil Edges濾鏡實(shí)現(xiàn)示例

使用Streamlit構(gòu)建圖像卡通化Web應(yīng)用程序

在創(chuàng)建了圖像卡通化濾波器的代碼之后，現(xiàn)在就可以創(chuàng)建圖像卡通化Web應(yīng)用程序了。

第一步，需要將創(chuàng)建圖像卡通化濾波器的所有代碼放入一個(gè)函數(shù)中，以便于訪問(wèn)。到目前為止，我們已經(jīng)對(duì)每個(gè)參數(shù)值進(jìn)行了硬編碼，例如內(nèi)核的大小等等。

現(xiàn)在，我們可以讓用戶使用滑塊根據(jù)自己的喜好指定一個(gè)值，而不是對(duì)每個(gè)參數(shù)值進(jìn)行硬編碼。為此，我們可以使用Streamlit中的streamlit.slider()函數(shù)。下面是其實(shí)現(xiàn)的示例。

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)

使用此滑塊，可以創(chuàng)建一個(gè)交互式圖像卡通化Web應(yīng)用程序，就像Adobe Lightroom一樣。每次調(diào)整內(nèi)核的值和其他參數(shù)時(shí)，圖像卡通化的結(jié)果都會(huì)實(shí)時(shí)更改和更新。

我們可以將其應(yīng)用到streamlit.slider()上，創(chuàng)建的每個(gè)圖像卡通化濾波器，以替換硬編碼的參數(shù)值。

接下來(lái)，我們需要添加一個(gè)小插件，以便用戶可以上傳自己想要轉(zhuǎn)換為卡通的圖像。為此，我們可以使用Streamlit中的streamlit.file_uploader()函數(shù)。要添加某些文本到Web應(yīng)用程序中，我們可以使用Streamlit 中的streamlit.text()或streamlit.write()。

用戶上傳圖像后，現(xiàn)在我們需要顯示圖像，使用圖像卡通化濾波器之一編輯圖像，并顯示卡通化圖像，以便用戶知道他們是否要進(jìn)一步調(diào)整滑塊。要顯示圖像，我們可以使用Streamlit中的streamlit.image()函數(shù)。

以下是在不到100行代碼的情況下如何構(gòu)建圖像卡通化Web應(yīng)用程序的實(shí)現(xiàn)。

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)

現(xiàn)在，可以打開(kāi)提示符，然后轉(zhuǎn)到包含上面代碼的Python文件的工作目錄。接下來(lái)，您需要使用以下命令運(yùn)行代碼。

streamlit run your_app_name.py

最后，您可以在本地計(jì)算機(jī)上使用圖像卡通化Web應(yīng)用程序！以下是該網(wǎng)絡(luò)應(yīng)用程序的示例。

該網(wǎng)絡(luò)應(yīng)用程序示例

部署Web應(yīng)用

本節(jié)是可選的，但是如果小伙伴需要部署Web應(yīng)用程序以便其他人也可以訪問(wèn)您的Web應(yīng)用程序，則可以使用Heroku部署Web應(yīng)用程序。

要將Web應(yīng)用程序部署到Heroku，首先要免費(fèi)創(chuàng)建一個(gè)Heroku帳戶，然后下載Heroku CLI。

接下來(lái)需要在與Python文件相同的目錄中創(chuàng)建四個(gè)其他文件，它們是：

? requirements.txt：這是文本文件，用于告訴Heroku構(gòu)建Web應(yīng)用程序需要哪些依賴項(xiàng)。因?yàn)樵谖覀兊膚eb應(yīng)用程序，我們使用四種不同的庫(kù)：opencv，numpy，Pillow，和streamlit，那么我們就可以寫(xiě)所有這些庫(kù)及其版本為requirements.txt的

opencv-python==4.3.0.36
streamlit==0.63.0
Pillow==7.0.0
numpy==1.18.1

? setup.sh：這是用于在Heroku上設(shè)置配置的文件。為此setup.sh文件編寫(xiě)以下內(nèi)容。

mkdir -p ~/.streamlit/                       
echo "\                       
[server]\n\                       
headless = true\n\                       
port = $PORT\n\                       
enableCORS = false\n\                       
\n\                       
" > ~/.streamlit/config.toml

? Procfile：這是告訴Heroku哪些文件以及應(yīng)如何執(zhí)行文件的文件。為Procfile編寫(xiě)以下內(nèi)容。

web: sh setup.sh && streamlit run cartoon_app.py

? Aptfile：這是Heroku 構(gòu)建包的文件，以使OpenCV能夠在Heroku中運(yùn)行。為Aptfile編寫(xiě)以下內(nèi)容。

libsm6                       
libxrender1                       
libfontconfig1                       
libice6

接下來(lái)，打開(kāi)命令提示符，然后轉(zhuǎn)到Python文件和這四個(gè)其他文件的工作目錄。在其中鍵入heroku login命令，以便您登錄到Heroku帳戶。

現(xiàn)在，您可以通過(guò)鍵入來(lái)創(chuàng)建新應(yīng)用heroku create your-app-name。為確保您位于新創(chuàng)建的應(yīng)用程序內(nèi)部，請(qǐng)鍵入以下內(nèi)容：

heroku git:remote -a your-app-name

接下來(lái)，我們需要在新創(chuàng)建的應(yīng)用程序中添加一個(gè)buildpack，以使OpenCV能夠在Heroku上運(yùn)行。要添加必要的buildpack，請(qǐng)?jiān)贖eroku CLI上鍵入以下內(nèi)容。

heroku create --buildpack https://github.com/heroku/heroku-buildpack-apt.git

現(xiàn)在設(shè)置好了。接下來(lái)，您需要通過(guò)打字來(lái)初始化一個(gè)空的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

之后，部署過(guò)程就開(kāi)始了，并且可能需要一些時(shí)間來(lái)等待此部署過(guò)程。最后，Heroku將生成新部署的Web應(yīng)用程序的URL。

就是這樣！現(xiàn)在，我們已經(jīng)構(gòu)建了自己的圖像卡通化Web應(yīng)用程序，該應(yīng)用程序模仿了Adobe Lightroom的功能。