Як завантажити, обрізати та змінити розмір зображення за допомогою jQuery та PHP

Останнє оновлення Жов 17, 2021

Зміст

Завантаження, обрізання та зміна розміру зображення на стороні сервера

Встановіть максимальну ширину зображення

Якщо у вас веб-сайт, можливо, ви захочете обрізати зображення за певних сценаріїв. Скажімо, ви хочете дозволити користувачеві обрізати свої зображення профілю перед завантаженням. У цій статті ми вивчаємо, як завантажувати, обрізати та змінювати розмір зображення за допомогою imgAreaSelect та PHP.

Ми можемо сказати, що коли ми обрізаємо зображення, ми фактично змінюємо його розмір, коригуючи його за допомогою наданих координат обрізаної частини.

imgAreaSelect – це плагін jQuery, який забезпечує функцію обрізання зображень. Це легкий плагін і простий у використанні.

Для початку вам потрібно використовувати плагін imgAreaSelect та бібліотеку зображень Intervention. За допомогою imgAreaSelect ми вибираємо область зображення, яку потрібно обрізати, а бібліотека зображень Internention допомагає нам зберігати оригінальну та копіювану версію зображення на сервері.

Сказавши це, давайте подивимось, як завантажити, обрізати та змінити розмір зображення за допомогою jQuery та PHP.

Встановлення

Завантажте плагін imgAreaSelect за вказаним посиланням. Для встановлення Interventon Image я рекомендую використовувати Composer. Виконайте команду нижче в кореневому каталозі проекту, щоб встановити бібліотеку зображень Intervention.

composer require intervention/image

Завершивши, переконайтеся, що структура каталогу виглядає як знімок екрана нижче.

Як користуватися imgAreaSelect

Для того, щоб використовувати imgAreaSelect, нам спочатку потрібно включити їх CSS і JS-файл разом з бібліотекою jQuery.

<link rel="stylesheet" href="css/imgareaselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/jquery.imgareaselect.js"></script>

Далі нам потрібна проста форма, де користувач може переглядати зображення та подавати його на обробку на стороні сервера.

<form action="crop.php" method="post" enctype="multipart/form-data">
    Upload Image: <input type="file" name="image" id="image" />
    <input type="hidden" name="x1" value="" />
    <input type="hidden" name="y1" value="" />
    <input type="hidden" name="w" value="" />
    <input type="hidden" name="h" value="" /><br><br>
    <input type="submit" name="submit" value="Submit" />
</form>
 
<p><img id="previewimage" style="display:none;"/></p>

У наведеній вище формі буде відображена кнопка введення та подання файлу. Я взяв приховані поля у формі, які потрібно буде обрізати зображення на стороні сервера. В основному ці приховані поля надсилають координати зображення для його обрізання.

Коли користувач переглядає зображення, ми покажемо зображення, де користувач може вибрати область, яку він повинен обрізати. Наведений нижче код дозволяє користувачеві переглянути зображення та вибрати область зображення для обрізання.

<script>
jQuery(function($) {
 
    var p = $("#previewimage");
    $("body").on("change", "#image", function(){
 
        var imageReader = new FileReader();
        imageReader.readAsDataURL(document.getElementById("image").files[0]);
     
        imageReader.onload = function (oFREvent) {
            p.attr('src', oFREvent.target.result).fadeIn();
        };
    });
 
    $('#previewimage').imgAreaSelect({
        onSelectEnd: function (img, selection) {
            $('input[name="x1"]').val(selection.x1);
            $('input[name="y1"]').val(selection.y1);
            $('input[name="w"]').val(selection.width);
            $('input[name="h"]').val(selection.height);            
        }
    });
});
</script>

Завантаження, обрізання та зміна розміру зображення на стороні сервера

Після подання форми він переспрямовує до crop.phpфайлу, куди ми завантажуємо та обрізаємо зображення на стороні сервера. Цей файл приймає введення файлу та координати зображення для обрізання.

Спочатку включимо середовище бібліотеки Intervention Image.

<?php
require 'vendor/autoload.php';
 
use InterventionImageImageManagerStatic as Image;

Я збираюся використовувати crop()метод бібліотеки для створення обрізаної версії оригінального зображення. Параметрами функції crop() є ширина, висота та координати осі x та осі y. Ви можете прочитати більше про це в їх документації.

crop.php

<?php
require 'vendor/autoload.php';
 
use InterventionImageImageManagerStatic as Image;
 
if(isset($_POST['submit'])) {
     
    if(isset($_FILES['image']['name']) && !empty($_FILES['image']['name'])) {
 
        if(!file_exists('images')) {
            mkdir('images', 0755);
        }
 
        $filename = $_FILES['image']['name'];
        $filepath = 'images/'. $filename;
        move_uploaded_file($_FILES['image']['tmp_name'], $filepath);
         
        if(!file_exists('images/crop')) {
            mkdir('images/crop', 0755);
        }
 
        // crop image
        $img = Image::make($filepath);
        $croppath = 'images/crop/'. $filename;
 
        $img->crop($_POST['w'], $_POST['h'], $_POST['x1'], $_POST['y1']);
        $img->save($croppath);
 
        echo "<img src='". $croppath ."' />";
    }
}

Це воно! Тепер, якщо ви протестуєте потік, ви отримаєте оригінальну та обрізану версію зображень, що зберігаються в каталогах ‘images’ та ‘crop’ відповідно.

Встановіть максимальну ширину зображення

Іноді користувач може захотіти визначити максимальну ширину для обрізаних версій зображення. imgAreaSelect надає кілька варіантів, таких як аспект співвідношення, maxWidth, maxHeight тощо, щоб налаштувати кінцевий результат зображення. Користувач може використовувати опцію maxWidth, щоб встановити максимальну ширину зображення.

$('#previewimage').imgAreaSelect({
    maxWidth: '1000', // this value is in pixels
    onSelectEnd: function (img, selection) {
        $('input[name="x1"]').val(selection.x1);
        $('input[name="y1"]').val(selection.y1);
        $('input[name="w"]').val(selection.width);
        $('input[name="h"]').val(selection.height);            
    }
});

Сподіваюся, ви розумієте, як завантажувати, обрізати та змінювати розмір зображення за допомогою jQuery та PHP. Я хотів би знати ваші думки в розділі коментарів нижче.

Пов’язані статті

Джерело запису: artisansweb.net