分享我在AP 裡幫圖片自動縮圖心得及做法

分享我在AP 裡幫圖片自動縮圖心得及做法, 我在做縮圖的情況有2種: 產品和AP.

首先,我用的縮圖元件是ImageMagick, 請先在下面的 URL 下載安裝檔:

http://www.imagemagick.org/script/binary-releases.php#windows

ImageMagick

32位元的Windows 請下載這個檔案:
Version: ImageMagick-6.?.?-?-Q16-windows-dll.exe
Description: Win32 dynamic at 16 bits-per-pixel

如果是 x64 平台, 也可下載這一個版本:
Version: ImageMagick-6.7.9-10-Q16-windows-x64-dll.exe
Description: Win64 dynamic at 16 bits-per-pixel




產品面和 AP 面差在產品面是專門給產品用, 其他 AP 沒辦法直接存取, 算是一種客制化, 相對輸入的參數就會很簡單, 只要傳產品的id 進來即可.

• 1. 產品面:
  這個的輸入參數有2個, 一個是文章 ID (必填), 一個是節點的 ID (非必填).
  
  在縮圖的時候, 會先把縮圖的參數設定檔取出來, 看看目前的文章ID 是不是符合到設定檔裡的那一個範本, 通常會這麼做, 就是因為網站規模比較大, 又要做的有彈性和有效率.
  
  縮圖的設定檔的回傳規則是,
  1.1: 先以節點 ID 為模式(pattern)來搜尋, 如果有符合節點的話就傳回要產生的縮圖設定檔.
  1.2 再以文章 ID所屬的表格(Table, 或單元) 為模式(pattern)來搜尋縮圖設定檔.
  1.3 再以文章ID 所屬的範本(Definition) 為模式(pattern)來搜尋縮圖設定檔.
  1.4 最後都沒找到的話, 就傳回 "預設的縮圖設定檔".
• 2. AP 面:
  AP 面也可以用在產品面上面, AP面使用起來也很有彈性, 和產品面的差別在, 呼叫縮圖副程式時, AP面要把實體的圖片路徑傳給副程式, 產品面的話只需要傳入文章ID.

下面就以 AP 為例, 來看看如何套用縮圖副程式:

• step 1: include 副程式, 如果是其他物件化導向的程式語言, 這一個 step 應該是 import 或 引用縮圖元件.
  
• step 2: 新增文章時增加這一行指令:
  call gen_ap_image_filename(image_filepath, fileUploadPath, "180", "", "", "180")
  
  副程式的參數說明:
  1. image_filepath, 上傳的圖片實體路徑.
  2. fileUploadPath, 上傳的資料夾的實體路徑.
  3. resize_outputIconFolder, 要縮圖到子資料夾的名稱, 當同一個資料夾的檔案數太多時, 系統效能會變差, 所以縮圖並不一定要和原圖放在同一個資料夾下.
  4. resize_outputIconFilePrefix, 產生的新縮圖檔名, 是不要加一個前置字串, 像是 "s_", "m_", "l_" 之類的, 以區分大中小圖.
  5. resize_outputIconFilePostfix, 產生的新縮圖檔名, 是不要加一個後置字串, 像是 "_s", "_m", "_l" 之類的, 以區分大中小圖.
  6. resize_targetWidth, 圖片的 max-height 和 max-width, 以輸入 180 來說指的是圖寬不會超過 180px, 圖高也不會超過180px.
  
  
• step 3: 修改文章, submit 後, 在更新資料(update table)前, 增加這一行指令, 用來刪除修改前的實體縮圖檔案:
  call delete_old_resized_image_db(image_fieldName, dbTableName, myWhereCondition, fileUploadPath, "180", "", "")
  說明: 這個附程式會先透過前3個參數, 取得 image 的實體 filename, 再透過第4個參數(fileUploadPath) 取得圖片的實體檔案路徑, 然後再用 FileSystemObject 刪除實體的縮圖檔案, 所以並不一定要透過上面這一個 delete_old_resized_image_db() 副程式來刪, 也可以直接用 FileSystemObject 刪除實體的縮圖檔案
  
• step 4: 修改文章, submit 後, 在 update database後, 比照 step 2, 呼叫來產生縮圖.
• step 5: 刪除文章時, 比照 step 3, 在刪除資料(delete recored) 前, 刪除實體的縮圖檔案.

如果是產品面的更新, 參考下圖,

1. 在修改前呼叫副程式: deleteThumbImages 把文章 ID 傳入, 刪除縮圖檔案.

2. 更新文章內容,

3. 產內縮圖, 傳入文章ID, 和節點ID(NodeID).

對於已經存在的資料, 可以參考看看下面的 sample 來整批的轉檔::

dim sql
sql = "select * from tablename"

dim rs
set rs = conn.execute(sql)
if not rs.eof then
    do
        dim id
        id = trim("" & rs("id"))
        
        '// 客製化, 處理縮圖
        '// in file: ???.ImageMagic.function.asp
        dim cust_image_fieldName
        dim cust_image_fieldvalue
        cust_image_fieldName = "RoomPhoto"
        cust_image_fieldvalue = trim("" & RS("" & cust_image_fieldName))
        call gen_ap_image_filename(cust_image_fieldvalue, "(你的上傳資料夾)", "180", "", "", "180")
        
        response.write "<br/>ID:" & id
        rs.movenext
        if rs.eof then
            exit do
        end if
    loop
end if