CodeIgniter 4: Изменение размера изображения с помощью манипуляции с изображением

17/12/2021 23:56

Вы можете управлять изображением после загрузки в Codeigniter 4. Для него нет пакета или сторонней библиотеки. CodeIgniter 4 предоставляет класс обработки изображений. С помощью этого класса вы можете манипулировать изображениями в соответствии с вашими потребностями. Вы можете установить водяной знак на загруженное изображение. Вы можете изменить размер и обрезать изображение.

В этом посте вы узнаете, как изменить размер изображения в CodeIgniter 4. Мы увидим необходимые параметры один за другим, применив их к изображению.

Итак, давайте начнем с создания нового проекта в CodeIgniter 4. Манипуляции с изображением помогут уменьшить размер изображения. Манипуляция изображениями предоставляет различные варианты загруженных изображений. Эти параметры доступны в этом классе:

Изменение размера изображения
Создание эскиза
Обрезка изображения
Поворот/Вращение изображения

Изменив размер изображения, вы также можете сжать и уменьшить размер изображения. Это также увеличит скорость работы приложения.

Предпосылки

Мы собираемся создать новый проект в CodeIgniter 4. Есть два способа настроить проект Codeigniter 4. Либо вы можете скачать установку прямо с официального сайта CodeIgniter. Или вы можете установить его с помощью composer.

Кроме того, для настройки проекта CodeIgniter 4 вам потребуется указанная ниже конфигурация.

PHP >= 7.3
MySQL (версия > 5)
Apache/Nginx Сервер
VS Code редактор
Composer

Настройка проекта для изменения размера изображения в CodeIgniter 4

Итак, откройте терминал или командную строку, что у вас есть. Теперь введите указанную команду ниже.

composer create-project codeigniter4/appstarter ci4-image-resize

Это установит CodeIgniter 4. Настройка проекта может занять несколько минут. Это также зависит от скорости вашего интернета.

Когда у вас есть проект, приступим к настройке среды. Это позволит проекту запустить его локально.

Настройте среду проекта в CodeIgniter 4

Перед выполнением любой настройки вам необходимо открыть проект в редакторе кода. Я предпочитаю VS Code. После того, как вы открыли проект, давайте перейдем к файлу env. Итак, вам нужно будет переименовать его в .env. Теперь откройте этот файл и найдите раздел Environment.

В разделе среды вы увидите CI_ENVIRONMENT. По умолчанию его значение - production. Но мы должны запустить проект в локальной среде. Следовательно, необходимо будет переименовать production в development.

#--------------------------------------------------------------------
# ENVIRONMENT
#--------------------------------------------------------------------

CI_ENVIRONMENT = development

Далее нам нужно выполнить настройку базы данных. Следовательно, создайте новую базу данных в MySQL.

Создание и настройка базы данных в CodeIgniter 4

Вам нужна база данных. Я создал новую базу данных, используя команду ниже.

CREATE DATABASE ci4_image

После создания базы данных вернемся в .env файл проекта. Прокрутите вниз и перейдите в раздел DATABASE. Теперь вам нужно будет настроить базу данных, как показано ниже.

#--------------------------------------------------------------------
# DATABASE
#--------------------------------------------------------------------

database.default.hostname = localhost
database.default.database = ci4_image
database.default.username = root
database.default.password = root // Пароль от БД (может быть пустым)
database.default.DBDriver = MySQLi

Теперь вы закончили настройку базы данных.

На следующем шаге вам нужно будет создать файл миграции для таблицы.

Создание миграции базы данных для изменения размера изображения в CodeIgniter 4

Мы сохраним имя изображения в таблице базы данных. Следовательно, с помощью миграции вы можете создать схему для таблицы.

php spark make:migration imageResize

Приведенная выше команда создаст файл миграции с именем timestamp_Imageresize.php.

После создания файла миграции давайте поместим в него схему.

timestamp_imageResize.php

<?php

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class Imageresize extends Migration
{
    public function up()
    {
        $this->forge->addField([
            'id' => [
                'type' => 'INT',
                'auto_increment' => true
            ],
            'name' => [
                'type' => 'VARCHAR',
                'constraint' => '100'
            ],
            'created_at datetime default current_timestamp',
            'updated_at datetime default current_timestamp on update current_timestamp'
        ]);
        $this->forge->addKey('id', true);
        $this->forge->createTable('imageResize');
    }

    public function down()
    {
        $this->forge->dropTable('imageResize');
    }
}

Я добавил схему для таблицы. Теперь это нужно будет перенести в созданную базу данных.

Перенос таблицы в CodeIgniter 4

Для переноса таблиц вы должны запустить команду spark в терминале.

php spark migrate

Эта команда сгенерирует таблицу с указанной схемой.

Создайте модель для изменения размера изображения в CodeIgniter 4

Нам нужна модель для синхронизации с базой данных. У нас уже есть миграция для таблицы. Следовательно, мы можем настроить эту таблицу с помощью модели. Итак, давайте создадим это, а затем продолжим.

php spark make:model Image

После создания модели вставьте приведенный ниже код и сделайте так, чтобы он выглядел так же.

Image.php

<?php

namespace App\Models;

use CodeIgniter\Model;

class Image extends Model
{
    protected $DBGroup              = 'default';
    protected $table                = 'images';
    protected $primaryKey           = 'id';
    protected $useAutoIncrement     = true;
    protected $protectFields        = true;
    protected $allowedFields        = ['name'];

    // Dates
    protected $useTimestamps        = false;
    protected $dateFormat           = 'datetime';
    protected $createdField         = 'created_at';
    protected $updatedField         = 'updated_at';
}

На следующем этапе нам понадобится представление (вид). Представление будет содержать форму с вводом для загрузки изображения. Давайте создадим это.

Создадим представление (View) для загрузки изображения

Вы перейдите в папку Views внутри папки app. Теперь создайте представление с именем image.php. После создания представления поместим в него приведенный ниже код. В приведенном ниже коде я добавил элемент формы, а внутри него находится поле input type="file". Также есть кнопка отправки.

image.php

<!doctype html>
<html lang="en">

<head>
    <title>Codeigniter 4 Ajax Form Handling</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
    <style>
        .error {
            color: #dc3545;
        }
    </style>
</head>

<body>
<?php $validation =  \Config\Services::validation(); ?>
    <div class="container py-4">
        <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 m-auto">
                <form method="POST" action="<?= base_url('image')?> " enctype="multipart/form-data">
                    <?= csrf_field() ?>

                    <?php
                        if(session()->getFlashdata('success')):?>
                            <div class="alert alert-success alert-dismissible">
                                <button type="button" class="btn-close" data-bs-dismiss="alert">&times;</button>
                                <?php echo session()->getFlashdata('success') ?>
                            </div>
                        <?php elseif(session()->getFlashdata('failed')):?>
                            <div class="alert alert-danger alert-dismissible">
                                <button type="button" class="btn-close" data-bs-dismiss="alert">&times;</button>
                                <?php echo session()->getFlashdata('failed') ?>
                            </div>
                    <?php endif; ?>

                    <div class="card shadow">
                        <div class="card-header">
                            <h5 class="card-title">Codeigniter 4 Image Upload and Resize</h5>
                        </div>

                        <div class="card-body p-4">

                            <div class="form-group mb-3 has-validation">
                                <label class="form-label" for="image">Image</label>
                                <input type="file" class="form-control <?php if($validation->getError('image')): ?>is-invalid<?php endif ?>" id="image" name="image" />

                                <?php if ($validation->getError('image')): ?>
                                    <div class="invalid-feedback">
                                        <?= $validation->getError('image') ?>
                                    </div>                                
                                <?php endif; ?>
                            </div>

                            <button type="submit" id="submit-btn" class="btn btn-success">Save</button>
                        </div>
                    </div>

                    <?php
                    if(session()->getFlashdata('previewImage')):?>
                        <div class="form-group py-4">
                        <h5 class="py-2">Image Preview</h5>
                            <img src="<?php echo base_url('uploads/'.session()->getFlashdata('previewImage'));?>" class="img-fluid"/>
                        </div>
                    <?php endif; ?>
                </form>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
</html>

Для дизайна формы я использовал Bootstrap 5. В форме мы указали метод (method) и экшн (action). Далее, мы должны определить маршруты, но сначала, создайте контроллер для реализации функционала по изменению размера изображения в CodeIgniter 4.

Создайте контроллер (Controller) для изменения размера изображения в Codeigniter 4

Для создания контроллера я буду использовать команду spark. Следовательно, откройте терминал внутри проекта и введите следующую команду.

php spark make:controller ImageController

После создания контроллера вы должны поместить фрагмент кода, указанный ниже. В нем, вверху, я включил класс Model (Image). В конструкторе я вызвал вспомогательные функции CodeIgniter для обработки форм и перенаправления URL. Также я создал объект модели Image.

ImageController.php

<?php

namespace App\Controllers;

use App\Controllers\BaseController;
use App\Models\Image;

class ImageController extends BaseController
{
    /**
     * Constructor
     */
    public function __construct()
    {
        helper(['form', 'url']);
        $this->imageModel = new Image();
    }

    public function index()
    {
        return view('image');
    }

    /**
     * Manipulate image and store
     */
    public function store()
    {
        // image validation
        $validated = $this->validate([
            'image' => [
                'uploaded[image]',
                'mime_in[image,image/jpg,image/jpeg,image/gif,image/png]',
                'max_size[image,4096]',
            ],
        ]);

        if (!$validated) {
            return view('image', [
                'validation' => $this->validator
            ]);
        }

        $imagePath = $this->request->getFile('image');

        $imageName =  $imagePath->getRandomName();

        // Image manipulation
        $image = \Config\Services::image()
            ->withFile($imagePath)
            ->resize(240, 180, true, 'height')
            ->save(FCPATH . '/uploads/' . $imageName);

        $imagePath->move(WRITEPATH . 'uploads');

        $imageData = [
            'name' =>  $imageName,
        ];

        $result = $this->imageModel->save($imageData);

        if ($result) {
            session()->setFlashdata('success', 'Success! image uploaded.');
            return redirect()->to(site_url('/image'))->withInput()->with('previewImage', $imageName);
        } else {
            session()->setFlashdata('failed', 'Failed! image not uploaded.');
            return redirect()->to(site_url('/image'))->withInput()->with('previewImage', $imageName);
        }
    }
}

Также у нас есть функция index() для загрузки представления. (Мы уже создали представление).
В функции store() мы обрабатываем проверку изображения. Также мы включили сервисный класс CodeIgniter, то есть \Config\Services::image().
Используя этот класс обслуживания, я манипулировал реальным изображением. Размер изменен с фиксированным размером, указав абсолютную ширину и высоту.
Здесь вы можете найти более подробную информацию о \Config\Services::image().

Вот и все, что касается функциональности. На следующем шаге вам нужно создать маршруты для рендеринга представления и получения результатов. Итак, давай сделаем это.

Создадим маршруты (Routes)

Для создания маршрутов перейдите в файл app/Config -> Routes.php. Теперь добавьте следующие маршруты.

Routes.php

$routes->get('image', 'ImageController::index');
$routes->post('image', 'ImageController::store');

После добавления маршрутов запустим приложение, чтобы проверить результат.

Результат изменения размера изображения в CodeIgniter 4

Откройте браузер и выберите указанный маршрут в URL-адресе. У вас будет форма ниже.

Мы добавили правила проверки для изображения. Следовательно, если вы попытаетесь отправить форму без надлежащего изображения, она выдаст сообщение об ошибке проверки.

Теперь проверим конечный результат, загрузив картинку. Кроме того, проверьте размер этого изображения, чтобы убедиться, что размер изображения изменен или нет. После загрузки изображения вы получите ответ об успешном завершении, как показано ниже.

Теперь, для подтверждения, давайте перейдем к загруженному изображению и проверим его размер.

В результате вы можете увидеть, что размер изображения был изменен до заданной высоты и ширины. Изменив размер изображения, вы также можете уменьшить размер изображения.

Вывод

Мы использовали сервисный класс CodeIgniter 4 для управления изображением. Используя этот класс, мы изменили размер изображения, задав фиксированные высоту и ширину. Этот класс предоставляет множество других возможностей для работы с изображениями. После изменения размера изображения вы можете уменьшить размер изображения, и это повысит скорость и производительность вашего приложения. Я надеюсь, что этот пост окажется для вас полезным.

Codeigniter

0 + 0 -

MakeCodes
0
430