{"id":28603,"date":"2021-05-25T13:34:00","date_gmt":"2021-05-25T10:34:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28603"},"modified":"2021-10-17T04:38:54","modified_gmt":"2021-10-17T01:38:54","slug":"hur-man-laddar-upp-och-beskar-bild-i-laravel-med-imgareaselect-and-intervention-image-library","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-laddar-upp-och-beskar-bild-i-laravel-med-imgareaselect-and-intervention-image-library\/","title":{"rendered":"Hur man laddar upp och besk\u00e4r bild i Laravel med imgAreaSelect and Intervention Image Library"},"content":{"rendered":"

Nyligen bad en av v\u00e5ra l\u00e4sare skriva en artikel om uppladdning och besk\u00e4rning av bilder i Laravel. Tidigare publicerade jag artikeln om samma \u00e4mne f\u00f6r PHP- uppladdning, besk\u00e4r och \u00e4ndra storlek p\u00e5 bild i PHP<\/a>. Men n\u00e4r det g\u00e4ller Laravel m\u00e5ste vi g\u00f6ra modifieringar enligt Laravels standarder. I den h\u00e4r artikeln studerar vi hur man laddar upp och besk\u00e4r bilder i Laravel.<\/p>\n

F\u00f6r denna handledning ska jag anv\u00e4nda tv\u00e5 bibliotek – imgAreaSelect and Intervention Image.<\/p>\n

imgAreaSelect<\/a> \u00e4r ett jQuery-plugin som till\u00e5ter besk\u00e4rning av bilder genom att v\u00e4lja ett rektangul\u00e4rt omr\u00e5de av en bild. Det \u00e4r ett l\u00e4tt plugin och l\u00e4tt att anv\u00e4nda.<\/p>\n

\u00c5 andra sidan \u00e4r Intervention Image<\/a> ett bildhanterings- och manipulationsbibliotek. Detta bibliotek hj\u00e4lper oss att skapa, redigera och komponera bilder p\u00e5 serversidan.<\/p>\n

I denna handledning anv\u00e4nder jag imgAreaSelect f\u00f6r att f\u00e5 koordinaterna f\u00f6r den beskurna bilden och Intervention bildbiblioteket f\u00f6r att faktiskt besk\u00e4ra bilden p\u00e5 serversidan enligt koordinaterna.<\/p>\n

Komma ig\u00e5ng<\/h3>\n

F\u00f6r att komma ig\u00e5ng borde du ha installerat Laravel. Om du inte har skapat \u00e4nnu installerar du det via kommandot:<\/p>\n

composer create-project --prefer-dist laravel\/laravel laravel-dev<\/code><\/pre>\n
Ovanst\u00e5ende kommando st\u00e4ller in Laravel-projektet som heter ’laravel-dev’ f\u00f6r dig.<\/p>\n
Installera sedan bildbiblioteket Intervention i ditt Laravel-projekt. K\u00f6r kommandot nedan fr\u00e5n projektets rotkatalog.<\/p>\n
composer require intervention\/image<\/code><\/pre>\n
N\u00e4r du har 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
Slutligen ladda ner imgAreaSelect-till\u00e4gget<\/a>. Fr\u00e5n den nedladdade zip-filen, kopiera bilder, CSS, JS-fil och klistra in i den offentliga mappen f\u00f6r Laravel-projektet. I grund och botten b\u00f6r din struktur vara som sk\u00e4rmdumpen nedan.<\/p>\n
\"Hur<\/a><\/p>\n
Hur man anv\u00e4nder imgAreaSelect<\/h3>\n
N\u00e4r vi ska anv\u00e4nda CSS och JS f\u00f6r imgAreaSelect-plugin, l\u00e5t oss bygga en struktur f\u00f6r det. Skapa en resources\/views\/layouts\/app.blade.php<\/code>fil och l\u00e4gg till koden nedan i den.<\/p>\n
<!DOCTYPE html>\n<html lang=\"{{ app()->getLocale() }}\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"utf-8\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0<!-- CSRF Token -->\n\u00a0\u00a0\u00a0\u00a0<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0<title>{{ config('app.name', 'Laravel') }}<\/title>\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0@yield('style')\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div id=\"app\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@yield('content')\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0@yield('footer')\n<\/body>\n<\/html><\/code><\/pre>\n
Den h\u00e4r filen fungerar som en vanlig fil f\u00f6r alla blad. Med platsh\u00e5llarna (@yield<\/code>) kan man placera koden i bladfilen p\u00e5 respektive platser som i sidhuvud, sidfot etc.<\/p>\n
Skapa en image.blade.php<\/code>fil i resources\/views<\/code>katalogen. Den h\u00e4r bladfilen kommer att ha f\u00f6ljande kod.<\/p>\n
image.blade.php<\/strong><\/p>\n
@extends('layouts.app')\n\u00a0\u00a0\n@section('style')\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"{{ asset('css\/imgareaselect.css') }}\" \/>\n@endsection\n\u00a0\u00a0\n@section('content')\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0@if(session('success'))\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"alert alert-success\">{{session('success')}}<\/div>\n\u00a0\u00a0\u00a0\u00a0@endif\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0<div class=\"container mt-5\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<form action=\"{{ url('image') }}\" method=\"post\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleInputImage\">Image:<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" name=\"profile_image\" id=\"exampleInputImage\" class=\"image\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"x1\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"y1\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"w\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"h\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{ csrf_field() }}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-primary\">Submit<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/form>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"row mt-5\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p><img id=\"previewimage\" style=\"display:none;\"\/><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@if(session('path'))\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"{{ session('path') }}\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@endif\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n@endsection\n\u00a0\n@section('footer')\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"{{ asset('js\/jquery.imgareaselect.min.js') }}\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script>\n\u00a0\u00a0\u00a0\u00a0jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var p = $(\"#previewimage\");\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(\"body\").on(\"change\", \".image\", function(){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var imageReader = new FileReader();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageReader.readAsDataURL(document.querySelector(\".image\").files[0]);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageReader.onload = function (oFREvent) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0p.attr('src', oFREvent.target.result).fadeIn();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#previewimage').imgAreaSelect({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onSelectEnd: function (img, selection) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"x1\"]').val(selection.x1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"y1\"]').val(selection.y1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"w\"]').val(selection.width);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"h\"]').val(selection.height);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0<\/script>\n@endsection<\/code><\/pre>\n
Du kanske har m\u00e4rkt n\u00e5gra saker fr\u00e5n filen ovanf\u00f6r som @extends('layouts.app')<\/code>, @section('style')<\/code>, @section('content')<\/code>, etc. Dessa avsnitt kommer att g\u00e5 i respektive platser app.blade.php<\/code>. Anv\u00e4ndaren kan f\u00e5 en b\u00e4ttre uppfattning om det n\u00e4r du visar k\u00e4llan till denna sida i webbl\u00e4saren.<\/p>\n
F\u00f6r att anropa den h\u00e4r vyn, skapa en styrenhet med kommandot:<\/p>\n
php artisan make:controller ImageController --resource<\/code><\/pre>\n
L\u00e4gg till referensen f\u00f6r denna styrenhet i ruttfilen.<\/p>\n
rutter \/ web.php<\/strong><\/p>\n
Route::resource('image', 'ImageController');<\/code><\/pre>\n
\u00d6ppna ’ImageController’ i redigeraren och till ’index’-metoden anropa visningsfilen.<\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllers;\n\u00a0\nuse IlluminateHttpRequest;\nuse Image;\n\u00a0\nclass ImageController extends Controller\n{\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Display a listing of the resource.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return IlluminateHttpResponse\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function index()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return view('image');\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0.....\n}<\/code><\/pre>\n
K\u00f6r php artisan serve<\/code>kommandot s\u00e5 kan du se ditt formul\u00e4r p\u00e5 nedanst\u00e5ende URL.<\/p>\n
http:\/\/localhost:8000\/image<\/code><\/pre>\n
N\u00e4r du laddar upp bilden ska du se f\u00f6rhandsgranskningsbilden under formul\u00e4ret. Fr\u00e5n denna f\u00f6rhandsgranskning kan du v\u00e4lja en del av bilden du vill besk\u00e4ra.<\/p>\n
\"Hur<\/a><\/p>\n
Ladda upp och besk\u00e4ra bild med hj\u00e4lp av bildbiblioteket f\u00f6r intervention<\/h3>\n
Vid den h\u00e4r tiden kompletteras vi med klientsidakoden d\u00e4r anv\u00e4ndaren kan v\u00e4lja en del av bilden som de vill besk\u00e4ra. N\u00e4sta jobb \u00e4r att besk\u00e4ra bilden och lagra den p\u00e5 servern. F\u00f6r att lagra en bild p\u00e5 en server anv\u00e4nder jag Laravel-lagringsfunktionen d\u00e4r vi skapar en syml\u00e4nk till en "lagringsmapp". F\u00f6r att skapa en symlink, k\u00f6r kommandot:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Detta kommando skapar en "lagring" -katalog under "offentlig" -mappen.<\/p>\n
I v\u00e5r kontroller har vi redan inkluderat en fasad use Image;<\/code>s\u00e5 att du \u00e4r bra att g\u00e5 vidare med att anv\u00e4nda Intervention bildbibliotek f\u00f6r att besk\u00e4ra bilden p\u00e5 serversidan. Styrenhetens store()<\/code>metod ska ha kod som nedan:<\/p>\n
\/**\n\u00a0* Store a newly created resource in storage.\n\u00a0*\n\u00a0* @param\u00a0 IlluminateHttpRequest\u00a0 $request\n\u00a0* @return IlluminateHttpResponse\n\u00a0*\/\npublic 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\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(!file_exists(public_path('storage\/profile_images\/crop'))) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir(public_path('storage\/profile_images\/crop'), 0755);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ crop image\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img = Image::make(public_path('storage\/profile_images\/'.$filenametostore));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$croppath = public_path('storage\/profile_images\/crop\/'.$filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->crop($request->input('w'), $request->input('h'), $request->input('x1'), $request->input('y1'));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->save($croppath);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ you can save crop image path below in database\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$path = asset('storage\/profile_images\/crop\/'.$filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('image')->with(['success' => \"Image cropped successfully.\", 'path' => $path]);\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
I den h\u00e4r koden lagrar vi en beskuren version av en bild i katalogen ’public \/ storage \/ profile_images \/ crop’. Efter att ha lagrat den passerar vi en v\u00e4g f\u00f6r den beskurna bilden tillbaka till vyn. Och i vyfilen har vi redan lagt till en kod som visar den beskurna bilden till slutanv\u00e4ndaren.<\/p>\n
St\u00e4ll in maximal bredd p\u00e5 bilden<\/h3>\n
Ibland kanske anv\u00e4ndare vill definiera maximal bredd f\u00f6r besk\u00e4rningsversionen av en bild. ImgAreaSelect-plugin-programmet ger flera alternativ som aspectRatio, maxWidth, maxHeight, etc. f\u00f6r att anpassa det slutliga resultatet av en bild. En anv\u00e4ndare kan anv\u00e4nda maxWidth-alternativet genom att \u00e4ndra JavaScript-koden enligt f\u00f6ljande:<\/p>\n
$('#previewimage').imgAreaSelect({\n\u00a0\u00a0\u00a0\u00a0maxWidth: '1000', \/\/ this value is in pixels\n\u00a0\u00a0\u00a0\u00a0onSelectEnd: function (img, selection) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"x1\"]').val(selection.x1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"y1\"]').val(selection.y1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"w\"]').val(selection.width);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"h\"]').val(selection.height);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\n
Det handlar om hur man laddar upp och besk\u00e4r bilder i Laravel. Jag hoppas att du fick veta hur du ska hantera uppgiften att besk\u00e4ra bilder. Jag skulle vilja h\u00f6ra dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n
relaterade artiklar<\/h4>\n