{"id":28733,"date":"2021-05-30T18:57:00","date_gmt":"2021-05-30T15:57:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28733"},"modified":"2021-10-18T03:38:38","modified_gmt":"2021-10-18T00:38:38","slug":"jak-przeslac-przyciac-i-zmienic-rozmiar-obrazu-za-pomoca-jquery-i-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-przeslac-przyciac-i-zmienic-rozmiar-obrazu-za-pomoca-jquery-i-php\/","title":{"rendered":"Jak przes\u0142a\u0107, przyci\u0105\u0107 i zmieni\u0107 rozmiar obrazu za pomoc\u0105 jQuery i PHP"},"content":{"rendered":"

Je\u015bli prowadzisz witryn\u0119 internetow\u0105, w niekt\u00f3rych sytuacjach mo\u017cesz chcie\u0107 przyci\u0105\u0107 obraz. Za\u0142\u00f3\u017cmy, \u017ce chcesz zezwoli\u0107 u\u017cytkownikowi na przycinanie zdj\u0119\u0107 profilowych przed przes\u0142aniem. W tym artykule dowiemy si\u0119, jak przesy\u0142a\u0107, przycina\u0107 i zmienia\u0107 rozmiar obrazu za pomoc\u0105 imgAreaSelect i PHP.<\/p>\n

Mo\u017cemy powiedzie\u0107, \u017ce kiedy przycinamy obraz, w rzeczywisto\u015bci zmieniamy jego rozmiar, dostosowuj\u0105c go do podanych wsp\u00f3\u0142rz\u0119dnych przyci\u0119tej cz\u0119\u015bci.<\/p>\n

imgAreaSelect<\/a> to wtyczka jQuery, kt\u00f3ra zapewnia funkcj\u0119 przycinania obraz\u00f3w. Jest to lekka wtyczka i \u0142atwa w u\u017cyciu.<\/p>\n

Aby rozpocz\u0105\u0107, musisz u\u017cy\u0107 wtyczki imgAreaSelect i biblioteki obraz\u00f3w interwencyjnych<\/a>. Za pomoc\u0105 imgAreaSelect wybieramy obszar obrazu, kt\u00f3ry nale\u017cy wykadrowa\u0107, a biblioteka obraz\u00f3w Internention pomaga nam przechowywa\u0107 oryginaln\u0105 i skopiowan\u0105 wersj\u0119 obrazu na serwerze.<\/p>\n

Powiedziawszy to, przyjrzyjmy si\u0119, jak przes\u0142a\u0107, przyci\u0105\u0107 i zmieni\u0107 rozmiar obrazu za pomoc\u0105 jQuery i PHP.<\/p>\n

Instalacja<\/h3>\n

Pobierz wtyczk\u0119 imgAreaSelect<\/a> z podanego linku. Do instalacji Interventon Image polecam u\u017cy\u0107 Composer<\/a>. Uruchom poni\u017csze polecenie w katalogu g\u0142\u00f3wnym projektu, aby zainstalowa\u0107 bibliotek\u0119 obraz\u00f3w interwencji.<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
Kiedy sko\u0144czysz, upewnij si\u0119, \u017ce struktura katalog\u00f3w wygl\u0105da jak zrzut ekranu poni\u017cej.<\/p>\n
\"Jak<\/a><\/p>\n
Jak korzysta\u0107 z imgAreaSelect<\/h3>\n
Aby korzysta\u0107 z imgAreaSelect, musimy najpierw do\u0142\u0105czy\u0107 ich plik CSS i JS wraz z bibliotek\u0105 jQuery.<\/p>\n
<link rel=\"stylesheet\" href=\"css\/imgareaselect.css\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script src=\"js\/jquery.imgareaselect.js\"><\/script><\/code><\/pre>\n
Nast\u0119pnie potrzebujemy prostego formularza, w kt\u00f3rym u\u017cytkownik mo\u017ce przegl\u0105da\u0107 obraz i przes\u0142a\u0107 go do przetwarzania po stronie serwera.<\/p>\n
<form action=\"crop.php\" method=\"post\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0Upload Image: <input type=\"file\" name=\"image\" id=\"image\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"x1\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"y1\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"w\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"h\" value=\"\" \/><br><br>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form>\n\u00a0\n<p><img id=\"previewimage\" style=\"display:none;\"\/><\/p><\/code><\/pre>\n
Powy\u017cszy formularz wy\u015bwietli dane wej\u015bciowe pliku i przycisk prze\u015blij. Wzi\u0105\u0142em w formularzu ukryte pola, kt\u00f3re b\u0119d\u0105 musia\u0142y przyci\u0105\u0107 obraz po stronie serwera. Zasadniczo te ukryte pola wysy\u0142aj\u0105 wsp\u00f3\u0142rz\u0119dne obrazu do przyci\u0119cia.<\/p>\n
Gdy u\u017cytkownik przegl\u0105da obraz, poka\u017cemy obraz, na kt\u00f3rym u\u017cytkownik mo\u017ce wybra\u0107 obszar, kt\u00f3ry musi przyci\u0105\u0107. Poni\u017cszy kod umo\u017cliwia u\u017cytkownikowi podgl\u0105d obrazu i wybranie obszaru obrazu do przyci\u0119cia.<\/p>\n
<script>\njQuery(function($) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0var p = $(\"#previewimage\");\n\u00a0\u00a0\u00a0\u00a0$(\"body\").on(\"change\", \"#image\", function(){\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var imageReader = new FileReader();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageReader.readAsDataURL(document.getElementById(\"image\").files[0]);\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageReader.onload = function (oFREvent) {\n\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};\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$('#previewimage').imgAreaSelect({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onSelectEnd: function (img, selection) {\n\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$('input[name=\"y1\"]').val(selection.y1);\n\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$('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}\n\u00a0\u00a0\u00a0\u00a0});\n});\n<\/script><\/code><\/pre>\n
Przesy\u0142anie po stronie serwera, przycinanie i zmiana rozmiaru obrazu<\/h3>\n
Po przes\u0142aniu formularza przekierowuje do crop.php<\/code>pliku, do kt\u00f3rego przesy\u0142amy i przycinamy obraz po stronie serwera. Ten plik akceptuje dane wej\u015bciowe i wsp\u00f3\u0142rz\u0119dne obrazu do przyci\u0119cia.<\/p>\n
Najpierw uwzgl\u0119dnijmy \u015brodowisko biblioteki Intervention Image.<\/p>\n
<?php\nrequire 'vendor\/autoload.php';\n\u00a0\nuse InterventionImageImageManagerStatic as Image;<\/code><\/pre>\n
U\u017cyj\u0119 crop()<\/code>metody biblioteki, aby utworzy\u0107 przyci\u0119t\u0105 wersj\u0119 oryginalnego obrazu. Parametry funkcji crop() to szeroko\u015b\u0107, wysoko\u015b\u0107 i wsp\u00f3\u0142rz\u0119dne osi x i y. Mo\u017cesz przeczyta\u0107 wi\u0119cej na ten temat w ich dokumentacji<\/a>.<\/p>\n
crop.php<\/strong><\/p>\n
<?php\nrequire 'vendor\/autoload.php';\n\u00a0\nuse InterventionImageImageManagerStatic as Image;\n\u00a0\nif(isset($_POST['submit'])) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0if(isset($_FILES['image']['name']) && !empty($_FILES['image']['name'])) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(!file_exists('images')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir('images', 0755);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = $_FILES['image']['name'];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filepath = 'images\/'. $filename;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0move_uploaded_file($_FILES['image']['tmp_name'], $filepath);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(!file_exists('images\/crop')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir('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($filepath);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$croppath = 'images\/crop\/'. $filename;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->crop($_POST['w'], $_POST['h'], $_POST['x1'], $_POST['y1']);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->save($croppath);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo \"<img src='\". $croppath .\"' \/>\";\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Ot\u00f3\u017c \u200b\u200bto! Teraz, je\u015bli przetestujesz przep\u0142yw, otrzymasz oryginaln\u0105 i przyci\u0119t\u0105 wersj\u0119 obraz\u00f3w przechowywanych odpowiednio w katalogach \u201eimages" i \u201ecrop”.<\/p>\n
Ustaw maksymaln\u0105 szeroko\u015b\u0107 obrazu<\/h3>\n
Czasami u\u017cytkownik mo\u017ce chcie\u0107 zdefiniowa\u0107 maksymaln\u0105 szeroko\u015b\u0107 przyci\u0119tej wersji obrazu. 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, aby ustawi\u0107 maksymaln\u0105 szeroko\u015b\u0107 obrazu.<\/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
Mam nadziej\u0119, \u017ce rozumiesz, jak przesy\u0142a\u0107, przycina\u0107 i zmienia\u0107 rozmiar obrazu za pomoc\u0105 jQuery i PHP. Chcia\u0142bym pozna\u0107 Twoje przemy\u015blenia w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n