...
✅ WEB ja WordPressi uudised, teemad, pistikprogrammid. Siin jagame näpunäiteid ja parimaid veebisaidi lahendusi.

Kuidas pilte Laravelis üles laadida ja tihendada

20

Kas otsite, kuidas pilte Laravelis üles laadida ja kokku pakkida? Laravel pakub failide üleslaadimiseks lihtsat viisi. Ja piltide kokkusurumine üleslaadimise ajal on hea tava. Selles artiklis näitan teile, kuidas pilte Laravelis üles laadida ja kokku pakkida.

Miks on vaja pilte tihendada?

Piltidel on teie veebisaidil oluline roll. Kujutised lisavad külastajatele paremat UX-i ja pilkupüüdvat kogemust. Kuid samal ajal võib see tappa ka saidi jõudluse. Rasked pildid aeglustavad saiti. Seetõttu võtab teie saidi laadimine kaua aega. Kasutajatele ei meeldi aeglased veebisaidid. Kui teie saidi laadimine võtab rohkem aega, on teil suur tõenäosus, et kaotate oma vaatajaskonna. Veebisaidi tavapärane laadimisaeg on 2 sekundit. Peaksite hoolitsema selle eest, et teie saiti laaditaks 2 sekundi jooksul.

Kuigi lehekiiruse parandamiseks tuleb arvestada mitmete teguritega, on üks neist optimeeritud piltide kasutamine. Piltide tihendamine vähendab teie originaalpildi suurust kaotamata selle kvaliteeti. See aitab suurendada saidi kiirust.

Seda öeldes vaatame, kuidas pilte Laravelis üles laadida ja tihendada.

Piltide üleslaadimine Laravelis

Laravel pakub puhast viisi piltide üleslaadimiseks. Selle alustamiseks peame kõigepealt looma kataloogi, kuhu pildid salvestame. Avage juurkataloogis oma käsuviip ja käivitage järgmine käsk.

php artisan storage:link

See käsk loob kausta ‘public’ kataloogi ‘storage’.

Järgmisena looge vorm sisestatud faili sisestamise ja esitamise nupuga, lisades oma labafaili alloleva koodi.

<form action="{{ url('ROUTE_HERE') }}" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" name="profile_image" id="exampleInputFile">
    </div>
    {{ csrf_field() }}
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Ülalolevas HTML-is olen lisanud failisisendi nimega ‘profile_image’. Olen lisanud ka selle, {{ csrf_field() }}mis on vajalik Laraveli vormide esitamiseks.

Eeldades, et saadate postitustaotluse oma kontrolleri store()meetodile, kirjutage kood, mis salvestab pildi serverisse, nagu allpool.

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);
 
        //Compress Image Code Here
 
        return redirect('ROUTE_HERE')->with('success', "Image uploaded successfully.");
    }
}

See kood loob kordumatu failinime ja salvestab faili kataloogi ‘profile_images’. Kui seda pole olemas, genereerib Laravel kataloogi ‘profile_images’ automaatselt, kui seda pole.

Nagu varem öeldud, on parem üleslaadimise ajal pildi optimeerimine. Oleme pildi üleslaadimise koodiga valmis. Nüüd peame selle kokku suruma. Ma käsitlen kahte teenust – TinyPNG ja reSmush.it, mis pakub API-sid piltide tihendamiseks lennult. Vaatame neid ükshaaval.

Piltide tihendamine, kasutades Laraveli rakendust TinyPNG

Piltide tihendamiseks TinyPNG API abil peate hankima oma API võtme. Protsess on sirgjooneline. Registreerige oma e-posti aadress nende juures ja nad saadavad teie arendaja võtme.

Kui olete API võtme kätte saanud, lisage see .envfaili.

Pärast seda installige TinyPNG pakett käsuga:

composer require tinify/tinify

Paketi installimisel peame kirjutama koodi, mis tihendab üleslaaditud pilti TinyPNG abil.

Kirjutage tihenduskood vahetult pildi üleslaadiva joone alla.

//Compress Image Code Here
$filepath = public_path('storage/profile_images/'.$filenametostore);
 
try {
    TinifysetKey(env("TINIFY_API_KEY"));
    $source = TinifyfromFile($filepath);
    $source->toFile($filepath);
} catch(TinifyAccountException $e) {
    // Verify your API key and account limit.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
} catch(TinifyClientException $e) {
    // Check your source image and request options.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
} catch(TinifyServerException $e) {
    // Temporary issue with the Tinify API.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
} catch(TinifyConnectionException $e) {
    // A network connection error occurred.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
} catch(Exception $e) {
    // Something else went wrong, unrelated to the Tinify API.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
}

Ülaltoodud kood võtab üleslaaditud kataloogist pildi, saadab selle tihendamiseks TinyPNG-serverisse ja salvestab pärast vastuse saamist tihendatud pildi samasse kataloogi.

See protsess kulgeb taustal. Te ei pea muretsema, kuidas pilt läheb TinyPNG-serverisse, kuidas see saab API-vastuse. TinyPNG kogu teeb teie eest kõik ülesanded.

Proovige pilt kohe üles laadida ja peaksite nägema, et teie pilt tihendatakse.

Piltide tihendamine Laraveli saidil reSmush.it

TinyPNG töötab hästi, kuid sellel on piirang optimeerida 500 tasuta pilti kuus. Kui soovite tihendada rohkem kui 500 pilti, peate nende eest maksma. Teise võimalusena saavad kasutajad pildi tihendamiseks valida reSmush.it tasuta teenuse. Selle artikli kirjutamise ajal tihendab reSmush.it enam kui 7 miljardit pilti. Sellest piisab, kui öelda selle teenuse populaarsuse kohta.

Niisiis, kirjutage kood, mis tihendab pilte, kasutades Laraveli reSmush.it.

//Compress Image Code Here
$filepath = public_path('storage/profile_images/'.$filenametostore);
$mime = mime_content_type($filepath);
$output = new CURLFile($filepath, $mime, $filenametostore);
$data = ["files" => $output];
 
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://api.resmush.it/?qlty=80');
curl_setopt($ch, CURLOPT_POST,1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
$result = curl_exec($ch);
if (curl_errno($ch)) {
    $result = curl_error($ch);
}
curl_close ($ch);
 
$arr_result = json_decode($result);
 
// store the optimized version of the image
$ch = curl_init($arr_result->dest);
$fp = fopen($filepath, 'wb');
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);

Olen ?qlty=80ülaltoodud koodis edastanud kvaliteediväärtuseks 80. Saab mängida erinevate kvaliteediväärtuste edastamisega.

Loodan, et saate aru, kuidas pilte Laravelis üles laadida ja kokku pakkida. Tahaksin kuulda teie mõtteid ja ettepanekuid allpool olevas kommentaaride jaotises.

seotud artiklid

See veebisait kasutab teie kasutuskogemuse parandamiseks küpsiseid. Eeldame, et olete sellega rahul, kuid saate soovi korral loobuda. Nõustu Loe rohkem