{"id":28430,"date":"2021-05-25T13:27:00","date_gmt":"2021-05-25T10:27:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28430"},"modified":"2021-10-18T03:42:05","modified_gmt":"2021-10-18T00:42:05","slug":"jak-przeslac-i-przyciac-obraz-w-laravel-za-pomoca-imgareaselect-i-biblioteki-obrazow-interwencyjnych","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-przeslac-i-przyciac-obraz-w-laravel-za-pomoca-imgareaselect-i-biblioteki-obrazow-interwencyjnych\/","title":{"rendered":"Jak przes\u0142a\u0107 i przyci\u0105\u0107 obraz w Laravel za pomoc\u0105 imgAreaSelect i biblioteki obraz\u00f3w interwencyjnych"},"content":{"rendered":"<p>Ostatnio jeden z naszych czytelnik\u00f3w poprosi\u0142 o napisanie artyku\u0142u na temat przesy\u0142ania i przycinania zdj\u0119\u0107 w Laravelu. W przesz\u0142o\u015bci publikowa\u0142em artyku\u0142 na ten sam temat dla PHP <a href=\"https:\/\/themewp.inform.click\/pl\/jak-przeslac-przyciac-i-zmienic-rozmiar-obrazu-za-pomoca-jquery-i-php\/\" title=\"Upload, Crop and Resize Image in PHP\" >Upload, Crop and Resize Image in PHP<\/a>. Ale je\u015bli chodzi o Laravela, musimy dokona\u0107 modyfikacji zgodnie ze standardami Laravela. W tym artykule dowiemy si\u0119, jak przesy\u0142a\u0107 i przycina\u0107 obrazy w Laravel.<\/p>\n<p>W tym samouczku u\u017cyj\u0119 2 bibliotek \u2013 imgAreaSelect i Intervention Image.<\/p>\n<p><a href=\"https:\/\/plugins.jquery.com\/imgareaselect\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">imgAreaSelect<\/a> to wtyczka jQuery, kt\u00f3ra umo\u017cliwia przycinanie obraz\u00f3w poprzez wybranie prostok\u0105tnego obszaru obrazu. Jest to lekka wtyczka i \u0142atwa w u\u017cyciu.<\/p>\n<p>Z drugiej strony, <a href=\"http:\/\/image.intervention.io\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Intervention Image<\/a> to biblioteka do obs\u0142ugi i manipulacji obrazami. Ta biblioteka pomaga nam tworzy\u0107, edytowa\u0107 i komponowa\u0107 obrazy po stronie serwera.<\/p>\n<p>W tym samouczku u\u017cyj\u0119 imgAreaSelect, aby uzyska\u0107 wsp\u00f3\u0142rz\u0119dne przyci\u0119tego obrazu i biblioteki obraz\u00f3w Interwencji, aby faktycznie przyci\u0105\u0107 obraz po stronie serwera zgodnie ze wsp\u00f3\u0142rz\u0119dnymi.<\/p>\n<h3>Pierwsze kroki<\/h3>\n<p>Na pocz\u0105tek powiniene\u015b mie\u0107 zainstalowany Laravel. Je\u015bli jeszcze nie utworzy\u0142e\u015b, zainstaluj go za pomoc\u0105 polecenia:<\/p>\n<pre><code>composer create-project --prefer-dist laravel\/laravel laravel-dev<\/code><\/pre>\n<p>Powy\u017csze polecenie skonfiguruje dla ciebie projekt Laravel o nazwie 'laravel-dev&#8217;.<\/p>\n<p>Nast\u0119pnie zainstaluj bibliotek\u0119 obraz\u00f3w Interwencja w swoim projekcie Laravel. Uruchom poni\u017csze polecenie z katalogu g\u0142\u00f3wnego projektu.<\/p>\n<pre><code>composer require intervention\/image<\/code><\/pre>\n<p>Po zainstalowaniu biblioteki otw\u00f3rz <code>config\/app.php<\/code>plik i dodaj do niego nast\u0119puj\u0105ce wiersze.<\/p>\n<p>Dodaj dostawc\u00f3w us\u0142ug dla tego pakietu w <code>$providers<\/code>tablicy.<\/p>\n<pre><code>InterventionImageImageServiceProvider::class<\/code><\/pre>\n<p>Dodaj fasad\u0119 do <code>$aliases<\/code>szyku.<\/p>\n<pre><code>'Image' =&gt; InterventionImageFacadesImage::class<\/code><\/pre>\n<p>Na koniec pobierz wtyczk\u0119 <a href=\"https:\/\/plugins.jquery.com\/imgareaselect\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">imgAreaSelect<\/a>. Z pobranego pliku zip skopiuj obrazy, CSS, plik JS i wklej do publicznego folderu projektu Laravel. Zasadniczo twoja struktura powinna wygl\u0105da\u0107 jak na poni\u017cszym zrzucie ekranu.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20475-6081f7850f82b.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20475-6081f7850f82b.png\" alt=\"Jak przes\u0142a\u0107 i przyci\u0105\u0107 obraz w Laravel za pomoc\u0105 imgAreaSelect i biblioteki obraz\u00f3w interwencyjnych\" ><\/a><\/p>\n<h3>Jak korzysta\u0107 z imgAreaSelect<\/h3>\n<p>Poniewa\u017c zamierzamy korzysta\u0107 z CSS i JS wtyczki imgAreaSelect, zbudujmy dla niego struktur\u0119. Utw\u00f3rz <code>resources\/views\/layouts\/app.blade.php<\/code>plik i dodaj do niego poni\u017cszy kod.<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"{{ app()-&gt;getLocale() }}\"&gt;\n&lt;head&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;meta charset=\"utf-8\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0&lt;!-- CSRF Token --&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;meta name=\"csrf-token\" content=\"{{ csrf_token() }}\"&gt;\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0&lt;title&gt;{{ config('app.name', 'Laravel') }}&lt;\/title&gt;\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0@yield('style')\n&lt;\/head&gt;\n&lt;body&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;div id=\"app\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@yield('content')\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0@yield('footer')\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Ten pilnik dzia\u0142a jak wsp\u00f3lny pilnik dla wszystkich ostrzy. Za pomoc\u0105 symboli zast\u0119pczych (<code>@yield<\/code>) mo\u017cna umie\u015bci\u0107 kod w pliku blade w odpowiednich miejscach, np. w nag\u0142\u00f3wku, stopce itp.<\/p>\n<p>Utw\u00f3rz <code>image.blade.php<\/code>plik w <code>resources\/views<\/code>katalogu. Ten plik ostrza b\u0119dzie mia\u0142 nast\u0119puj\u0105cy kod.<\/p>\n<p><strong>image.blade.php<\/strong><\/p>\n<pre><code>@extends('layouts.app')\n\u00a0\u00a0\n@section('style')\n\u00a0\u00a0\u00a0\u00a0&lt;link rel=\"stylesheet\" href=\"{{ asset('css\/imgareaselect.css') }}\" \/&gt;\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&lt;div class=\"alert alert-success\"&gt;{{session('success')}}&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0@endif\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"container mt-5\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;form action=\"{{ url('image') }}\" method=\"post\" enctype=\"multipart\/form-data\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"exampleInputImage\"&gt;Image:&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"file\" name=\"profile_image\" id=\"exampleInputImage\" class=\"image\" required&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"hidden\" name=\"x1\" value=\"\" \/&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"hidden\" name=\"y1\" value=\"\" \/&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"hidden\" name=\"w\" value=\"\" \/&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"hidden\" name=\"h\" value=\"\" \/&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\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&lt;button type=\"submit\" class=\"btn btn-primary\"&gt;Submit&lt;\/button&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/form&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row mt-5\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p&gt;&lt;img id=\"previewimage\" style=\"display:none;\"\/&gt;&lt;\/p&gt;\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&lt;img src=\"{{ session('path') }}\" \/&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@endif\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n@endsection\n\u00a0\n@section('footer')\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"{{ asset('js\/jquery.imgareaselect.min.js') }}\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;script&gt;\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&lt;\/script&gt;\n@endsection<\/code><\/pre>\n<p>Mo\u017cna zauwa\u017cy\u0107 pewne rzeczy z powy\u017cszego pliku jak <code>@extends('layouts.app')<\/code>, <code>@section('style')<\/code>, <code>@section('content')<\/code>, itd. Te sekcje p\u00f3jdzie w odpowiednich miejscach <code>app.blade.php<\/code>. U\u017cytkownik mo\u017ce si\u0119 o tym lepiej zorientowa\u0107, wy\u015bwietlaj\u0105c \u017ar\u00f3d\u0142o tej strony w przegl\u0105darce.<\/p>\n<p>Aby wywo\u0142a\u0107 ten widok, utw\u00f3rz kontroler za pomoc\u0105 polecenia:<\/p>\n<pre><code>php artisan make:controller ImageController --resource<\/code><\/pre>\n<p>Dodaj odwo\u0142anie do tego kontrolera w pliku trasy.<\/p>\n<p><strong>trasy\/web.php<\/strong><\/p>\n<pre><code>Route::resource('image', 'ImageController');<\/code><\/pre>\n<p>Otw\u00f3rz 'ImageController&#8217; w edytorze i metod\u0105 'index&#8217; wywo\u0142aj plik widoku.<\/p>\n<pre><code>&lt;?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<p>Uruchom <code>php artisan serve<\/code>polecenie, a b\u0119dziesz m\u00f3g\u0142 zobaczy\u0107 sw\u00f3j formularz pod poni\u017cszym adresem URL.<\/p>\n<pre><code>http:\/\/localhost:8000\/image<\/code><\/pre>\n<p>Po przes\u0142aniu obrazu powiniene\u015b zobaczy\u0107 obraz podgl\u0105du pod formularzem. Z tego podgl\u0105du mo\u017cesz wybra\u0107 cz\u0119\u015b\u0107 obrazu, kt\u00f3r\u0105 chcesz przyci\u0105\u0107.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20475-6081f7850f82b.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20475-6081f7850f82b.png\" alt=\"Jak przes\u0142a\u0107 i przyci\u0105\u0107 obraz w Laravel za pomoc\u0105 imgAreaSelect i biblioteki obraz\u00f3w interwencyjnych\" ><\/a><\/p>\n<h3>Prze\u015blij i przytnij obraz za pomoc\u0105 biblioteki obraz\u00f3w interwencyjnych<\/h3>\n<p>W tym momencie ko\u0144czymy kod po stronie klienta, w kt\u00f3rym u\u017cytkownik mo\u017ce wybra\u0107 cz\u0119\u015b\u0107 obrazu, kt\u00f3ry chce przyci\u0105\u0107. Nast\u0119pnym zadaniem jest przyci\u0119cie obrazu i zapisanie go na serwerze. Do przechowywania obrazu na serwerze u\u017cyj\u0119 funkcji przechowywania Laravel, gdzie tworzymy dowi\u0105zanie symboliczne folderu 'storage&#8217;. Aby utworzy\u0107 dowi\u0105zanie symboliczne, uruchom polecenie:<\/p>\n<pre><code>php artisan storage:link<\/code><\/pre>\n<p>To polecenie tworzy katalog \u201estorage&quot; w folderze \u201epublic&#8221;.<\/p>\n<p>W naszym kontrolerze zawarli\u015bmy ju\u017c fasad\u0119, <code>use Image;<\/code>wi\u0119c dobrze jest skorzysta\u0107 z biblioteki obraz\u00f3w Interwencji, aby przyci\u0105\u0107 obraz po stronie serwera. Metoda kontrolera <code>store()<\/code>powinna mie\u0107 kod jak poni\u017cej:<\/p>\n<pre><code>\/**\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-&gt;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-&gt;file('profile_image')-&gt;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-&gt;file('profile_image')-&gt;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-&gt;file('profile_image')-&gt;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-&gt;crop($request-&gt;input('w'), $request-&gt;input('h'), $request-&gt;input('x1'), $request-&gt;input('y1'));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img-&gt;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')-&gt;with(['success' =&gt; \"Image cropped successfully.\", 'path' =&gt; $path]);\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n<p>W tym kodzie przechowujemy przyci\u0119t\u0105 wersj\u0119 obrazu w katalogu \u201epublic\/storage\/profile_images\/crop&#8221;. Po jego zapisaniu przekazujemy \u015bcie\u017ck\u0119 wykadrowanego obrazu z powrotem do widoku. W pliku widoku dodali\u015bmy ju\u017c kod, kt\u00f3ry wy\u015bwietla przyci\u0119ty obraz u\u017cytkownikowi ko\u0144cowemu.<\/p>\n<h3>Ustaw maksymaln\u0105 szeroko\u015b\u0107 obrazu<\/h3>\n<p>Czasami u\u017cytkownicy mog\u0105 chcie\u0107 zdefiniowa\u0107 maksymaln\u0105 szeroko\u015b\u0107 przyci\u0119tej wersji obrazu. Wtyczka imgAreaSelect udost\u0119pnia kilka opcji, takich jak proporcje, maxWidth, maxHeight itp., aby dostosowa\u0107 ko\u0144cowy wynik obrazu. U\u017cytkownik mo\u017ce u\u017cy\u0107 opcji maxWidth zmieniaj\u0105c kod JavaScript w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n<pre><code>$('#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<p>Chodzi o to, jak przesy\u0142a\u0107 i przycina\u0107 obrazy w Laravel. Mam nadziej\u0119, \u017ce wiesz, jak poradzi\u0107 sobie z przycinaniem obraz\u00f3w. Chcia\u0142bym us\u0142ysze\u0107 wasze przemy\u015blenia i sugestie w sekcji komentarzy poni\u017cej.<\/p>\n<h4>Powi\u0105zane artyku\u0142y<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/zmien-rozmiar-obrazu-w-laravel-za-pomoca-biblioteki-obrazow-interwencyjnych\/\" title=\"Zmie\u0144 rozmiar obrazu w Laravel za pomoc\u0105 biblioteki obraz\u00f3w interwencyjnych\">Zmie\u0144 rozmiar obrazu w Laravel za pomoc\u0105 biblioteki obraz\u00f3w interwencyjnych<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/jak-przesylac-i-kompresowac-obrazy-w-laravel\/\" title=\"Przewodnik po przesy\u0142aniu i kompresowaniu obraz\u00f3w w Laravel\">Przewodnik po przesy\u0142aniu i kompresowaniu obraz\u00f3w w Laravel<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/utworz-miniature-w-laravel-za-pomoca-biblioteki-obrazow-interwencyjnych\/\" title=\"Utw\u00f3rz miniatur\u0119 w Laravel za pomoc\u0105 biblioteki obraz\u00f3w interwencyjnych\">Utw\u00f3rz miniatur\u0119 w Laravel za pomoc\u0105 biblioteki obraz\u00f3w interwencyjnych<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>W tym artykule pokazujemy, jak przes\u0142a\u0107 i przyci\u0105\u0107 obraz w Laravel. W tym celu u\u017cywamy biblioteki obraz\u00f3w imgAreaSelect i Intervention.<\/p>\n","protected":false},"author":1,"featured_media":21676,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[501],"tags":[847],"class_list":["post-28430","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/28430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/comments?post=28430"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/28430\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media\/21676"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media?parent=28430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/categories?post=28430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/tags?post=28430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}