{"id":25500,"date":"2021-05-30T19:03:00","date_gmt":"2021-05-30T16:03:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25500"},"modified":"2021-10-17T18:35:32","modified_gmt":"2021-10-17T15:35:32","slug":"pildi-uleslaadimine-karpimine-ja-suuruse-muutmine-jquery-ja-php-abil","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/pildi-uleslaadimine-karpimine-ja-suuruse-muutmine-jquery-ja-php-abil\/","title":{"rendered":"Pildi \u00fcleslaadimine, k\u00e4rpimine ja suuruse muutmine jQuery ja PHP abil"},"content":{"rendered":"

Kui teil on veebileht, v\u00f5iksite teatud stsenaariumide korral pilti k\u00e4rpida. Oletame, et soovite lubada kasutajal oma profiilipilte enne \u00fcleslaadimist k\u00e4rpida. Selles artiklis uurime, kuidas pilti imgAreaSelect ja PHP abil \u00fcles laadida, k\u00e4rpida ja suurust muuta.<\/p>\n

V\u00f5ime \u00f6elda, et pilti k\u00e4rpides muudame selle suurust, kohandades seda k\u00e4rbitud osa esitatud koordinaatidega.<\/p>\n

imgAreaSelect<\/a> on jQuery pistikprogramm, mis pakub funktsiooni piltide k\u00e4rpimiseks. See on kerge pistikprogramm ja seda on lihtne kasutada.<\/p>\n

Alustamiseks peate kasutama pistikprogrammi imgAreaSelect ja sekkumispildi<\/a> teeki. Kasutades rakendust imgAreaSelect, valime pildipiirkonna, mida tuleb k\u00e4rpida, ja Internention Image Library aitab meil serverisse salvestada pildi algse ja k\u00e4rbitud versiooni.<\/p>\n

Olles seda \u00f6elnud, vaatame pilti, kuidas pilti \u00fcles laadida, k\u00e4rpida ja suurust muuta jQuery ja PHP abil.<\/p>\n

Paigaldamine<\/h3>\n

Antud lingilt laadige<\/a> alla pistikprogramm imgAreaSelect<\/a>. Interventon Image installimiseks soovitan kasutada Composerit<\/a>. Sekkumispildi teegi installimiseks k\u00e4ivitage projekti juurkataloogis j\u00e4rgmine k\u00e4sk.<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
Kui olete valmis, veenduge, et teie kataloogistruktuur n\u00e4eks v\u00e4lja nagu allpool olev ekraanipilt.<\/p>\n
\"Pildi<\/a><\/p>\n
Kuidas kasutada imgAreaSelect<\/h3>\n
ImgAreaSelecti kasutamiseks peame k\u00f5igepealt lisama nende CSS- ja JS-faili koos jQuery teegiga.<\/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
J\u00e4rgmiseks vajame lihtsat vormi, kus kasutaja saab pilti sirvida ja serveripoolseks t\u00f6\u00f6tlemiseks esitada.<\/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
\u00dclaltoodud vormil kuvatakse faili sisestamise ja esitamise nupp. Olen v\u00f5tnud sellisel kujul peidetud v\u00e4ljad, mis peavad serveri poolel pilti k\u00e4rpima. P\u00f5him\u00f5tteliselt saadavad need varjatud v\u00e4ljad pildi k\u00e4rpimiseks koordinaadid.<\/p>\n
Kui kasutaja sirvib pilti, n\u00e4itame pilti, kus kasutaja saab valida ala, mida tal on vaja k\u00e4rpida. Allolev kood v\u00f5imaldab kasutajal pilti eelvaadet vaadata ja valida pildi ala, mida k\u00e4rpida.<\/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
Serveripoolne pildi \u00fcleslaadimine, k\u00e4rpimine ja suuruse muutmine<\/h3>\n
Vormi esitamisel suunatakse see crop.php<\/code>faili, kuhu me serveri poolse pildi \u00fcles laadime ja k\u00e4rpime. See fail aktsepteerib k\u00e4rpimiseks faili sisendit ja pildi koordinaate.<\/p>\n
K\u00f5igepealt lisame sekkumispildi teegi keskkonna.<\/p>\n
<?php\nrequire 'vendor\/autoload.php';\n\u00a0\nuse InterventionImageImageManagerStatic as Image;<\/code><\/pre>\n
crop()<\/code>Algse pildi k\u00e4rbitud versiooni loomiseks kasutan teegi meetodit. K\u00e4rpimise() funktsiooni parameetrid on x-telje ja y-telje laius, k\u00f5rgus ning koordinaadid. V\u00f5ite selle kohta rohkem lugeda nende dokumentatsioonist<\/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
See selleks! N\u00fc\u00fcd, kui katsetate voogu, saate kataloogide ’images’ ja ‘crop’ alla salvestatud piltide originaalse ja k\u00e4rbitud versiooni.<\/p>\n
M\u00e4\u00e4ra pildil maksimaalne laius<\/h3>\n
M\u00f5nikord v\u00f5ib kasutaja soovida m\u00e4\u00e4ratleda pildi k\u00e4rbitud versioonide maksimaalne laius. imgAreaSelect pakub pildi l\u00f5pptulemuse kohandamiseks mitmeid v\u00f5imalusi, nagu aspektRatio, maxWidth, maxHeight jne. Kasutaja saab pildi maksimaalse laiuse m\u00e4\u00e4ramiseks kasutada valikut maxWidth.<\/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
Loodan, et m\u00f5istate, kuidas pilti \u00fcles laadida, k\u00e4rpida ja suurust muuta jQuery ja PHP abil. Tahaksin teada teie m\u00f5tteid allpool olevas kommentaaride jaotises.<\/p>\n
seotud artiklid<\/h4>\n