...
✅ WEB- och WordPress -nyheter, teman, plugins. Här delar vi tips och bästa webbplatslösningar.

Hur man laddar upp och komprimerar bilder i Laravel

16

Letar du efter hur du laddar upp och komprimerar bilder i Laravel? Laravel är ett enkelt sätt för filöverföring. Och att komprimera bilderna vid tidpunkten för uppladdningen är en bra praxis. I den här artikeln visar jag dig hur du laddar upp och komprimerar bilder i Laravel.

Varför behöver du komprimera bilder?

Bilder spelar en viktig roll på din webbplats. Bilder ger bättre UX och iögonfallande upplevelse för besökarna. Men samtidigt kan det också döda webbplatsens prestanda. Tunga bilder saktar ner webbplatsen. Som ett resultat tar det lång tid att ladda din webbplats. Användare gillar inte långsamma webbplatser. Om det tar längre tid att ladda din webbplats är det en stor chans att du tappar din publik. Standard laddningstid för en webbplats är 2 sekunder. Du bör se till att din webbplats laddas inom två sekunder.

Även om det finns flera faktorer som måste tas i beaktande för att förbättra sidhastigheten, är en av dem användningen av optimerade bilder. Komprimering av bilder minskar storleken på din originalbild utan att förlora kvaliteten. Det hjälper till att öka webbplatsens hastighet.

Med detta sagt, låt oss se hur man laddar upp och komprimerar bilder i Laravel.

Ladda upp bilder i Laravel

Laravel ger ett rent sätt att ladda upp bilderna. För att komma igång med det måste vi först skapa en katalog där vi kommer att lagra bilderna. Öppna kommandotolken i rotkatalogen och kör kommandot nedan.

php artisan storage:link

Detta kommando skapar en "lagring" -katalog under "offentlig" -mappen.

Skapa sedan ett formulär med inmatnings- och skicka-knappen genom att lägga till koden nedan i din bladfil.

<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>

I ovanstående HTML har jag lagt till en filinmatning med namnet ‘profile_image’. Jag har också lagt till {{ csrf_field() }}som krävs för att skicka Laravel-formulär.

Nu, förutsatt att du skickar postförfrågan till din controllerns store()metod, skriv en kod som lagrar bilden på servern enligt nedan.

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.");
    }
}

Den här koden skapar ett unikt filnamn och lagrar filen i katalogen ‘profile_images’. Laravel genererar automatiskt en ‘profile_images’ -katalog under ‘public / storage’ om den inte finns.

Som sagt tidigare är det bättre att optimera bilden vid uppladdningen. Vi är klara med att ladda upp en bild. Nu måste vi komprimera det. Jag ska täcka 2 tjänster – TinyPNG och reSmush.it som ger API: erna för att komprimera bilder i farten. Låt oss se dem en efter en.

Komprimera bilder med TinyPNG i Laravel

För att komprimera bilder med TinyPNG API måste du hämta din API-nyckel. Processen är enkel. Registrera din e-postadress med dem så skickar de din utvecklarnyckel.

När du har fått API-nyckeln, lägg till den i .envfilen.

Efter detta installerar du ett TinyPNG-paket med kommandot:

composer require tinify/tinify

Vid installation av paket måste vi skriva en kod som komprimerar den uppladdade bilden med TinyPNG.

Skriv en kompressionskod precis under raden som laddar upp bilden.

//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());
}

Ovanstående kod tar en bild från den uppladdade katalogen, skickar den till TinyPNG-servern för komprimering, och efter att ha fått svar lagrar den komprimerade bilden i samma katalog.

Denna process körs i bakgrunden. Du behöver inte oroa dig för hur bilden går till TinyPNG-servern, hur den får API-svaret. TinyPNG-biblioteket gör alla uppgifter åt dig.

Försök att ladda upp bilden nu och du bör se din bild komprimeras.

Komprimera bilder med reSmush.it i Laravel

TinyPNG fungerar bra men det har en begränsning att optimera 500 gratis bilder per månad. Om du vill komprimera mer än 500 bilder måste du betala för dem. Alternativt kan användare välja en gratis tjänst på reSmush.it för bildkomprimering. När denna artikel skrivs komprimerar reSmush.it mer än 7 miljarder bilder. Detta räcker för att säga om populariteten för denna tjänst.

Så skriv koden nedan som komprimerar bilder med reSmush.it i Laravel.

//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);

Jag har klarat kvalitetsvärdet som 80 ?qlty=80i ovanstående kod. Du kan spela med att passera olika kvalitetsvärden.

Jag hoppas att du förstår hur du laddar upp och komprimerar bilder i Laravel. Jag skulle vilja höra dina tankar och förslag i kommentarsektionen nedan.

relaterade artiklar

Inspelningskälla: artisansweb.net

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer