iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 11
0
影片教學

用Django架構建置專屬的LINEBOT吧系列 第 11

[Day 11]用Django架構建置專屬的LINEBOT吧 - 圖片處理(I)概論

從這篇開始會跟大家介紹一下如何用OPENCV來處理LINEBOT接收到的圖片,
所以在這之前先跟大家介紹關於圖像處理的一些基礎觀念,

安裝OPENCV

首先要下載OPENCV的套件,
以及矩陣運算所使用的套件numpy,

pip install opencv-python opencv-contrib-python 
pip install numpy

關於圖片的顏色

接下來,先了解一下關於圖片內容,
一般的圖片內容,
從組成來看,每張就是一個一個像素堆疊而成的,
同時每個像素都有自己的R、G、B三個數值,
R=紅色,G=綠色,B=藍色,是光的三原色,
不過在OPENCV裡面,讀值是以B、G、R的順序,
以一個九個像素所組成的圖來看,
他在電腦中的實際數值可用下圖表示,

https://ithelp.ithome.com.tw/upload/images/20200915/20121176LNUnBHfDmP.png

假設每一個方格都是一個像素,
則這張圖片便可以下面的三維矩陣表示,

pic=[[[0,0,255],[0,192,255],[0,255,255]],
     [[80,208,146],[80,176,0],[240,176,0]],
     [[192,112,0],[255,255,255],[0,0,0]]]

為了避免初學者如當初的我,不瞭解什麼是矩陣的概念,

在此舉例說明:
在python裡面,一個list其實就算是一維矩陣,如a=[0,1,2]
當一個list當中又包了其他若干個list,就是二維矩陣,如b=[[0,1,2],[3,4,5]]
以此類推,

而圖片的三維矩陣,就是在一個list當中,
包括了這個像素所在的行、列以及BGR數值,

接下來就實際用讀取圖片中的數值來試試看吧,
首先安裝完OPENCV之後,可以先在本機測試用OPENCV套件,

首先做一個小小的圖片,
就打開小畫家,在最左上角畫六個點,
圖片大概是長這樣,

https://ithelp.ithome.com.tw/upload/images/20200916/20121176iabo4MGbXH.jpg

然後我們存在Django APP的資料夾的第一層,
先開一個image_read.py的檔案當作測試,
假定將圖片的名字設定為'test.png'。

#image_read.py
import cv2 as cv 
import numpy as np 

img = cv.imread('./test.png')
print(img)

print出來的結果會像是這樣:

https://ithelp.ithome.com.tw/upload/images/20200926/20121176KhO09GE6Sk.jpg

關於圖片的位置

這邊也先說明一下,關於圖片的位置關係,
在OPENCV裡面,圖片的(x,y)位置是由圖片的最左上角為原點(0,0)的位置,

因此,以範例圖片為例,其位置關係將是如下:
https://ithelp.ithome.com.tw/upload/images/20200916/20121176XKAAe2a3sP.png

稍微改一下程式碼,我們另a、b、c為矩陣中的三個位置,
其中c則是指定一個範圍y=2的二維矩陣,[2,0:3]=>y=2,x=0~2

#image_read.py
import cv2 as cv 
import numpy as np 

img = cv.imread('./test.png')
print(img)

a = img[0,0]
b = img[1,1]
c = img[2,0:3]

print('a=\n',a)
print('b=\n',b)
print('c=\n',c)

以下為輸出的結果

https://ithelp.ithome.com.tw/upload/images/20200926/20121176yY8d7y5i8f.jpg

這篇就簡單地講解關於圖片的顏色數值與位置關係的概念,
接下來就是要進入關於LINEBOT當中進行圖像處理的部分囉。


上一篇
[Day 10]用Django架構建置專屬的LINEBOT吧 - Flex Message(II)
下一篇
[Day 12]用Django架構建置專屬的LINEBOT吧 - 圖片處理(II)用LINE處理圖片
系列文
用Django架構建置專屬的LINEBOT吧30

1 則留言

0
cool21540125
iT邦新手 5 級 ‧ 2020-10-11 17:23:47

遇到同樣有在用powermode的同好/images/emoticon/emoticon32.gif

用powermode才帶勁呀!/images/emoticon/emoticon58.gif

我要留言

立即登入留言