Etsitkö kuinka ladata ja pakata kuvia Laraveliin? Laravel tarjoaa helpon tavan tiedostojen lataamiseen. Ja kuvien pakkaaminen lataushetkellä on hyvä käytäntö. Tässä artikkelissa näytän, kuinka kuvia voidaan ladata ja pakata Laravelissa.
Miksi kuvia on pakattava?
Kuvilla on tärkeä rooli verkkosivustollasi. Kuvat lisäävät UX: n ja katseenvangitsijakokemusta vierailijoille. Mutta samalla se voi myös tappaa sivuston suorituskyvyn. Raskaat kuvat hidastavat sivustoa. Tämän seurauksena sivustosi lataaminen kestää kauan. Käyttäjät eivät pidä hitaista verkkosivustoista. Jos sivustosi lataaminen vie enemmän aikaa, menetät yleisösi suurella todennäköisyydellä. Sivuston tavallinen latausaika on 2 sekuntia. Varmista, että sivustosi latautuu 2 sekunnin kuluessa.
Vaikka on olemassa useita tekijöitä, jotka on otettava huomioon sivun nopeuden parantamiseksi, yksi niistä on optimoitujen kuvien käyttö. Kuvien pakkaaminen pienentää alkuperäisen kuvan kokoa menettämättä sen laatua. Se auttaa lisäämään sivuston nopeutta.
Tämän sanotaan, katsotaanpa, kuinka kuvia ladataan ja pakataan Laravelissa.
Kuvien lataaminen Laraveliin
Laravel tarjoaa puhtaan tavan ladata kuvia. Aloittamiseksi meidän on ensin luotava hakemisto, johon tallennamme kuvat. Avaa komentokehote juurihakemistosta ja suorita alla oleva komento.
php artisan storage:linkTämä komento luo ‘storage’ -hakemiston ‘public’ -kansioon.
Luo seuraavaksi lomake tiedostosyötöllä ja lähetä-painikkeella lisäämällä alla oleva koodi blade-tiedostoon.
<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>Yllä olevaan HTML-koodiin olen lisännyt tiedostosyötteen nimellä ‘profile_image’. Olen myös lisännyt, {{ csrf_field() }}mikä vaaditaan Laravel-lomakkeiden lähettämiseen.
Oletetaan, että lähetät postituspyynnön ohjaimen store()menetelmälle, kirjoita koodi, joka tallentaa kuvan palvelimelle alla olevan mukaisesti.
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.");
}
}Tämä koodi luo yksilöllisen tiedostonimen ja tallentaa tiedoston hakemistoon ‘profile_images’. Laravel luo automaattisesti ‘profile_images’ -hakemiston kohtaan ‘public / storage’, jos sitä ei ole.
Kuten aiemmin todettiin, on parempi tapa optimoida kuva lataushetkellä. Olemme ladanneet kuvan latauskoodin. Nyt meidän on pakattava se. Aion kattaa 2 palvelua – TinyPNG: n ja reSmush.it: n, joka tarjoaa API: t pakkaamaan kuvia lennossa. Katsotaanpa ne yksi kerrallaan.
Pakkaa kuvat TinyPNG: llä Laravelissa
Kuvien pakkaamiseksi TinyPNG-sovellusliittymän avulla sinun on hankittava API-avain. Prosessi on suora eteenpäin. Rekisteröi sähköpostiosoitteesi heille, niin he lähettävät kehittäjäavaimesi.
Kun olet saanut API-avaimen, lisää se .envtiedostoon.
Asenna tämän jälkeen TinyPNG-paketti komennolla:
composer require tinify/tinifyPaketin asennuksen yhteydessä meidän on kirjoitettava koodi, joka pakkaa ladatun kuvan TinyPNG: n avulla.
Kirjoita pakkauskoodi heti kuvan lataavan rivin alle.
//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());
}Yllä oleva koodi ottaa kuvan ladatusta hakemistosta, lähettää sen TinyPNG-palvelimelle pakkaamista varten ja saatuaan vastauksen tallentaa pakatun kuvan samaan hakemistoon.
Tämä prosessi kulkee taustalla. Sinun ei tarvitse huolehtia siitä, miten kuva menee TinyPNG-palvelimelle, miten se saa API-vastauksen. TinyPNG-kirjasto tekee kaikki tehtävät puolestasi.
Yritä ladata kuva nyt, ja sinun pitäisi nähdä, että kuva pakataan.
Pakkaa kuvat käyttämällä reSmush.it-tiedostoa Laravelissa
TinyPNG toimii hyvin, mutta sillä on rajoitettu optimoimaan 500 ilmaista kuvaa kuukaudessa. Jos haluat pakata yli 500 kuvaa, sinun on maksettava niistä. Vaihtoehtoisesti käyttäjät voivat valita ilmaisen reSmush.it-palvelun kuvan pakkaamiseksi. Tämän artikkelin kirjoittamisen aikana reSmush.it pakkaa yli 7 miljardia kuvaa. Tämä riittää sanomaan tämän palvelun suosiosta.
Kirjoita siis koodi, joka pakkaa kuvat käyttämällä reSmush.it-tiedostoa Laravelissa.
//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 läpäissyt laatuarvoksi 80 ?qlty=80edellisessä koodissa. Voit pelata läpäisemällä eri laatuarvot.
Toivon, että ymmärrät kuinka ladata ja pakata kuvia Laraveliin. Haluaisin kuulla ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.