{"id":28636,"date":"2021-05-25T13:23:00","date_gmt":"2021-05-25T10:23:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28636"},"modified":"2025-02-12T05:54:20","modified_gmt":"2025-02-12T02:54:20","slug":"iak-zavantazhyty-ta-obrizaty-zobrazhennia-u-laravel-za-dopomohoiu-imgareaselect-ta-biblioteky-zobrazhen-dlia-vtruchannia","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/uk\/iak-zavantazhyty-ta-obrizaty-zobrazhennia-u-laravel-za-dopomohoiu-imgareaselect-ta-biblioteky-zobrazhen-dlia-vtruchannia\/","title":{"rendered":"\u042f\u043a \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0438\u0442\u0438 \u0442\u0430 \u043e\u0431\u0440\u0456\u0437\u0430\u0442\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0443 Laravel \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e imgAreaSelect \u0442\u0430 \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044c \u0434\u043b\u044f \u0432\u0442\u0440\u0443\u0447\u0430\u043d\u043d\u044f"},"content":{"rendered":"

\u041d\u0435\u0449\u043e\u0434\u0430\u0432\u043d\u043e \u043e\u0434\u0438\u043d \u0456\u0437 \u043d\u0430\u0448\u0438\u0445 \u0447\u0438\u0442\u0430\u0447\u0456\u0432 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u0432 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u0438 \u0441\u0442\u0430\u0442\u0442\u044e \u043f\u0440\u043e \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f \u0442\u0430 \u043e\u0431\u0440\u0456\u0437\u0430\u043d\u043d\u044f \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044c \u0443 Laravel. \u0420\u0430\u043d\u0456\u0448\u0435 \u044f \u043f\u0443\u0431\u043b\u0456\u043a\u0443\u0432\u0430\u0432 \u0441\u0442\u0430\u0442\u0442\u044e \u043d\u0430 \u0442\u0443 \u0441\u0430\u043c\u0443 \u0442\u0435\u043c\u0443 \u0434\u043b\u044f PHP Upload, Crop and Resize Image in PHP<\/a>. \u0410\u043b\u0435 \u043a\u043e\u043b\u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u0441\u0442\u043e\u0441\u0443\u0454\u0442\u044c\u0441\u044f Laravel, \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0437\u0440\u043e\u0431\u0438\u0442\u0438 \u043c\u043e\u0434\u0438\u0444\u0456\u043a\u0430\u0446\u0456\u0457 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u043e \u0434\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0456\u0432 Laravel. \u0423 \u0446\u0456\u0439 \u0441\u0442\u0430\u0442\u0442\u0456 \u043c\u0438 \u0432\u0438\u0432\u0447\u0430\u0454\u043c\u043e, \u044f\u043a \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0443\u0432\u0430\u0442\u0438 \u0442\u0430 \u043e\u0431\u0440\u0456\u0437\u0430\u0442\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0432 Laravel.<\/p>\n

\u0414\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u043f\u0456\u0434\u0440\u0443\u0447\u043d\u0438\u043a\u0430 \u044f \u0437\u0431\u0438\u0440\u0430\u044e\u0441\u044f \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 2 \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0438 – imgAreaSelect \u0442\u0430 Intervention Image.<\/p>\n

imgAreaSelect<\/a> – \u0446\u0435 \u043f\u043b\u0430\u0433\u0456\u043d jQuery, \u044f\u043a\u0438\u0439 \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u043e\u0431\u0440\u0456\u0437\u0430\u0442\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f, \u0432\u0438\u0431\u0438\u0440\u0430\u044e\u0447\u0438 \u043f\u0440\u044f\u043c\u043e\u043a\u0443\u0442\u043d\u0443 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f. \u0426\u0435 \u043b\u0435\u0433\u043a\u0438\u0439 \u043f\u043b\u0430\u0433\u0456\u043d \u0456 \u043f\u0440\u043e\u0441\u0442\u0438\u0439 \u0443 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u0456.<\/p>\n

\u0417 \u0456\u043d\u0448\u043e\u0433\u043e \u0431\u043e\u043a\u0443, Intervention Image<\/a> – \u0446\u0435 \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043e\u0431\u0440\u043e\u0431\u043a\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044c \u0442\u0430 \u043c\u0430\u043d\u0456\u043f\u0443\u043b\u044e\u0432\u0430\u043d\u043d\u044f \u043d\u0438\u043c\u0438. \u0426\u044f \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0430 \u0434\u043e\u043f\u043e\u043c\u0430\u0433\u0430\u0454 \u043d\u0430\u043c \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438, \u0440\u0435\u0434\u0430\u0433\u0443\u0432\u0430\u0442\u0438 \u0442\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0443\u0432\u0430\u0442\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0456 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n

\u0423 \u0446\u044c\u043e\u043c\u0443 \u043f\u0456\u0434\u0440\u0443\u0447\u043d\u0438\u043a\u0443 \u044f \u0431\u0443\u0434\u0443 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 imgAreaSelect \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u043c\u0430\u043d\u043d\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0434\u043b\u044f \u043e\u0431\u0440\u0456\u0437\u0430\u043d\u043e\u0433\u043e \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0442\u0430 \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044c Intervention, \u0449\u043e\u0431 \u0444\u0430\u043a\u0442\u0438\u0447\u043d\u043e \u043e\u0431\u0440\u0456\u0437\u0430\u0442\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0456 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u043e \u0434\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442.<\/p>\n

\u041f\u043e\u0447\u0438\u043d\u0430\u0454\u043c\u043e<\/h3>\n

\u0414\u043b\u044f \u043f\u043e\u0447\u0430\u0442\u043a\u0443 \u0432\u0430\u043c \u0441\u043b\u0456\u0434 \u0431\u0443\u043b\u043e \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0438 Laravel. \u042f\u043a\u0449\u043e \u0432\u0438 \u0449\u0435 \u043d\u0435 \u0441\u0442\u0432\u043e\u0440\u0438\u043b\u0438, \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u0456\u0442\u044c \u0439\u043e\u0433\u043e \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0438:<\/p>\n

composer create-project --prefer-dist laravel\/laravel laravel-dev<\/code><\/pre>\n
\u0412\u0438\u0449\u0435\u0437\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u044c \u0434\u043b\u044f \u0432\u0430\u0441 \u043f\u0440\u043e\u0435\u043a\u0442 Laravel \u043f\u0456\u0434 \u043d\u0430\u0437\u0432\u043e\u044e ‘laravel-dev’.<\/p>\n
\u041f\u043e\u0442\u0456\u043c \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u0456\u0442\u044c \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0443 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044c Intervention \u0443 \u0441\u0432\u043e\u0454\u043c\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0456 Laravel. \u0417\u0430\u043f\u0443\u0441\u0442\u0456\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u043d\u0438\u0436\u0447\u0435 \u0437 \u043a\u043e\u0440\u0435\u043d\u0435\u0432\u043e\u0433\u043e \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0443.<\/p>\n
composer require intervention\/image<\/code><\/pre>\n
\u041f\u0456\u0441\u043b\u044f \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044f \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0438 \u0432\u0456\u0434\u043a\u0440\u0438\u0439\u0442\u0435 config\/app.php<\/code>\u0444\u0430\u0439\u043b \u0456 \u0434\u043e\u0434\u0430\u0439\u0442\u0435 \u0434\u043e \u043d\u044c\u043e\u0433\u043e \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0456 \u0440\u044f\u0434\u043a\u0438.<\/p>\n
\u0414\u043e\u0434\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u0442\u0430\u0447\u0430\u043b\u044c\u043d\u0438\u043a\u0456\u0432 \u043f\u043e\u0441\u043b\u0443\u0433 \u0434\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0443 \u0432 $providers<\/code>\u043c\u0430\u0441\u0438\u0432.<\/p>\n
InterventionImageImageServiceProvider::class<\/code><\/pre>\n
\u0414\u043e\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0441\u0430\u0434 \u0434\u043e $aliases<\/code>\u043c\u0430\u0441\u0438\u0432\u0443.<\/p>\n
'Image' => InterventionImageFacadesImage::class<\/code><\/pre>\n
\u041d\u0430\u0440\u0435\u0448\u0442\u0456, \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0442\u0435 \u043f\u043b\u0430\u0433\u0456\u043d imgAreaSelect<\/a>. \u0417 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043e\u0433\u043e zip-\u0444\u0430\u0439\u043b\u0443 \u0441\u043a\u043e\u043f\u0456\u044e\u0439\u0442\u0435 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f, \u0444\u0430\u0439\u043b CSS, JS \u0456 \u0432\u0441\u0442\u0430\u0432\u0442\u0435 \u0443 \u0437\u0430\u0433\u0430\u043b\u044c\u043d\u0443 \u043f\u0430\u043f\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0443 Laravel. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443 \u0432\u0430\u0448\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u043e\u0432\u0438\u043d\u043d\u0430 \u0431\u0443\u0442\u0438 \u0442\u0430\u043a\u043e\u044e, \u044f\u043a \u043d\u0430 \u0441\u043a\u0440\u0456\u043d\u0448\u043e\u0442\u0456 \u043d\u0438\u0436\u0447\u0435.<\/p>\n
\"\u042f\u043a<\/a><\/p>\n
\u042f\u043a \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0442\u0438\u0441\u044f imgAreaSelect<\/h3>\n
\u041e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u043c\u0438 \u0431\u0443\u0434\u0435\u043c\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 CSS \u0442\u0430 JS \u043f\u043b\u0430\u0433\u0456\u043d\u0430 imgAreaSelect, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0442\u0432\u043e\u0440\u0438\u043c\u043e \u0434\u043b\u044f \u043d\u044c\u043e\u0433\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443. \u0421\u0442\u0432\u043e\u0440\u0456\u0442\u044c resources\/views\/layouts\/app.blade.php<\/code>\u0444\u0430\u0439\u043b \u0456 \u0434\u043e\u0434\u0430\u0439\u0442\u0435 \u0432 \u043d\u044c\u043e\u0433\u043e \u043a\u043e\u0434 \u043d\u0438\u0436\u0447\u0435.<\/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
\u0426\u0435\u0439 \u0444\u0430\u0439\u043b \u0434\u0456\u0454 \u044f\u043a \u0437\u0430\u0433\u0430\u043b\u044c\u043d\u0438\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u0432\u0441\u0456\u0445 \u043b\u0435\u0437. \u0417\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u0437\u0430\u043f\u043e\u0432\u043d\u044e\u0432\u0430\u0447\u0456\u0432 (@yield<\/code>) \u043c\u043e\u0436\u043d\u0430 \u0440\u043e\u0437\u043c\u0456\u0441\u0442\u0438\u0442\u0438 \u043a\u043e\u0434 \u0443 \u0444\u0430\u0439\u043b\u0456 \u043b\u0435\u0437\u0430 \u0443 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u0438\u0445 \u043c\u0456\u0441\u0446\u044f\u0445, \u0442\u0430\u043a\u0438\u0445 \u044f\u043a \u0432\u0435\u0440\u0445\u043d\u0456\u0439, \u043d\u0438\u0436\u043d\u0456\u0439 \u043a\u043e\u043b\u043e\u043d\u0442\u0438\u0442\u0443\u043b \u0442\u043e\u0449\u043e.<\/p>\n
\u0421\u0442\u0432\u043e\u0440\u0456\u0442\u044c image.blade.php<\/code>\u0444\u0430\u0439\u043b \u0432\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0456 resources\/views<\/code>\u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0443. \u0426\u0435\u0439 \u0444\u0430\u0439\u043b \u043b\u0435\u0437\u0430 \u043c\u0430\u0442\u0438\u043c\u0435 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0438\u0439 \u043a\u043e\u0434.<\/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
\u0412\u0438, \u043c\u043e\u0436\u043b\u0438\u0432\u043e, \u043f\u043e\u043c\u0456\u0442\u0438\u043b\u0438 \u0434\u0435\u044f\u043a\u0456 \u0440\u0435\u0447\u0456 \u0437 \u0437\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043e\u0433\u043e \u0432\u0438\u0449\u0435 \u0444\u0430\u0439\u043b\u0443, \u044f\u043a @extends('layouts.app')<\/code>, @section('style')<\/code>, @section('content')<\/code>\u0456 \u0442.\u0434. \u0426\u0456 \u0434\u0456\u043b\u044f\u043d\u043a\u0438 \u0431\u0443\u0434\u0443\u0442\u044c \u0439\u0442\u0438 \u0443 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u0438\u0445 \u043c\u0456\u0441\u0446\u044f\u0445 app.blade.php<\/code>. \u041a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447 \u043c\u043e\u0436\u0435 \u043a\u0440\u0430\u0449\u0435 \u0437\u0440\u043e\u0437\u0443\u043c\u0456\u0442\u0438 \u0446\u0435, \u043a\u043e\u043b\u0438 \u0432\u0438 \u043f\u0435\u0440\u0435\u0433\u043b\u044f\u0434\u0430\u0454\u0442\u0435 \u0434\u0436\u0435\u0440\u0435\u043b\u043e \u0446\u0456\u0454\u0457 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0456.<\/p>\n
\u0429\u043e\u0431 \u0432\u0438\u043a\u043b\u0438\u043a\u0430\u0442\u0438 \u0446\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044f, \u0441\u0442\u0432\u043e\u0440\u0456\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u0440 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0438:<\/p>\n
php artisan make:controller ImageController --resource<\/code><\/pre>\n
\u0414\u043e\u0434\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u043d\u0430 \u0446\u0435\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u0440 \u0443 \u0444\u0430\u0439\u043b \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0443.<\/p>\n
routes \/ web.php<\/strong><\/p>\n
Route::resource('image', 'ImageController');<\/code><\/pre>\n
\u0412\u0456\u0434\u043a\u0440\u0438\u0439\u0442\u0435 ‘ImageController’ \u0443 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0456 \u0442\u0430 \u0437\u0430 \u043c\u0435\u0442\u043e\u0434\u043e\u043c ‘index’ \u0432\u0438\u043a\u043b\u0438\u0447\u0442\u0435 \u0444\u0430\u0439\u043b \u043f\u0435\u0440\u0435\u0433\u043b\u044f\u0434\u0443.<\/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
\u0417\u0430\u043f\u0443\u0441\u0442\u0456\u0442\u044c php artisan serve<\/code>\u043a\u043e\u043c\u0430\u043d\u0434\u0443, \u0456 \u0432\u0438 \u0437\u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0431\u0430\u0447\u0438\u0442\u0438 \u0441\u0432\u043e\u044e \u0444\u043e\u0440\u043c\u0443 \u0437\u0430 \u0432\u043a\u0430\u0437\u0430\u043d\u043e\u044e \u043d\u0438\u0436\u0447\u0435 URL-\u0430\u0434\u0440\u0435\u0441\u043e\u044e.<\/p>\n
http:\/\/localhost:8000\/image<\/code><\/pre>\n
\u041a\u043e\u043b\u0438 \u0432\u0438 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0443\u0454\u0442\u0435 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f, \u0432\u0438 \u043f\u043e\u0432\u0438\u043d\u043d\u0456 \u043f\u043e\u0431\u0430\u0447\u0438\u0442\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u043f\u043e\u043f\u0435\u0440\u0435\u0434\u043d\u044c\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0433\u043b\u044f\u0434\u0443 \u043f\u0456\u0434 \u0444\u043e\u0440\u043c\u043e\u044e. \u0417\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u0446\u044c\u043e\u0433\u043e \u043f\u043e\u043f\u0435\u0440\u0435\u0434\u043d\u044c\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0433\u043b\u044f\u0434\u0443 \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0431\u0440\u0430\u0442\u0438 \u0447\u0430\u0441\u0442\u0438\u043d\u0443 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f, \u044f\u043a\u0443 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u043e\u0431\u0440\u0456\u0437\u0430\u0442\u0438.<\/p>\n
\"\u042f\u043a<\/a><\/p>\n
\u0417\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0442\u0435 \u0442\u0430 \u043e\u0431\u0440\u0456\u0436\u0442\u0435 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u0456\u043d\u0442\u0435\u0440\u0432\u0435\u043d\u0446\u0456\u0439\u043d\u043e\u0457 \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044c<\/h3>\n
\u041d\u0430 \u0446\u044c\u043e\u043c\u0443 \u0435\u0442\u0430\u043f\u0456 \u043c\u0438 \u0437\u0430\u043a\u0456\u043d\u0447\u0443\u0454\u043c\u043e \u043a\u043e\u0434 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0456 \u043a\u043b\u0456\u0454\u043d\u0442\u0430, \u0434\u0435 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447 \u043c\u043e\u0436\u0435 \u0432\u0438\u0431\u0440\u0430\u0442\u0438 \u0447\u0430\u0441\u0442\u0438\u043d\u0443 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f, \u044f\u043a\u0435 \u0432\u0456\u043d \u0445\u043e\u0447\u0435 \u043e\u0431\u0440\u0456\u0437\u0430\u0442\u0438. \u041d\u0430\u0441\u0442\u0443\u043f\u043d\u0430 \u0440\u043e\u0431\u043e\u0442\u0430 – \u043e\u0431\u0440\u0456\u0437\u0430\u043d\u043d\u044f \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0442\u0430 \u0437\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u0439\u043e\u0433\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0456. \u0414\u043b\u044f \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u043d\u043d\u044f \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0456 \u044f \u0431\u0443\u0434\u0443 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044e \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u043d\u043d\u044f Laravel, \u0434\u0435 \u043c\u0438 \u0441\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0456\u0447\u043d\u0435 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u043d\u0430 \u043f\u0430\u043f\u043a\u0443 \u00ab\u0437\u0431\u0435\u0440\u0456\u0433\u0430\u043d\u043d\u044f\u00bb. \u0429\u043e\u0431 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u0456\u0447\u043d\u0435 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f, \u0432\u0438\u043a\u043e\u043d\u0430\u0439\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
\u0426\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u0442\u0432\u043e\u0440\u044e\u0454 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 "\u0437\u0431\u0435\u0440\u0456\u0433\u0430\u043d\u043d\u044f" \u043f\u0456\u0434 \u043f\u0430\u043f\u043a\u043e\u044e "public".<\/p>\n
\u0423 \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u0440 \u043c\u0438 \u0432\u0436\u0435 \u0432\u043a\u043b\u044e\u0447\u0438\u043b\u0438 \u0444\u0430\u0441\u0430\u0434, use Image;<\/code>\u0442\u043e\u043c\u0443 \u0432\u0430\u043c \u0441\u043b\u0456\u0434 \u043f\u0440\u043e\u0434\u043e\u0432\u0436\u0443\u0432\u0430\u0442\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0443 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044c Intervention \u0434\u043b\u044f \u043e\u0431\u0440\u0456\u0437\u0430\u043d\u043d\u044f \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0456 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u041c\u0435\u0442\u043e\u0434 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u0440\u0430 store()<\/code>\u043f\u043e\u0432\u0438\u043d\u0435\u043d \u043c\u0430\u0442\u0438 \u043a\u043e\u0434, \u044f\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0447\u0435:<\/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
\u0423 \u0446\u044c\u043e\u043c\u0443 \u043a\u043e\u0434\u0456 \u043c\u0438 \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u0454\u043c\u043e \u043e\u0431\u0440\u0456\u0437\u0430\u043d\u0443 \u0432\u0435\u0440\u0441\u0456\u044e \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0437\u0456 ‘public \/ storage \/ profile_images \/ crop’. \u041f\u0456\u0441\u043b\u044f \u0437\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u043c\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0454\u043c\u043e \u0448\u043b\u044f\u0445 \u043e\u0431\u0440\u0456\u0437\u0430\u043d\u043e\u0433\u043e \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u043d\u0430\u0437\u0430\u0434 \u0434\u043e \u043f\u043e\u0434\u0430\u043d\u043d\u044f. \u0410 \u0443 \u0444\u0430\u0439\u043b\u0456 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044f \u043c\u0438 \u0432\u0436\u0435 \u0434\u043e\u0434\u0430\u043b\u0438 \u043a\u043e\u0434, \u044f\u043a\u0438\u0439 \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0430\u0454 \u043e\u0431\u0440\u0456\u0437\u0430\u043d\u0435 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u043a\u0456\u043d\u0446\u0435\u0432\u043e\u043c\u0443 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0435\u0432\u0456.<\/p>\n
\u0412\u0441\u0442\u0430\u043d\u043e\u0432\u0456\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443 \u0448\u0438\u0440\u0438\u043d\u0443 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f<\/h3>\n
\u0406\u043d\u043e\u0434\u0456 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0456 \u043c\u043e\u0436\u0443\u0442\u044c \u0437\u0430\u0445\u043e\u0442\u0456\u0442\u0438 \u0432\u0438\u0437\u043d\u0430\u0447\u0438\u0442\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443 \u0448\u0438\u0440\u0438\u043d\u0443 \u0434\u043b\u044f \u043e\u0431\u0440\u0456\u0437\u0430\u043d\u043e\u0457 \u0432\u0435\u0440\u0441\u0456\u0457 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f. \u041f\u043b\u0430\u0433\u0456\u043d imgAreaSelect \u043d\u0430\u0434\u0430\u0454 \u043a\u0456\u043b\u044c\u043a\u0430 \u0432\u0430\u0440\u0456\u0430\u043d\u0442\u0456\u0432, \u0442\u0430\u043a\u0438\u0445 \u044f\u043a \u0430\u0441\u043f\u0435\u043a\u0442 \u0441\u043f\u0456\u0432\u0432\u0456\u0434\u043d\u043e\u0448\u0435\u043d\u043d\u044f, maxWidth, maxHeight \u0442\u043e\u0449\u043e, \u0449\u043e\u0431 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u0442\u0438 \u043a\u0456\u043d\u0446\u0435\u0432\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f. \u041a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447 \u043c\u043e\u0436\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u043e\u043f\u0446\u0456\u044e maxWidth, \u0437\u043c\u0456\u043d\u0438\u0432\u0448\u0438 \u043a\u043e\u0434 JavaScript \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0438\u043c \u0447\u0438\u043d\u043e\u043c:<\/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
\u0412\u0441\u044f \u0441\u043f\u0440\u0430\u0432\u0430 \u0432 \u0442\u043e\u043c\u0443, \u044f\u043a \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0443\u0432\u0430\u0442\u0438 \u0442\u0430 \u043e\u0431\u0440\u0456\u0437\u0430\u0442\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0432 Laravel. \u0421\u043f\u043e\u0434\u0456\u0432\u0430\u044e\u0441\u044c, \u0432\u0438 \u0437\u043d\u0430\u043b\u0438, \u044f\u043a \u0432\u0438\u0440\u0456\u0448\u0438\u0442\u0438 \u0437\u0430\u0432\u0434\u0430\u043d\u043d\u044f \u043e\u0431\u0440\u0456\u0437\u0430\u043d\u043d\u044f \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044c. \u042f \u0445\u043e\u0442\u0456\u0432 \u0431\u0438 \u043f\u043e\u0447\u0443\u0442\u0438 \u0432\u0430\u0448\u0456 \u0434\u0443\u043c\u043a\u0438 \u0442\u0430 \u043f\u0440\u043e\u043f\u043e\u0437\u0438\u0446\u0456\u0457 \u0443 \u0440\u043e\u0437\u0434\u0456\u043b\u0456 \u043a\u043e\u043c\u0435\u043d\u0442\u0430\u0440\u0456\u0432 \u043d\u0438\u0436\u0447\u0435.<\/p>\n
\u041f\u043e\u0432’\u044f\u0437\u0430\u043d\u0456 \u0441\u0442\u0430\u0442\u0442\u0456<\/h4>\n