:::

5-3 產生圖片縮圖

一、安裝 intervention image 物件

  1. 縮圖利用PHP內建的GD圖形函式庫就可以做,但步驟較多,也需要GD函式庫的使用基礎,因此,我們可以用人加寫好的物件來做。
  2. intervention image 官網:http://image.intervention.io/
  3. Ctrl+` 開啟終端機,並貼上以下指令執行之 :
    composer require intervention/image

     

二、確定GD函式庫有啟用

  1. 預設XAMPP是沒有啟用GD函式庫的,因此,編輯 php.ini
  2. 搜尋 gd ,將 ;extension=gd 前的分號刪除,存檔,並重啟Apache即可。

三、讓Composer安裝的物件可以自動引入

  1. 開啟 header.php,在最前方引入自動載入檔
    <?php
    require_once 'vendor/autoload.php';
    require_once 'config.php';
    
    try
    {
        ...略...
    }
    

     

  2. 這個動作只要做一次即可,以後凡透過Composer安裝的物件都可以直接使用。

四、產生縮圖

  1. 編輯 admin/index.php,在最上方加入以下這行,用意是匯入該物件,並可以用比較短名稱的方式來使用物件:
    <?php
    use Intervention\Image\ImageManagerStatic as Image;
    

     

  2. 因為要有縮圖,所以多設定一個$thumb_dest也就是縮圖的存放路徑檔名,也就是說,上傳一張圖後,會產生兩張圖
  3. 接著,我們將不再用move_uploaded_file()來搬移檔案,而是改用該物件來產生縮圖,包括原圖也會縮到 1600 大小,小圖則縮到480大小
    // 依序讀出檔案
    foreach ($_FILES['files']['name'] as $i => $filename) {
        // 若沒檔案就中斷
        if (!$filename) {
            break;
        }
    
        // 檢查檔案是否上傳成功
        if ($_FILES['files']['error'][$i] === UPLOAD_ERR_OK) {
    
            // 讓檔案放在文章編號的目錄下,比較方便管理,檢查有無該目錄
            if (!is_dir(_PATH . "/uploads/{$id}")) {
                // 若無建立原檔目錄
                mkdir(_PATH . "/uploads/{$id}");
                // 順便建立縮圖目錄
                mkdir(_PATH . "/uploads/{$id}/thumbs");
            }
    
            // 暫存檔來源
            $file = $_FILES['files']['tmp_name'][$i];
            // 副檔名
            $ext = pathinfo($filename, PATHINFO_EXTENSION);
            // 圖片的前置字串
            $prefix = date('YmdHis');
            // 原圖欲放置到哪裡
            $dest = _PATH . "/uploads/{$id}/{$prefix}-{$i}.{$ext}";
            // 縮圖欲放置到哪裡
            $thumb_dest = _PATH . "/uploads/{$id}/thumbs/{$prefix}-{$i}.{$ext}";
    
            // 將原圖縮成1600大圖
            $image = Image::make($file)->resize(1600, 1600, function ($constraint) {
                $constraint->aspectRatio();
                $constraint->upsize();
            })->save($dest);
    
            // 再將大圖縮成480小圖
            $image = Image::make($dest)->resize(480, 480, function ($constraint) {
                $constraint->aspectRatio();
                $constraint->upsize();
            })->save($thumb_dest);
    
        } else {
            die("上傳錯誤:{$_FILES['files']['error'][$i]}");
        }
    }

  4. make()用來取得原檔,關於 make() 用法,可參考: http://image.intervention.io/api/make
  5. resize()用來做圖片縮放,關於 resize() 用法,可參考: http://image.intervention.io/api/resize
    1. aspectRatio()用來做圖片等比例縮放
    2. upsize()用來避免圖片放大(原圖較小的情況下)
  6. 關於 save() 用法,可參考: http://image.intervention.io/api/save

:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1816

計數器

今天: 4178417841784178
昨天: 5069506950695069
總計: 5134626513462651346265134626513462651346265134626