Kuinka ladata ja rajata kuvaa Laravelissa käyttämällä imgAreaSelect- ja Intervention-kuvakirjastoa
Äskettäin yksi lukijoistamme pyysi kirjoittamaan artikkelin kuvien lataamisesta ja rajaamisesta Laraveliin. Aiemmin julkaisin samaa aihetta koskevan artikkelin PHP: n lataamiseen, rajaamiseen ja kuvan koon muuttamiseen PHP: ssä. Mutta kun on kyse Laravelista, meidän on tehtävä muutoksia Laravelin standardien mukaisesti. Tässä artikkelissa tutkitaan, miten kuvia ladataan ja rajataan Laraveliin.
Tässä opetusohjelmassa aion käyttää kahta kirjastoa – imgAreaSelect ja Intervention Image.
imgAreaSelect on jQuery-laajennus, joka mahdollistaa kuvien rajaamisen valitsemalla kuvan suorakulmaisen alueen. Se on kevyt laajennus ja helppo käyttää.
Toisaalta Intervention Image on kuvankäsittely- ja manipulointikirjasto. Tämä kirjasto auttaa meitä luomaan, muokkaamaan ja säveltämään kuvia palvelinpuolella.
Tässä opetusohjelmassa käytän imgAreaSelect-sovellusta saadaksesi rajatun kuvan ja Intervention-kuvakirjaston koordinaatit kuvan rajaamiseksi palvelinpuolelle koordinaattien mukaisesti.
Päästä alkuun
Aloittamiseksi sinun olisi pitänyt asentaa Laravel. Jos et ole vielä luonut, asenna se komennolla:
composer create-project --prefer-dist laravel/laravel laravel-devYllä oleva komento asettaa sinulle Laravel-projektin nimeltä ‘laravel-dev’.
Asenna seuraavaksi Intervention kuvakirjasto Laravel-projektiisi. Suorita alla oleva komento projektin juurihakemistosta.
composer require intervention/imageKun olet asentanut kirjaston, avaa config/app.phptiedosto ja lisää siihen seuraavat rivit.
Lisää tämän paketin palveluntarjoajat $providersmatriisiin.
InterventionImageImageServiceProvider::classLisää julkisivu $aliasestaulukkoon.
'Image' => InterventionImageFacadesImage::classLataa lopuksi imgAreaSelect- laajennus. Kopioi ladatusta ZIP-tiedostosta kuvat, CSS-, JS-tiedosto ja liitä Laravel-projektin julkiseen kansioon. Pohjimmiltaan rakenteen tulisi olla kuin alla oleva kuvakaappaus.
Kuinka käyttää imgAreaSelect-ohjelmaa
Rakennamme sille rakenteen, koska aiomme käyttää imgAreaSelect-laajennuksen CSS: ää ja JS: ää. Luo resources/views/layouts/app.blade.phptiedosto ja lisää siihen alla oleva koodi.
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
@yield('style')
</head>
<body>
<div id="app">
@yield('content')
</div>
@yield('footer')
</body>
</html>Tämä tiedosto toimii yhtenäisenä tiedostona kaikille terille. Paikkamerkkien (@yield) avulla koodi voidaan sijoittaa terätiedostoon vastaaviin paikkoihin, kuten otsikkoon, alatunnisteeseen jne.
Luo image.blade.phptiedosto resources/viewshakemistoon. Tällä korttitiedostolla on seuraava koodi.
image.blade.php
@extends('layouts.app')
@section('style')
<link rel="stylesheet" href="{{ asset('css/imgareaselect.css') }}" />
@endsection
@section('content')
@if(session('success'))
<div class="alert alert-success">{{session('success')}}</div>
@endif
<div class="container mt-5">
<form action="{{ url('image') }}" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputImage">Image:</label>
<input type="file" name="profile_image" id="exampleInputImage" class="image" required>
<input type="hidden" name="x1" value="" />
<input type="hidden" name="y1" value="" />
<input type="hidden" name="w" value="" />
<input type="hidden" name="h" value="" />
</div>
{{ csrf_field() }}
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div class="row mt-5">
<p><img id="previewimage" style="display:none;"/></p>
@if(session('path'))
<img src="{{ session('path') }}" />
@endif
</div>
</div>
@endsection
@section('footer')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{{ asset('js/jquery.imgareaselect.min.js') }}"></script>
<script>
jQuery(function($) {
var p = $("#previewimage");
$("body").on("change", ".image", function(){
var imageReader = new FileReader();
imageReader.readAsDataURL(document.querySelector(".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>
@endsectionOlet ehkä huomannut joitakin juttuja edellä tiedosto kuten @extends('layouts.app'), @section('style'), @section('content')jne Nämä osiot menevät vastaavissa paikoissa app.blade.php. Käyttäjä saa paremman käsityksen siitä, kun tarkastelet tämän sivun lähdettä selaimessa.
Voit kutsua tämän näkymän luomalla ohjaimen komennolla:
php artisan make:controller ImageController --resourceLisää tämän ohjaimen viite reittitiedostoon.
reitit / web.php
Route::resource('image', 'ImageController');Avaa editorissa ImageController ja kutsu näkymätiedosto hakemistomenetelmällä.
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use Image;
class ImageController extends Controller
{
/**
* Display a listing of the resource.
*
* @return IlluminateHttpResponse
*/
public function index()
{
return view('image');
}
.....
}Suorita php artisan servekomento ja näet lomakkeen alla olevassa URL-osoitteessa.
http://localhost:8000/imageKun lataat kuvan, sinun pitäisi nähdä esikatselukuva lomakkeen alla. Tästä esikatselusta voit valita osan kuvasta, jonka haluat rajata.
Lataa ja rajaa kuva käyttämällä interventiokuvakirjastoa
Tässä vaiheessa olemme saaneet valmiiksi asiakaspuolen koodin, jolla käyttäjä voi valita osan kuvasta, jonka haluaa rajata. Seuraava työ on kuvan rajaaminen ja tallentaminen palvelimelle. Kuvan tallentamiseksi palvelimelle käytän Laravel-tallennusominaisuutta, jossa luomme symboli linkistä ‘storage’ -kansioon. Voit luoda symlinkin suorittamalla komennon:
php artisan storage:linkTämä komento luo ‘storage’ -hakemiston ‘public’ -kansioon.
Ohjaimeemme sisällytimme jo julkisivun, use Image;joten sinun on hyvä edetä Intervention-kuvakirjaston avulla kuvan rajaamiseen palvelinpuolella. Ohjaimen store()menetelmällä tulisi olla alla oleva koodi:
/**
* Store a newly created resource in storage.
*
* @param IlluminateHttpRequest $request
* @return IlluminateHttpResponse
*/
public function store(Request $request)
{
if($request->hasFile('profile_image')) {
//get filename with extension
$filenamewithextension = $request->file('profile_image')->getClientOriginalName();
//get filename without extension
$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
//get file extension
$extension = $request->file('profile_image')->getClientOriginalExtension();
//filename to store
$filenametostore = $filename.'_'.time().'.'.$extension;
//Upload File
$request->file('profile_image')->storeAs('public/profile_images', $filenametostore);
if(!file_exists(public_path('storage/profile_images/crop'))) {
mkdir(public_path('storage/profile_images/crop'), 0755);
}
// crop image
$img = Image::make(public_path('storage/profile_images/'.$filenametostore));
$croppath = public_path('storage/profile_images/crop/'.$filenametostore);
$img->crop($request->input('w'), $request->input('h'), $request->input('x1'), $request->input('y1'));
$img->save($croppath);
// you can save crop image path below in database
$path = asset('storage/profile_images/crop/'.$filenametostore);
return redirect('image')->with(['success' => "Image cropped successfully.", 'path' => $path]);
}
}Tässä koodissa tallennamme kuvan rajatun version hakemistoon ‘public / storage / profile_images / crop’. Sen tallentamisen jälkeen ohitamme rajatun kuvan polun takaisin näkymään. Ja katselutiedostoon lisäsimme jo koodin, joka näyttää rajatun kuvan loppukäyttäjälle.
Aseta kuvan suurin leveys
Joskus käyttäjät saattavat haluta määritellä kuvan rajausversiolle enimmäisleveyden. ImgAreaSelect-laajennus tarjoaa useita vaihtoehtoja, kuten aspektisuhde, maxWidth, maxHeight jne., Jotta kuvan lopputulos voidaan mukauttaa. Käyttäjä voi käyttää maxWidth-vaihtoehtoa muuttamalla JavaScript-koodia seuraavasti:
$('#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);
}
});Kyse on siitä, miten kuvia ladataan ja rajataan Laraveliin. Toivon, että sait tietää kuinka käsitellä kuvien rajaamista. Haluaisin kuulla ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.