Bagaimana cara mengubah ukuran gambar dengan url di php?

Kelas dapat mengubah ukuran gambar ke ukuran tertentu menggunakan program konversi dan menyajikannya sebagai keluaran skrip saat ini

Jika tidak memungkinkan untuk menampilkan gambar yang diubah ukurannya, ini akan menampilkan gambar default

Anda dapat melakukannya dengan GD atau imagemagick; . htaccess tapi itu sudah lama hilang dari PC saya

Beberapa metode Imagemagick dari memori paling baik untuk meletakkan kode-kode ini pada halaman terpisah dan memanggil dengan .

  

// There can not be any code before this:

Aplikasi ini mendemonstrasikan operasi pengubahan ukuran gambar sederhana berdasarkan lebar dan tinggi gambar. Kami telah memutuskan untuk menggunakan framework Laravel PHP karena ini adalah salah satu framework PHP paling populer. Ini adalah kerangka kerja MVC sumber terbuka di PHP untuk membangun aplikasi web sederhana hingga kompleks. Laravel secara ketat mengikuti pola arsitektur MVC (Model-View-Controller). Ia dikenal dengan sintaksisnya yang indah dan elegan sebagai kerangka web

Mari selami untuk membuat aplikasi demo pengubahan ukuran gambar PHP ini. Aplikasi ini memberikan opsi untuk mengunggah gambar dan kemudian meminta pengguna untuk memasukkan lebar dan tinggi yang diinginkan dari gambar yang diubah ukurannya. Setelah mengirimkan permintaan pengubahan ukuran, aplikasi memanggil API Abstrak untuk mengembalikan gambar yang diubah ukurannya. Gambar asli dan gambar yang diubah ukurannya ditampilkan di UI aplikasi.  

Sebelum melangkah lebih jauh, berikut adalah beberapa prasyarat lingkungan pengembangan untuk membuat aplikasi demo ini

Prasyarat

1. PHP dan Laravel. Pastikan Anda memiliki runtime PHP 8 yang tersedia dengan Laravel. Anda dapat menginstal Laravel dengan manajer paket komposer

2. Akun Imgur. Anda memerlukan akun Imgur untuk menghosting gambar yang akan diubah ukurannya. Daftar untuk akun di Imgur. Anda juga memerlukan akses API Imgur dengan mendaftarkan aplikasi klien. Untuk melakukan itu, buka halaman pendaftaran Imgur

Dan isi data berikut ini

• Nama aplikasi. mengubah ukuran gambar
• Otorisasi. Otorisasi OAuth2 dengan URL panggilan balik
• Alihkan URL. https. //int. pembawa. sh/v2/auth/panggilan balik
• Surel. Berikan alamat email apa pun

Setelah dikirimkan, Anda akan mendapatkan Id Klien Imgur dan rahasia. Catat kedua kredensial ini

3. Buat proyek Laravel baru bernama image-resize dengan perintah komposer ini dijalankan dari terminal

composer create-project --prefer-dist laravel/laravel image-resize

Ini akan membuat direktori bernama image-resize di bawah direktori kerja saat ini di mana perintah dijalankan. Ini adalah direktori proyek dari aplikasi demo ini yang berisi semua kode dan dependensi boilerplate. Pastikan untuk mengubah ke direktori ini untuk menjalankan semua perintah selanjutnya dari terminal.    

4. Buka IDE favorit Anda dan periksa struktur direktori dari direktori proyek

Langkah 1. Uji Aplikasi Laravel Default

Mengikuti prasyarat, Anda harus dapat menguji Laravel default dengan meluncurkannya dari terminal

php artisan serve

Ini akan meluncurkan server web pengembangan yang menghosting aplikasi Laravel default di https. //127. 0. 0. 1. 8000

Langkah 2. Tambahkan Kunci API untuk Aplikasi Demo

Buka file lingkungan untuk proyek dan tambahkan dua entri variabel lingkungan baru untuk ID Klien Imgur dan kunci API Abstrak

Mengajukan. . lingkungan

IMGUR_CLIENT_ID=<YOUR_IMGUR_CLIENT_ID>

ABSTRACT_API_KEY=<YOUR_ABSTRACTAPI_KEY>

Langkah 3. Tambahkan kelas pembantu HTTP untuk Imgur dan Abstract API

Buat dua kelas pembantu, Imgur. php dan AbstractAPI. php di bawah subdirektori Http

Mengajukan. app/Http/Pembantu/imgur. php

Mengajukan. app/Http/Helpers/AbstractAPI. php

<?php
namespace App\Http\Helpers;

use Illuminate\Support\Facades\Http;

class AbstractAPI
{
   
    public function formatImage(array $data)
    {

        $res = Http::withHeaders([
            "Content-Type" => "application/json",
            "Accept" => "application/json"
        ])->post('https://images.abstractapi.com/v1/url/', $this->buildData($data));

        return $res->json();


    }

   
    private function buildData(array $data)
    {
        return $data = [
            'api_key' => env('ABSTRACT_SECRET'),
            'resize' => [
                'width' => $data['width'],
                'height' => $data['height'],
                'strategy' => 'exact',
            ],
            'url' => $data['url'],
        ];
    }

}

Kedua kelas pembantu ini masing-masing menangani panggilan API untuk Imgur dan AbstractAPI

API Imgur digunakan untuk mengunggah file gambar sumber dari aplikasi demo sebagai objek gambar dan menghostingnya sebagai URL. URL ini adalah masukan untuk API Pemrosesan dan Pengoptimalan Gambar AbstractAPI. API ini mengembalikan gambar yang diubah ukurannya dalam respons API sebagai URL lain. Parameter pengubahan ukuran untuk API mencakup strategi lebar dan tinggi serta orientasi. Lebar, nilai tinggi diteruskan dari UI aplikasi demo

Langkah 4. Tambahkan Pengontrol Baru Bernama ImageController

Dari terminal, tambahkan pengontrol baru bernama ImageController

php artisan make:controller ImageController

Ini akan membuat aplikasi file PHP baru/Http/Controllers/ImageController

Ganti konten default file dengan kode berikut

<?php
namespace App\Http\Controllers;

use App\Http\Helpers\AbstractAPI;
use App\Http\Helpers\Imgur;
use Illuminate\Http\Request;

class ImageController extends Controller
{
    public function index()
    {
        return view('welcome');
    }

    public function upload(Request $request)
    {
        $valid = $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
           'width' => 'required|numeric',
            'height' => 'required|numeric',
        ]);

        try {
            // upload to imgur and get the link
            $imgur = (new Imgur())->upload($request->file('image'));

            // get the image link
            if ($imgur['success'] === true || $imgur['status'] === 200) {
                $valid['url'] = $imgur['data']['link'];
                // send image link to abstract api
                $abstract = (new AbstractAPI())->formatImage($valid);

                return response()->json($abstract);
               
               
            }

            return response()->json([
                'success' => false,
                'message' => 'Something went wrong',
            ]);
        } catch (\Exception $e) {
            return response()->json([
                'success' => false,
                'message' => $e->getMessage(),
            ]);
        }

    }
}

Pengontrol ini menentukan titik akhir API khusus yang disebut upload. API ini menerima gambar dari UI dan memanggil Imgur dan AbstractAPI secara berurutan untuk mengembalikan gambar yang diubah ukurannya

Pengontrol ini juga menentukan tampilan beranda untuk UI

Langkah 5. Perbarui Rute Aplikasi

Anda harus mendaftarkan rute untuk aplikasi demo di Laravel. Hanya ada dua rute, '/' dan '/ upload' masing-masing untuk menampilkan halaman UI dan mengunggah gambar

Ganti konten definisi rute di bawah rute/web. php

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', [App\Http\Controllers\ImageController::class, 'index'])->name('home');
Route::post('/upload', [App\Http\Controllers\ImageController::class, 'upload'])->name('upload');

Langkah 6. Buat HTML dan JavaScript untuk UI Aplikasi Demo

Pada titik ini, semua logika PHP backend dibuat untuk aplikasi demo. Sekarang hal terakhir adalah halaman HTML. Anda dapat menggunakan tampilan HTML default dari aplikasi Laravel di bawah resources/view/welcome. Pedang. php dan ganti isinya dengan

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>AbstractAPI Demo</title>

        <!-- Fonts -->
        <link href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
        <!-- CSS only -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    </head>
    <body>
        <nav class="navbar bg-light">
            <div class="container-fluid">
                <span class="navbar-brand mb-0 h1">AbstractAPI Demo</span>
        </div>
        </nav>
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-md-8 col-offset-2 mt-5">
                    <div class="card">
                        <div class="card-header">
                            <h3>Image Resize</h3>
                        </div>
                        <div class="card-body">
                            <form id="imageForm">
                                @csrf
                                <div class="input-group mb-3">
                                    <label class="input-group-text" for="image">Upload</label>
                                    <input type="file" class="form-control" onchange="previewFile(this);" id="image" name="image" required>
                                </div>
                                
                                <div class="row mb-3" id="sizeTab">
                                    <div class="col">
                                        <label for="width">Width</label>
                                        <input type="number" class="form-control" id="width" name="width">
                                    </div>
                                    <div class="col">
                                        <label for="width">Height</label>
                                        <input type="number" class="form-control" id="height" name="height">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col" id="current_image" style="display: none;">
                                        <label for="">Original Image</label><br/>
                                        <img src="" id="original_image" class="img-fluid" alt=""><br/>
                                        <small id="original_image_size"></small>
                                    </div>
                                    <div class="col" id="new_image" style="display: none;">
                                        <label for="">New Image</label><br/>
                                        <img src="" id="resized_image" class="img-fluid" alt=""></br>
                                         <small id="resized_image_size"></small>
                                    </div>
                                </div>
                                <div class="row mb-3 text-center">
                                    <div class="col">
                                        <button type="submit" id="submit" class="btn btn-primary">Submit</button>
                                    </div>
                                    <div class="col">
                                        <button type="reset" id="reset" class="btn btn-danger">Reset</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <script>
               $("#reset").click(function(){

            $("#original_image").attr("src", "");
            $("#current_image").hide();
            $("#resized_image").attr("src", "");
            $("#new_image").hide();
        });

        function previewFile(input){
            $("#current_image").hide();
        var file = $("input[type=file]").get(0).files[0];

        if(file){
            console.log(file);
            $("#current_image").show();
            var reader = new FileReader();

            reader.onload = function(){
                $("#original_image").attr("src", reader.result);
            }

            reader.readAsDataURL(file);
            $("#original_image_size").text(file.size/1000 + " KB");
        }
    }

    $("#imageForm").submit(function(e){
        e.preventDefault();
        $("#submit").html('<div class="spinner-border text-danger" id="status" role="status"><span class="visually-hidden">Loading...</span></div>');
        $("#new_image").hide();
        var formData = new FormData(this);
        $.ajax({
            url: "{{ url('/upload') }}",
            type: 'POST',
            data: formData,
            success: function (data) {
                $("#resized_image").attr("src", data.url);
                $("#new_image").show();
                $("#resized_image_size").text(data.final_size/1000 + " KB");
                $("#submit").html('Submit');
            },
            error: function(data){
                $("#submit").html('Submit');
                console.log(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });
    </script>
    </body>
</html>

Ini adalah formulir web berbasis Bootstrap sederhana yang memungkinkan pengguna mengunggah gambar untuk diubah ukurannya dengan menentukan lebar dan tinggi target

Dengan ini, semua perubahan kode untuk aplikasi demo selesai. Pastikan untuk menyimpan semua file

Langkah 7. Luncurkan kembali Laravel Server

Luncurkan ulang server pengembangan Laravel dan sekarang Anda akan melihat UI aplikasi demo

Langkah 8. Uji Aplikasi Demo Pengubahan Ukuran Gambar

Sekarang Anda siap untuk menguji aplikasi. Unggah gambar sumber dari sistem file komputer Anda dan kirimkan formulir dengan menentukan lebar dan tinggi yang diinginkan.  

Setelah API Abstrak memproses gambar, file yang baru diubah ukurannya akan ditampilkan bersama dengan ukuran gambar target

Itu dia

Kami berangkat untuk membangun aplikasi demo ini untuk mengaktifkan aplikasi web berbasis PHP Laravel apa pun untuk melakukan pengubahan ukuran gambar sendiri. Dan kami telah mencapainya sekarang

AbstractAPI Image Processing and Optimization API melakukan tugas mengelola nuansa pengubahan ukuran gambar, sementara kami hanya berfokus pada membangun logika aplikasi dan UI frontend.  

FAQ

Bagaimana cara mengubah ukuran gambar?

Mengubah ukuran file gambar melibatkan teknik pemrosesan gambar digital untuk mengatur ulang piksel gambar sesuai dimensi ukuran yang diinginkan. Operasi pengubahan ukuran juga bergantung pada faktor-faktor tertentu seperti apakah gambar harus diperbesar atau diperkecil, dan apakah akan mempertahankan rasio aspek atau tidak. Namun, dengan menggunakan API dimungkinkan untuk mengubah ukuran gambar tanpa berurusan dengan kerumitan pemrosesan gambar. API Pemrosesan dan Pengoptimalan Gambar AbstractAPI menawarkan API sederhana untuk melakukan operasi pengubahan ukuran gambar, dengan opsi untuk menaikkan atau menurunkan skala, pengaturan orientasi, dan opsi potong.  

Bagaimana cara membuat gambar lebih kecil di PHP?

Aplikasi web berbasis PHP dapat menggunakan pustaka GD untuk melakukan operasi pengubahan ukuran gambar. GD memiliki serangkaian fungsi yang luas untuk manipulasi gambar, serta rendering, dan mendukung berbagai format file gambar. Alternatifnya, jika Anda ingin menghindari overhead pemrosesan gambar dalam logika bisnis PHP, Anda dapat menggunakan rute API. AbstractAPI Image Processing and Optimization API menawarkan API sederhana untuk melakukan operasi dasar terkait gambar untuk membuat ukuran gambar lebih kecil, lebih besar, atau memotong gambar. Menggunakan pustaka curl bawaan, mudah untuk memanggil API ini dari dalam kode PHP

Bisakah Anda mengubah ukuran gambar di URL?

Bagaimana cara mengubah ukuran gambar di PHP?

Bagaimana cara mengubah ukuran gambar di URL HTML?

Bagaimana cara mengubah ukuran gambar secara otomatis di PHP?