{"id":28402,"date":"2021-05-22T11:04:00","date_gmt":"2021-05-22T08:04:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28402"},"modified":"2021-10-17T04:44:49","modified_gmt":"2021-10-17T01:44:49","slug":"andra-storlek-pa-bild-i-laravel-med-hjalp-av-interventionsbildbibliotek","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/andra-storlek-pa-bild-i-laravel-med-hjalp-av-interventionsbildbibliotek\/","title":{"rendered":"\u00c4ndra storlek p\u00e5 bild i Laravel med hj\u00e4lp av interventionsbildbibliotek"},"content":{"rendered":"

Nyligen fr\u00e5gade en av v\u00e5ra l\u00e4sare hur man \u00e4ndrar storlek p\u00e5 bilden i Laravel. Bild\u00e4ndring \u00e4r en vanlig uppgift f\u00f6r utvecklare. Utvecklarna b\u00f6r g\u00f6ra det korrekt. Det \u00e4r en bra praxis att \u00e4ndra storlek p\u00e5 bilderna enligt dess beh\u00e5llarstorlek. Det hj\u00e4lper dig att f\u00f6rb\u00e4ttra sidhastigheten. I den h\u00e4r artikeln studerar vi hur man \u00e4ndrar storlek p\u00e5 bilden i Laravel med hj\u00e4lp av bildbiblioteket Intervention.<\/p>\n

Intervention Bildbibliotek<\/a> \u00e4r ett enkelt s\u00e4tt att \u00e4ndra storlek p\u00e5 bilderna. Detta bibliotek anv\u00e4nder GD Library och Imagick f\u00f6r bildmanipulation under huven.<\/p>\n

Varf\u00f6r ska du \u00e4ndra storlek p\u00e5 bilder?<\/h3>\n

Ta exemplet p\u00e5 ett galleri. N\u00e4r vi arbetar p\u00e5 ett galleri visar vi normalt den lilla miniatyrbilden i listan. N\u00e4r n\u00e5gon klickar p\u00e5 miniatyrbilden visar vi en originalbild. H\u00e4r \u00e4r miniatyrerna den \u00e4ndrade storleken p\u00e5 originalbilden.<\/p>\n

L\u00e5t oss s\u00e4ga att din ursprungliga bildstorlek \u00e4r 500 500 och din miniatyrbeh\u00e5llare har storlek 200 200. I det h\u00e4r fallet b\u00f6r du \u00e4ndra storlek p\u00e5 originalbilden enligt miniatyrens beh\u00e5llarstorlek. Att anv\u00e4nda en storbildsbild i den lilla beh\u00e5llaren \u00e4r en d\u00e5lig praxis. Det p\u00e5verkar webbplatsens prestanda.<\/p>\n

Detta \u00e4r ett exempel p\u00e5 varf\u00f6r vi ska \u00e4ndra storlek p\u00e5 bilderna. Det finns ocks\u00e5 m\u00e5nga andra. Med detta sagt, l\u00e5t oss ta en titt p\u00e5 hur du \u00e4ndrar storleken p\u00e5 bilden i Laravel med hj\u00e4lp av Intervention Image Library.<\/p>\n

Installation<\/h3>\n

F\u00f6r att komma ig\u00e5ng m\u00e5ste du installera Intervention Image-biblioteket i ditt Laravel-projekt. Du b\u00f6r ha Composer<\/a> installerat p\u00e5 ditt system. \u00d6ppna terminalen i din projektkatalog och k\u00f6r kommandot nedan:<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
Efter att ha installerat biblioteket, \u00f6ppna config\/app.php<\/code>filen och l\u00e4gg till f\u00f6ljande rader i den.<\/p>\n
L\u00e4gg till tj\u00e4nsteleverant\u00f6ren f\u00f6r detta paket i $providers<\/code>matrisen.<\/p>\n
InterventionImageImageServiceProvider::class<\/code><\/pre>\n
L\u00e4gg sedan till fasaden i $aliases<\/code>matrisen.<\/p>\n
'Image' => InterventionImageFacadesImage::class<\/code><\/pre>\n
\u00c4ndra storlek p\u00e5 bild i Laravel<\/h3>\n
F\u00f6r att \u00e4ndra storlek p\u00e5 bilden m\u00e5ste vi f\u00f6rst skriva kod f\u00f6r att ladda upp en bild. S\u00e5 skapa f\u00f6rst en katalog d\u00e4r vi kommer att lagra bilderna. G\u00e5 \u00f6ver till terminalen och k\u00f6r kommandot:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Detta kommando skapar en "lagring" -katalog under "offentlig" -mappen. I mappen ’lagring’ lagrar vi en fullst\u00e4ndig och en miniatyrversion av bilderna.<\/p>\n
Skapa sedan ett formul\u00e4r i din vyfil. Jag l\u00e4gger ocks\u00e5 till kod f\u00f6r framg\u00e5ngsmeddelandet i bladfilen.<\/p>\n
@if (session('success'))\n\u00a0\u00a0\u00a0\u00a0<div class=\"alert alert-success\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{ session('success') }}\n\u00a0\u00a0\u00a0\u00a0<\/div>\n@endif\n<form action=\"{{ url('PASS_ACTION_URL') }}\" method=\"post\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleInputFile\">File input<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" name=\"profile_image\" id=\"exampleInputFile\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0{{ csrf_field() }}\n\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-default\">Submit<\/button>\n<\/form><\/code><\/pre>\n
Ers\u00e4tt platsh\u00e5llaren ’PASS_ACTION_URL’ med din rutt.<\/p>\n
I styrenheten \u00e4r det n\u00f6dv\u00e4ndigt att l\u00e4gga till fasaden ’Bild’ p\u00e5 ett bibliotek som vi har lagt till i config\/app.php<\/code>filen.<\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllers;\n\u00a0\nuse IlluminateHttpRequest;\nuse Image;\n\u00a0\nclass ImageController extends Controller\n{\n\u00a0\n}<\/code><\/pre>\n
Genom att l\u00e4gga till fasaden kan vi anropa funktioner i Intervention Image Library. I koden nedan laddar jag upp bilden p\u00e5 tv\u00e5 st\u00e4llen. Den ena \u00e4r originalbilden under mappen ’profile_images’. Den andra finns under katalogen ’profile_images \/ thumbnail’. Jag laddar f\u00f6rst upp originalbilden i miniatyrmappen och \u00e4ndrar sedan storlek p\u00e5 den.<\/p>\n
public function store(Request $request)\n{\n\u00a0\u00a0\u00a0\u00a0if($request->hasFile('profile_image')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename with extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenamewithextension = $request->file('profile_image')->getClientOriginalName();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename without extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get file extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$extension = $request->file('profile_image')->getClientOriginalExtension();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/filename to store\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenametostore = $filename.'_'.time().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Upload File\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images', $filenametostore);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images\/thumbnail', $filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Resize image here\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$thumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$filenametostore);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->save($thumbnailpath);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('image')->with('success', \"Image uploaded successfully.\"); \/\/change the route as per your flow\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
H\u00e4r \u00e4ndrar jag storleken p\u00e5 bilden proportionellt. Om du g\u00f6r det beh\u00e5ller du bildf\u00f6rh\u00e5llandet och bilden sk\u00e4rs inte av. Jag har passerat bredden som 400 och h\u00f6jden som 150. Du kan \u00e4ndra dessa v\u00e4rden enligt dina krav.<\/p>\n
Om du letar efter h\u00e5rd besk\u00e4rning ers\u00e4tter du nedanst\u00e5ende rader<\/p>\n
$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {\n\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n});\n$img->save($thumbnailpath);<\/code><\/pre>\n
Med<\/p>\n
$img = Image::make($thumbnailpath)->resize(100, 100)->save($thumbnailpath);<\/code><\/pre>\n
Efter detta f\u00e5r du miniatyren med dimensionen 100 * 100.<\/p>\n
Jag hoppas att du kan l\u00e4ra dig att \u00e4ndra storlek p\u00e5 bilden i Laravel med hj\u00e4lp av Intervention Image-biblioteket. Dela dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n
relaterade artiklar<\/h4>\n