{"id":28567,"date":"2021-05-25T11:29:00","date_gmt":"2021-05-25T08:29:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28567"},"modified":"2021-10-17T04:39:14","modified_gmt":"2021-10-17T01:39:14","slug":"skapa-miniatyrbild-i-laravel-med-hjalp-av-interventionsbildbiblioteket","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/skapa-miniatyrbild-i-laravel-med-hjalp-av-interventionsbildbiblioteket\/","title":{"rendered":"Skapa miniatyrbild i Laravel med hj\u00e4lp av interventionsbildbiblioteket"},"content":{"rendered":"

P\u00e5 webbplatsen hanterar vi alltid bilderna. Baserat p\u00e5 kravet anv\u00e4nder vi olika versioner av bilder. Det \u00e4r en bra praxis f\u00f6r utvecklare att skapa olika versioner, aka miniatyrer av den ena bilden. Dessa miniatyrer kan anv\u00e4ndas medan olika bildstorlekar visas beroende p\u00e5 beh\u00e5llarens storlek. Om du visar en bild som passar per containerstorlek sparar du bandbredd och f\u00f6rb\u00e4ttrar sidens laddningstid. Att visa en storbildsbild i en liten beh\u00e5llare \u00e4r d\u00e5lig praxis och \u00e4ventyrar sidens laddningstid. Som ett resultat rekommenderas att du skapar flera miniatyrer av en bild och anv\u00e4nder l\u00e4mplig version d\u00e4r det beh\u00f6vs.<\/p>\n

I den h\u00e4r artikeln studerar vi hur man skapar en miniatyrbild i Laravel med hj\u00e4lp av Intervention Image-biblioteket. Intervention Image<\/a> \u00e4r gratis och ett av de popul\u00e4ra biblioteken f\u00f6r bildmanipulation. I bakgrunden anv\u00e4nder detta bibliotek GD Library och Imagick f\u00f6r bildmanipulation.<\/p>\n

F\u00f6r den h\u00e4r handledningen skapar jag tre miniatyrer – sm\u00e5, medelstora, stora med storlekarna 150 93, 300 * 185, 550 340 respektive. \u00c4ndra dessa storlekar enligt dina krav.<\/p>\n

Komma ig\u00e5ng<\/h3>\n

F\u00f6r att komma ig\u00e5ng m\u00e5ste du f\u00f6rst installera Intervention Image-biblioteket i Laravel. \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\u00f6rer f\u00f6r detta paket i $providers<\/code>matrisen.<\/p>\n
InterventionImageImageServiceProvider::class<\/code><\/pre>\n
L\u00e4gg till fasaden i $aliases<\/code>matrisen.<\/p>\n
'Image' => InterventionImageFacadesImage::class<\/code><\/pre>\n
D\u00e4refter f\u00f6r att lagra bilderna beh\u00f6ver vi skapa en katalog. G\u00e5 \u00f6ver till terminalen och k\u00f6r kommandot enligt f\u00f6ljande:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Detta kommando skapar en lagringskatalog (symbolisk l\u00e4nk) under den offentliga mappen. I den h\u00e4r mappen laddar jag upp originalbilden och dess miniatyrer.<\/p>\n
Skapa en miniatyrbild i Laravel<\/h3>\n
Vi st\u00e4ller alla in med grundinst\u00e4llningen och kan nu skriva den faktiska koden. L\u00e5t oss skapa ett formul\u00e4r i din visningsfil.<\/p>\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
I styrenheten m\u00e5ste du l\u00e4gga till biblioteksfasaden ’Bild’ som vi har lagt till i config\/app.php<\/code>filen.<\/p>\n
<?php\n\u00a0\u00a0\nnamespace AppHttpControllers;\n\u00a0\u00a0\nuse IlluminateHttpRequest;\nuse Image;\n\u00a0\u00a0\nclass ImageController extends Controller\n{\n\u00a0\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. Originalbilden g\u00e5r direkt in i storage\/profile_images<\/code>mappen. Miniatyrbilderna sparas under storage\/profile_images\/thumbnail<\/code>katalogen. Vi 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\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\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\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\/\/small thumbnail name\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$smallthumbnail = $filename.'_small_'.time().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/medium thumbnail name\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$mediumthumbnail = $filename.'_medium_'.time().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/large thumbnail name\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$largethumbnail = $filename.'_large_'.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', $smallthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images\/thumbnail', $mediumthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images\/thumbnail', $largethumbnail);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/create small thumbnail\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$smallthumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$smallthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->createThumbnail($smallthumbnailpath, 150, 93);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/create medium thumbnail\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$mediumthumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$mediumthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->createThumbnail($mediumthumbnailpath, 300, 185);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/create large thumbnail\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$largethumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$largethumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->createThumbnail($largethumbnailpath, 550, 340);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('image')->with('success', \"Image uploaded successfully.\");\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
I koden ovan lagrar jag bilden med tre format sm\u00e5, medelstora och stora. Efter att ha lagrat dem ringer vi metoden createThumbnail<\/code>och skickar \u00f6nskad bredd, h\u00f6jd till metoden. L\u00e5t oss definiera den h\u00e4r funktionen nedan. Denna funktion ska g\u00e5 till samma styrenhet.<\/p>\n
\/**\n\u00a0* Create a thumbnail of specified size\n\u00a0*\n\u00a0* @param string $path path of thumbnail\n\u00a0* @param int $width\n\u00a0* @param int $height\n\u00a0*\/\npublic function createThumbnail($path, $width, $height)\n{\n\u00a0\u00a0\u00a0\u00a0$img = Image::make($path)->resize($width, $height, function ($constraint) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0$img->save($path);\n}<\/code><\/pre>\n
H\u00e4r \u00e4ndrar vi storleken p\u00e5 bilden proportionellt. Genom att g\u00f6ra det beh\u00e5ller vi bildf\u00f6rh\u00e5llandet och bilden sk\u00e4rs inte av.<\/p>\n
Om du letar efter h\u00e5rd sk\u00f6rd, byt ut nedanf\u00f6r raderna<\/p>\n
$img = Image::make($path)->resize($width, $height, function ($constraint) {\n\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n});\n$img->save($path);<\/code><\/pre>\n
Med<\/p>\n
$img = Image::make($path)->resize($width, $height)->save($path);<\/code><\/pre>\n
Jag hoppas att du f\u00f6rst\u00e5r hur du skapar en miniatyrbild i Laravel med hj\u00e4lp av Intervention Image-biblioteket. Jag skulle vilja h\u00f6ra dina tankar i kommentarf\u00e4ltet nedan.<\/p>\n
relaterade artiklar<\/h4>\n