➣ Reading Time: 14 minutes

My photoshop ver2.0

https://ithelp.ithome.com.tw/upload/images/20201009/20120424hCiedxcO8V.png

功能列表

# ------  My photoshop Release notes ------ #
# ver2.0 (2020.10.11)
1. 新增視窗 `My histogram`,可以隨時查看現在圖片的 RGB直方圖
2. 新增視窗 `My color panel`,可以自己選顏色、自己畫點
# ver1.0 (2020.10.10)
1. 新增儲存檔案功能
2. 離開應用程式的穩定優化
3. 新增關閉程式的文字提示
4. 新增調整光線、對比度功能
5. 新增調整明度、飽和度功能
6. 新增旋轉圖片功能
7. 新增可增加圖片噪點的功能,相當於增加圖片顆粒感

-> 此篇文章的程式碼 github

Day29_My_photoshop_v2.ipynb

前言

所以沒錢買 photoshop 的我,最後自己做了一個 photoshop 嗎…

這系列會把之前所學到的東西全部整理到一支程式中,
當然我知道如果用類似 QT 可以整出更好的視覺化界面
但我們的重點還是放回只靠 OpenCV 能做的極限能到哪邊哈哈哈

新增功能一覽

1. 新增視窗 My histogram,可以隨時查看現在圖片的 RGB直方圖

相關文章:【沒錢ps,我用OpenCV!】Day 14 – 進階修圖1,運用 OpenCV 顯示圖片直方圖、分離與合併RGB通道 show histogram, split, merge RGB channel

我自己的印象中,photoshop 好像都會有個直方圖都在旁邊可以隨時查看?
那我們來自己做吧!

1-1. 建立新視窗 “My histogram”

# 直方圖視窗
cv2.namedWindow("My histogram", window_flags) # cv2.WINDOW_NORMAL)

1-2. 使用之前教學的函數,畫出圖片 RGB直方圖

plot_histogram = show_histogram(img_copy)    
# 顯示調整後的效果
cv2.imshow("My histogram", plot_histogram)

1-3. 最大難題:如何把 plot 變成 圖片?

這問題才是這次更新功能最大的難關啊,
我們之前絕大部分的plot都是直接顯示在 jupyter notebook 中,
現在要把它變成圖片移出來,該怎麼辦呢?

1-3-1. (failed) 嘗試使用 plt.show()

plt.show() 我記得可以直接另外開啟視窗產生出圖片繪製結果,
但在 jupyter notebook 中,似乎沒辦法這樣做。

1-3-2. (passed?) 儲存 plt 為 jpg 檔後,再用 OpenCV 讀取

看標題就知道一定會成功了
總之這也是很直覺的方法,直接儲存圖片後再讀取圖片,
但這會有一個很大的問題,我們的硬碟無時無刻都會一直在讀寫

長久下來絕對不是一個好的方案 (除非想更快換硬碟)

1-3-3. (最佳化) 儲存 plt 進 memory buffer 後,再讀取出來

這個方法的精隨在於,他並沒有實際上做儲存檔案的動作
而只是把這些資訊暫時放在記憶體的某個位置上,
而我們能用如同 1-3-2. 的方法把圖片讀取出來。

def show_histogram(img):    
    fig, ax = plt.subplots()
    # 畫出 RGB 三種顏色的分佈圖
    color = ('b','g','r')
    plt.style.use('dark_background')
    for idx, color in enumerate(color):
        histogram = cv2.calcHist([img],[idx],None,[256],[0, 256])
        ax.plot(histogram, color = color)

    s, (width, height) = fig.canvas.print_to_buffer()
    plot_histogram = np.frombuffer(s, np.uint8).reshape((height, width, 4))
    return plot_histogram

2. 新增視窗 My color panel,可以自己選色並作畫

這個不論是 photoshop 或 小畫家 應該都有的功能吧!
我們先新增一個能夠顯示顏色的視窗:

2-1. 建立新視窗 “My color panel”

# 控制顏色
cv2.namedWindow("My color panel", window_flags) # cv2.WINDOW_NORMAL)

2-2. 建立 RGB滑動條,並顯示對應顏色

# create trackbars for color change
cv2.createTrackbar('R','My color panel', 0, 255, nothing)
cv2.createTrackbar('G','My color panel', 0, 255, nothing)
cv2.createTrackbar('B','My color panel', 0, 255, nothing)
def color_panel(img_copy):      
    data = {}
    data['r']  = cv2.getTrackbarPos('R','My color panel')
    data['g']  = cv2.getTrackbarPos('G','My color panel')
    data['b']  = cv2.getTrackbarPos('B','My color panel')
    color_rgb = np.zeros((300,400,3), np.uint8)
    color_rgb[:] = [data['b'], data['g'], data['r']]

    # 改變顯示 window 的內容
    cv2.imshow('My color panel', color_rgb)
    cv2.resizeWindow("My color panel", 400, 300)

    return data['img']

使用昨天提到的 cv2.getTrackbarPos 得到顏色的回傳值,
並使用 color_rgb[:] = [data['b'], data['g'], data['r']]
組合顏色並顯示顏色。

2-3. 建立打點用的筆,並對圖片作畫

這部分的細節可以參考:【沒錢ps,我用OpenCV!】Day 23 – 綜合運用2,(資料標註) 用 OpenCV 來製作一個標記點小工具吧! 滑鼠與視窗控制 label points

這邊我特別說明我們需要製作一個開關,來偵測現在是否開啟打點模式。

  • 製作開關:
cv2.createTrackbar('Points','My color panel', 0, 1, nothing)
  • 偵測開關:
data['points']  = cv2.getTrackbarPos('Points','My color panel')
  • 如果開關打開,才是開啟打點模式:
if data['points'] == 1:            
    # 標記點位置
    cv2.circle(data['img'], (x,y), 3, (data['b'], data['g'], data['r']), 5, 16) 

    # 顯示修改的 (x,y) 位置 
    print("change points: (x, y) = ({}, {})".format(x, y))

2-4. 最後,注意 imshow 圖片更新邏輯

我們需要注意一件事情,
昨天我們的內容大多數都是「從原圖」出發,依據對應值開始調整畫面

但這次的打點內容,是需要被保存在圖片上的
因此我們必須要修改這部分的程式邏輯,

img = color_panel(img)
img_copy = np.copy(img)
  • 我們每次進行打點時,更新原來的圖片
  • 而做其他變化時,不更新原來的圖片,從原圖片出發開始計算

這樣就可以開始我們的作畫囉~~~!


本文同步發佈在: 第 12 屆 iT 邦幫忙鐵人賽
【沒錢ps,我用OpenCV!】Day 29 – Final Project v2,於是沒錢買ps的我,開發了自己的photoshop,我的天啊 My photoshop made by OpenCV


Reference

https://www.itdaan.com/tw/6488189fb5d7d60b163039cd0a004f70

https://blog.csdn.net/jacke121/article/details/54718563

https://blog.csdn.net/aa846555831/article/details/52372884?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

https://web-backend.icare.univ-lille.fr/tutorials/convert_a_matplotlib_figure

https://www.itread01.com/content/1547426526.html

http://www.shengwn.com/page/2018-07-22/how_to_make_a_filter_with_python.htm

https://blog.csdn.net/aa846555831/article/details/52372884

https://www.thetopsites.net/article/58641662.shtml

https://blog.csdn.net/fanjiule/article/details/81606596

https://blog.csdn.net/wuyoy520/article/details/47111295

 ⭐Python OpenCV 相關文章整理⭐:
⭐基礎知識篇⭐:
1.【OpenCV】1 – 安裝 python OpenCV install 電腦中圖片的基本概念總整理
2.【OpenCV】2 – OpenCV 圖片的讀取、顯示、存檔 (load, show, save),附贈簡易理解「相對路徑」與「絕對路徑」
3.【OpenCV】OpenCV 利用 python OpenCV 查詢 image 大小, img shape sample code (內附範例程式碼)
⭐基本圖像處理篇⭐:
1.【OpenCV】OpenCV 利用 python OpenCV 縮放圖片 image 大小, cv2 resize (內附程式碼)
2.【OpenCV】3 – python OpenCV 的剪裁、旋轉、縮放 (crop, rotate, resize)
3.【OpenCV】4 – 運用 OpenCV 調整光線 (modify brightness, intensity)
4.【OpenCV】5 – 運用 OpenCV 調整亮度、飽和度(透過轉移至 HLS 顏色空間) modify lightness, saturation
5.【OpenCV】6 – 運用 OpenCV 調整色調(冷色系/暖色系)、色溫(白平衡)modify color temperature, white balance
6.【OpenCV】7 – 運用 OpenCV 為圖片增加一些顆粒感 (增加高斯噪點) add gaussian noise
7.【OpenCV】8 – 運用 OpenCV 改變圖片的對比度 modify contrast (內含:網路上常見錯誤調整對比度方式的分析)
8.【OpenCV】9 – 運用 OpenCV 降低圖片的高光 reduce highlights
9.【OpenCV】11 – OpenCV 建立新空白圖、畫點、畫圓 create new pictures, draw points and draw circle
10.【OpenCV】12 – 運用 OpenCV 畫線、畫矩形、畫橢圓 draw lines, draw rectangle, draw ellipse
11.【OpenCV】13 – 運用 OpenCV 在圖片上寫文字、查色碼、顯示色碼顏色 write text, get and show RGB Color Code
⭐進階圖像處理篇⭐:
1.【OpenCV】14 – 運用 OpenCV 顯示圖片直方圖、分離與合併RGB通道 show histogram, split, merge RGB channel
2.【OpenCV】15 – OpenCV 當然也有像 ps 圖層的功能! 什麼?圖片也能加減法?! Add, Subtract, AddWeighted
3.【OpenCV】16 – 運用 OpenCV 幫助我們找圖片的輪廓(高斯模糊、Canny) cv2.GaussianBlur, cv2.Canny
4.【OpenCV】17 – 運用 OpenCV 的終極圖層處理大全, 想P圖該怎麼P (bitwise_or, and, xor, not, addWeighted)
5.【OpenCV】18 – 運用 OpenCV 做圖片二值化,產生黑白的圖片吧!cv2.threshold 各種選擇參數大全
6.【OpenCV】19 – OpenCV 的圖片自適應二值化,產生更好效果的黑白圖片!cv2.adaptiveThreshold
7.【OpenCV】20 – OpenCV 的各種 Threshold 方法整理,Otsu’s Threshold 大津二值化,自動計算最佳閥值,做出最好的黑白效果圖!
8.【OpenCV】26 – 銳化圖片,將模糊的圖片變得更清晰吧! sharpen images
⭐冷門應用篇⭐:
1.【OpenCV】python OpenCV 分析影像模糊程度 檢測圖片模糊 blur sample code (內含範例程式碼)
2.【OpenCV】21 – OpenCV 也有 photoshop 的魔術棒工具?! 漫水填充法 cv2.floodFill (Magic Wand Tool)
3.【OpenCV】27 – 顏色映射 – OpenCV 內建的自動配色?! auto recolor images, cv2.applyColorMap
⭐影片處理篇⭐:
1.【OpenCV】OpenCV 利用 python OpenCV 將圖片製作成一部影片 (內附程式碼) make video from images
2.【OpenCV】OpenCV 利用 python OpenCV 將一部影片拆成一張張圖片 sample code (內附程式碼) get images from video
3.【OpenCV】用 OpenCV 開啟 rtsp 即時影像串流 sample code (內含範例程式碼) – python OpenCV rtsp
4.【OpenCV】python pyinotify video player 利用 OpenCV + inotify 製作即時影片播放器 sample code (內含範例程式碼)
⭐綜合應用篇⭐:
1.【OpenCV】10 – 日系濾鏡總集篇,運用 OpenCV 製作屬於自己的濾鏡吧 (內含可於網頁上直接完成濾鏡的 colab )
2.【OpenCV】22 – 綜合運用1,用 OpenCV 來P圖囉! 來運用各種之前學習的各種東西吧! merge two images
3.【OpenCV】23 – 綜合運用2,(資料標註) 用 OpenCV 來製作一個標記點小工具吧! 滑鼠與視窗控制 label points
4.【OpenCV】24 – 綜合運用3,(應用app) 用 OpenCV 來製作一個照片文件掃描機吧! photo scanner 透視投影
5.【OpenCV】25 – 綜合運用4,用 OpenCV 來把圖片p到各種奇怪的地方吧! 透視投影 cv2.warpPerspective, merge two images
6.【OpenCV】28 – Final Project v1,於是沒錢買ps的我,開發了自己的photoshop,我的天啊 My photoshop made by OpenCV
7.【OpenCV】29 – Final Project v2,於是沒錢買ps的我,開發了自己的photoshop,我的天啊 My photoshop made by OpenCV
8.【OpenCV】30 – Final Project v3,於是沒錢買ps的我,開發了自己的photoshop,我的天啊 My photoshop made by OpenCV