{"id":25063,"date":"2021-05-30T18:42:00","date_gmt":"2021-05-30T15:42:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25063"},"modified":"2021-10-17T20:31:49","modified_gmt":"2021-10-17T17:31:49","slug":"kuinka-ladata-rajata-ja-muuttaa-kuvan-kokoa-jqueryn-ja-php-n-avulla","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-ladata-rajata-ja-muuttaa-kuvan-kokoa-jqueryn-ja-php-n-avulla\/","title":{"rendered":"Kuinka ladata, rajata ja muuttaa kuvan kokoa jQueryn ja PHP: n avulla"},"content":{"rendered":"

Jos sinulla on verkkosivusto, kannattaa ehk\u00e4 rajata kuva tietyiss\u00e4 tilanteissa. Oletetaan, ett\u00e4 haluat antaa k\u00e4ytt\u00e4j\u00e4n rajata profiilikuvat ennen lataamista. T\u00e4ss\u00e4 artikkelissa tutkitaan kuvan lataamista, rajaamista ja koon muuttamista imgAreaSelectin ja PHP: n avulla.<\/p>\n

Voimme sanoa, ett\u00e4 kun rajaamme kuvaa, muutamme sen kokoa s\u00e4\u00e4t\u00e4m\u00e4ll\u00e4 rajatun osan annetuilla koordinaateilla.<\/p>\n

imgAreaSelect<\/a> on jQuery-laajennus, joka tarjoaa ominaisuuden kuvien rajaamiseen. Se on kevyt laajennus ja helppo k\u00e4ytt\u00e4\u00e4.<\/p>\n

Aloittamiseksi sinun on k\u00e4ytett\u00e4v\u00e4 imgAreaSelect-laajennusta ja Intervention Image<\/a> -kirjastoa. K\u00e4ytt\u00e4m\u00e4ll\u00e4 imgAreaSelect valitsemme kuva-alueen, joka on rajattava, ja Internention Image -kirjasto auttaa meit\u00e4 tallentamaan kuvan alkuper\u00e4isen ja kopioidun version palvelimelle.<\/p>\n

T\u00e4m\u00e4n sanottuaan katsotaanpa, kuinka kuva ladataan, rajataan ja muutetaan kokoa jQueryn ja PHP: n avulla.<\/p>\n

Asennus<\/h3>\n

Lataa imgAreaSelect-<\/a> laajennus annetusta linkist\u00e4. Interventon Image -sovelluksen asentamiseen suosittelen Composerin<\/a> k\u00e4ytt\u00f6\u00e4. Asenna Intervention Image -kirjasto suorittamalla alla oleva komento projektin juurihakemistossa.<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
Kun olet valmis, varmista, ett\u00e4 hakemistorakenne n\u00e4ytt\u00e4\u00e4 alla olevalta kuvakaappaukselta.<\/p>\n
\"Kuinka<\/a><\/p>\n
Kuinka k\u00e4ytt\u00e4\u00e4 imgAreaSelect-ohjelmaa<\/h3>\n
Jotta voisimme k\u00e4ytt\u00e4\u00e4 imgAreaSelectia, meid\u00e4n on ensin sis\u00e4llytett\u00e4v\u00e4 heid\u00e4n CSS- ja JS-tiedosto jQuery-kirjaston kanssa.<\/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
Seuraavaksi vaaditaan yksinkertainen lomake, jossa k\u00e4ytt\u00e4j\u00e4 voi selata kuvaa ja l\u00e4hett\u00e4\u00e4 sen palvelinpuolen k\u00e4sittelyyn.<\/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
Yll\u00e4 oleva lomake n\u00e4ytt\u00e4\u00e4 tiedoston sy\u00f6tt\u00f6- ja l\u00e4hetyspainikkeen. Olen ottanut piilotetut kent\u00e4t muodossa, jonka t\u00e4ytyy rajata kuva palvelinpuolella. Pohjimmiltaan n\u00e4m\u00e4 piilotetut kent\u00e4t l\u00e4hett\u00e4v\u00e4t kuvan koordinaatit sen rajaamista varten.<\/p>\n
Kun k\u00e4ytt\u00e4j\u00e4 selaa kuvaa, n\u00e4yt\u00e4mme kuvan, jossa k\u00e4ytt\u00e4j\u00e4 voi valita rajattavan alueen. Alla olevan koodin avulla k\u00e4ytt\u00e4j\u00e4 voi esikatsella kuvaa ja valita kuvan rajattavan alueen.<\/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
Palvelinpuolen lataaminen, rajaaminen ja koon muuttaminen<\/h3>\n
Kun lomake l\u00e4hetet\u00e4\u00e4n, se ohjaa crop.php<\/code>tiedostoon, johon lataamme ja rajaamme kuvan palvelinpuolella. T\u00e4m\u00e4 tiedosto hyv\u00e4ksyy kuvan sy\u00f6tteen ja kuvan koordinaatit rajattavaksi.<\/p>\n
Ensinn\u00e4kin sis\u00e4llytet\u00e4\u00e4n Intervention Image -kirjaston ymp\u00e4rist\u00f6.<\/p>\n
<?php\nrequire 'vendor\/autoload.php';\n\u00a0\nuse InterventionImageImageManagerStatic as Image;<\/code><\/pre>\n
Aion k\u00e4ytt\u00e4\u00e4 crop()<\/code>kirjastomenetelm\u00e4\u00e4 luodaksesi rajatun version alkuper\u00e4isest\u00e4 kuvasta. Rajaus() -funktion parametrit ovat leveys, korkeus ja x-akselin ja y-akselin koordinaatit. Voit lukea lis\u00e4\u00e4 heid\u00e4n dokumentoinnistaan<\/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
Se siit\u00e4! Nyt kun testaat kulkua, saat alkuper\u00e4isen ja rajatun version kuvista, jotka on tallennettu vastaavasti kuvien ja rajaettujen hakemistojen alle.<\/p>\n
Aseta kuvan suurin leveys<\/h3>\n
Joskus k\u00e4ytt\u00e4j\u00e4 voi haluta m\u00e4\u00e4ritell\u00e4 kuvan rajattaville versioille enimm\u00e4isleveyden. imgAreaSelect tarjoaa useita vaihtoehtoja, kuten kuvasuhde, maxWidth, maxHeight jne., jotta kuvan lopputulos voidaan mukauttaa. K\u00e4ytt\u00e4j\u00e4 voi m\u00e4\u00e4ritt\u00e4\u00e4 kuvan enimm\u00e4isleveyden maxWidth-vaihtoehdon avulla.<\/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
Toivon, ett\u00e4 ymm\u00e4rr\u00e4t kuinka ladata, rajata ja muuttaa kuvan kokoa jQueryn ja PHP: n avulla. Haluaisin tiet\u00e4\u00e4 ajatuksesi alla olevasta kommenttiosasta.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n