照片上傳截圖

YH Lin
7 min readJul 24, 2020

--

這是一個Django 照片上傳後,透過影像處理的方法截取特殊區域的App,本篇主要著重在資料庫的處理。

環境設定:

在Django 的虛擬環境中 stratproject UploadFile,後startapp app1

在這專案會使用到opencv 及Pillow。所以要執行

pip install opencv-contrib-python
pip install Pillow

在開始建立資料庫前,需要先建立所需要存放照片的資料夾,在UploadFile專案下建一個files 的資料夾,下面再建attachments、images、part資料夾

在app1 的models 中需要用到的欄位如下,

feature_image = models.ImageField(upload_to='tutorial/images/')

因為ImageField中的upload_to,會將檔案指定到tutorial/images/的資料夾下。

thumbnail  = models.CharField(max_length=100,null=True)

用一個CharField欄位來紀錄縮圖的檔案所存的位置

建好models.py 後須執行

python manage.py makemigrations 
python manage.py migrate

在app1中新增一個forms.py,因為縮圖是在檔案上傳時,會去截取圖檔的部分內容後,自行存檔後,寫到thumbnail 欄位,所以在forms.py 中,不用特別處理

在處理views.py 前先來定義urls.py

在UploadFile專案的urls.py 中改寫成,

from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path,include

from UploadFile import settings

urlpatterns = [
path('admin/', admin.site.urls),
path('app1/',include('app1.urls',namespace='app1'))

]

下面這段可使每個app1獨立切開來維護其urls.py

path('app1/',include('app1.urls',namespace='app1'))

如果再瀏覽器預覽將會是

接著在app1 下還需要建立一個urls.py,這邊加上一個app_name = ‘app1’,之後可在views.py中以reverse(app1:name) 來解析路徑。

app1的urls.py有三個urls.py 主要來處理list、upload、delete三個功能

from django.contrib import admin
from django.urls import path,include

from app1 import views
app_name='app1'

urlpatterns = [
path('tutorials/',views.tutorialLists,name='tutorial_lists'),
path('tutorials/upload/',views.upload,name='upload_tutorial'),
path('tutorials/<int:pk>',views.deleteTutorial,name='tutorial' ),

]

接著回來處理views.py

在這個實作中會需要一個Pictute_part來處理截圖的方法,這個類別定義在app1.imglib中。

tutorial.feature_image是一個ImageField的資料型態,因此需要利用url來取得實際的path,接著利用os.path.basename來取的path的檔名。

filename = os.path.basename(tutorial.feature_image.url)

在24行中利用

tutorial = form.save()

來取得Tutorial的物件,接著

tutorial.thumbnail = 'files/tutorial/part/'+filename
tutorial.save()

將縮圖檔案路徑寫到thumbnail的欄位中。

接下來處理縮圖的實際物理路徑

pic = Picture_part('files/tutorial/images/'+filename)

來取得Picture_part的物件實體,再利用

img = pic.horizontal()

來取得部分影像的mat。再用cv2.write 方法寫到相對的資料夾中

cv2.imwrite(tutorial.thumbnail,img)

在app1/templates/tutorial資料夾中建立list.html 與 upload.html。第6行中因為在app1/urls.py 中有加上app_name,所以url的部分要寫成

<a href="{% url 'app1:upload_tutorial' %}">Upload Tutorial</a>

在23行與33行中分別秀原圖與縮圖

不一樣的是tutorial.feature_image 是ImageField的資料型態, tutorial.thumbnail 是CharField的資料型態。

upload.html 就單純的引入forms.py

最後在settings.py中加上檔案要上傳及CSS的設定

STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR,'files')
MEDIA_URL = '/files/'
STATICFILES_DIRS=[ os.path.join(BASE_DIR,'static')]

MEDIA_ROOT 為server存放檔案的路徑

MEDIA_URL 為瀏覽器對應的位置

UploadFile.urls.py 中加上

urlpatterns = [
path('admin/', admin.site.urls),
path('app1/',include('app1.urls',namespace='app1'))

]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL,document_root = settings.MEDIA_ROOT)

這樣一來就完成了。參考的專案如下

https://github.com/JackyCafe/UploadFile.git

--

--

No responses yet