Pildi üleslaadimine, kärpimine ja suuruse muutmine jQuery ja PHP abil
Kui teil on veebileht, võiksite teatud stsenaariumide korral pilti kärpida. Oletame, et soovite lubada kasutajal oma profiilipilte enne üleslaadimist kärpida. Selles artiklis uurime, kuidas pilti imgAreaSelect ja PHP abil üles laadida, kärpida ja suurust muuta.
Võime öelda, et pilti kärpides muudame selle suurust, kohandades seda kärbitud osa esitatud koordinaatidega.
imgAreaSelect on jQuery pistikprogramm, mis pakub funktsiooni piltide kärpimiseks. See on kerge pistikprogramm ja seda on lihtne kasutada.
Alustamiseks peate kasutama pistikprogrammi imgAreaSelect ja sekkumispildi teeki. Kasutades rakendust imgAreaSelect, valime pildipiirkonna, mida tuleb kärpida, ja Internention Image Library aitab meil serverisse salvestada pildi algse ja kärbitud versiooni.
Olles seda öelnud, vaatame pilti, kuidas pilti üles laadida, kärpida ja suurust muuta jQuery ja PHP abil.
Paigaldamine
Antud lingilt laadige alla pistikprogramm imgAreaSelect. Interventon Image installimiseks soovitan kasutada Composerit. Sekkumispildi teegi installimiseks käivitage projekti juurkataloogis järgmine käsk.
composer require intervention/imageKui olete valmis, veenduge, et teie kataloogistruktuur näeks välja nagu allpool olev ekraanipilt.
Kuidas kasutada imgAreaSelect
ImgAreaSelecti kasutamiseks peame kõigepealt lisama nende CSS- ja JS-faili koos jQuery teegiga.
<link rel="stylesheet" href="css/imgareaselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/jquery.imgareaselect.js"></script>Järgmiseks vajame lihtsat vormi, kus kasutaja saab pilti sirvida ja serveripoolseks töötlemiseks esitada.
<form action="crop.php" method="post" enctype="multipart/form-data">
Upload Image: <input type="file" name="image" id="image" />
<input type="hidden" name="x1" value="" />
<input type="hidden" name="y1" value="" />
<input type="hidden" name="w" value="" />
<input type="hidden" name="h" value="" /><br><br>
<input type="submit" name="submit" value="Submit" />
</form>
<p><img id="previewimage" style="display:none;"/></p>Ülaltoodud vormil kuvatakse faili sisestamise ja esitamise nupp. Olen võtnud sellisel kujul peidetud väljad, mis peavad serveri poolel pilti kärpima. Põhimõtteliselt saadavad need varjatud väljad pildi kärpimiseks koordinaadid.
Kui kasutaja sirvib pilti, näitame pilti, kus kasutaja saab valida ala, mida tal on vaja kärpida. Allolev kood võimaldab kasutajal pilti eelvaadet vaadata ja valida pildi ala, mida kärpida.
<script>
jQuery(function($) {
var p = $("#previewimage");
$("body").on("change", "#image", function(){
var imageReader = new FileReader();
imageReader.readAsDataURL(document.getElementById("image").files[0]);
imageReader.onload = function (oFREvent) {
p.attr('src', oFREvent.target.result).fadeIn();
};
});
$('#previewimage').imgAreaSelect({
onSelectEnd: function (img, selection) {
$('input[name="x1"]').val(selection.x1);
$('input[name="y1"]').val(selection.y1);
$('input[name="w"]').val(selection.width);
$('input[name="h"]').val(selection.height);
}
});
});
</script>Serveripoolne pildi üleslaadimine, kärpimine ja suuruse muutmine
Vormi esitamisel suunatakse see crop.phpfaili, kuhu me serveri poolse pildi üles laadime ja kärpime. See fail aktsepteerib kärpimiseks faili sisendit ja pildi koordinaate.
Kõigepealt lisame sekkumispildi teegi keskkonna.
<?php
require 'vendor/autoload.php';
use InterventionImageImageManagerStatic as Image;crop()Algse pildi kärbitud versiooni loomiseks kasutan teegi meetodit. Kärpimise() funktsiooni parameetrid on x-telje ja y-telje laius, kõrgus ning koordinaadid. Võite selle kohta rohkem lugeda nende dokumentatsioonist.
crop.php
<?php
require 'vendor/autoload.php';
use InterventionImageImageManagerStatic as Image;
if(isset($_POST['submit'])) {
if(isset($_FILES['image']['name']) && !empty($_FILES['image']['name'])) {
if(!file_exists('images')) {
mkdir('images', 0755);
}
$filename = $_FILES['image']['name'];
$filepath = 'images/'. $filename;
move_uploaded_file($_FILES['image']['tmp_name'], $filepath);
if(!file_exists('images/crop')) {
mkdir('images/crop', 0755);
}
// crop image
$img = Image::make($filepath);
$croppath = 'images/crop/'. $filename;
$img->crop($_POST['w'], $_POST['h'], $_POST['x1'], $_POST['y1']);
$img->save($croppath);
echo "<img src='". $croppath ."' />";
}
}See selleks! Nüüd, kui katsetate voogu, saate kataloogide ‘images’ ja ‘crop’ alla salvestatud piltide originaalse ja kärbitud versiooni.
Määra pildil maksimaalne laius
Mõnikord võib kasutaja soovida määratleda pildi kärbitud versioonide maksimaalne laius. imgAreaSelect pakub pildi lõpptulemuse kohandamiseks mitmeid võimalusi, nagu aspektRatio, maxWidth, maxHeight jne. Kasutaja saab pildi maksimaalse laiuse määramiseks kasutada valikut maxWidth.
$('#previewimage').imgAreaSelect({
maxWidth: '1000', // this value is in pixels
onSelectEnd: function (img, selection) {
$('input[name="x1"]').val(selection.x1);
$('input[name="y1"]').val(selection.y1);
$('input[name="w"]').val(selection.width);
$('input[name="h"]').val(selection.height);
}
});Loodan, et mõistate, kuidas pilti üles laadida, kärpida ja suurust muuta jQuery ja PHP abil. Tahaksin teada teie mõtteid allpool olevas kommentaaride jaotises.