În principiu, nu este nimic mai ușor decât să pregătești o fotografie în prealabil și să folosești tehnica spritelor pentru a schimba imaginile unul cu celălalt. Dar această soluție este departe de a ne potrivi întotdeauna.
De exemplu, permitem utilizatorilor site-ului nostru să descarce imagini, cărora ar trebui să le aplice efectul dorit. Evident, aici trebuie deja să procesăm imaginile descărcate pe partea serverului (PHP) sau pe client (JS), astfel încât site-ul să afișeze o imagine BW.
Să trecem la sarcină ...
Planul de lecție
1. Implementarea sarcinii în PHP
2. Realizarea sarcinii cu jQuery
Cadrul YII2. Dezvoltare rapidă cu cadrul PHP modern
Aflați complexitatea dezvoltării web moderne cu ajutorul cadrului YII2
Detalii de manual
Dimensiune arhiva: 78 Mb
1. Implementarea sarcinii în PHP
Prima modalitate, pe care o considerăm, vă permite să procesați imagini pe partea serverului. Vom face acest lucru folosind PHP. Imediat merită menționat faptul că pentru succesul acestei versiuni metode de PHP pe versiunea PHP serverul nu trebuie să fie mai mic decât al cincilea, și ar trebui să fie o biblioteca GD (bibliotecă pentru imagini). Cum să verificați toate acestea, vom lua în considerare mai jos.
Deci, mai întâi, creați pe server 2 foldere, numiți-le, de exemplu, "blackwhite" și "color". Primul dosar va memora imaginile BCH, a doua - culoarea. Nu vom lua în considerare descărcarea imaginilor de către utilizatori pe server și afișarea acestor imagini pe site. Toate acestea puteți găsi în lecțiile noastre anterioare, în special în această lecție Descărcați imagini cu redimensionare.
Acum, în fișierul de script (de exemplu, index.php) creăm variabilele necesare pentru lucrare:
Până în prezent, după cum era de așteptat, este afișată imaginea color disponibilă:
Acum, să trecem la cele mai interesante - pentru a procesa imagini folosind PHP. Vom putea efectua această procesare cu funcțiile bibliotecii GD. Acesta este un fel de "Photoshop în PHP", dacă aș putea spune asta. Să verificăm dinainte dacă biblioteca GD este instalată pe serverul nostru. Puteți face acest lucru după cum urmează:
Funcția function_exists () verifică dacă o anumită funcție este definită și returnează TRUE dacă funcția este acceptată. În acest caz, am verificat dacă este suportat imagefilter (). Dacă funcția este acceptată, ecranul va afișa "OK". În cazul în care funcția nu este definită, cereți gazdei să instaleze biblioteca GD.
Activitatea ulterioară se va baza pe utilizarea a 4 funcții:
imageCreateFromJPEG () - creați o imagine nouă din cea existentă;
imageFilter () - aplicarea filtrului în imagine;
imagejpeg () - salvarea imaginii;
imagedestroy () - ștergeți imaginea.
Rețineți că se presupune că funcționează cu imagini JPG și, prin urmare, se utilizează funcțiile corespunzătoare. Imaginile Esoy vor fi în format GIF, apoi ar trebui să folosim funcțiile imageCreateFromGIF și imageGIF. Deci, avem imaginea color originală, pe baza căreia trebuie să creăm o imagine BW. Primul lucru pe care îl facem este să creezi o imagine nouă din cea existentă. Pentru a face acest lucru, specificăm calea spre imagine ca parametru de funcție:
Acum avem un duplicat al imaginii noastre color. Indicatorul pentru imaginea creată (resursa) este inclus în variabila $ img. Pentru a procesa imaginea, utilizăm a doua funcție - imageFilter (). Această funcție are 2 parametri obligatorii - indicatorul și filtrul utilizat. Puteți găsi toate tipurile de filtre în documentația acestei funcții. Vom avea nevoie de filtrul IMG_FILTER_GRAYSCALE:
Aici creăm o condiție prin care verificăm dacă există o resursă și dacă aplicația filtrului a trecut cu succes. Dacă condiția returnează TRUE, atunci putem salva imaginea. În caz contrar, vom determina o eroare.
Cadrul YII2. Dezvoltare rapidă cu cadrul PHP modern
Aflați complexitatea dezvoltării web moderne cu ajutorul cadrului YII2
Salvați imaginea pentru a ajuta la a treia funcție din listă, care are 2 parametri necesari - resursa și calea de salvare a imaginii:
Tot ce trebuie să faceți este să ștergeți imaginea de lucru (resursă) după salvare. Aceasta face ultima funcție a listei:
Dacă totul merge bine, atunci în directorul alb-negru după începerea scenariului va apărea imaginea 1.jpg, dar această imagine va fi deja decolorată. Să-l aducem pe ecran:
Pe ecran se afișează 2 imagini:
Acum rămâne să se proiecteze întregul cod sub forma unei funcții care să o facă acceptabilă pentru utilizarea repetată și pentru a repara codul. Deci, funcția va arăta astfel:
Să analizăm noile momente. Mai întâi, înainte de funcțiile imageCreateFromJPEG () și imagedestroy (), am introdus simbolul de suprimare a erorilor - "@". Aceasta se face pentru a afișa textul nostru de eroare în cazul unei erori în crearea imaginii.
Apoi, vedem că funcția este furnizată nu cu 3 parametri, ci cu 4 ... aceasta:
$ colorFolder - calea către dosarul de imagini color;
$ bwFolder - calea către dosarul B & W;
$ file - numele imaginii;
$ quality - calitatea fișierului salvat.
Ultimul parametru pe care îl putem folosi pentru funcția imagejpeg (), indicând al treilea parametru opțional al acestei funcții. Acest parametru poate avea un număr întreg de la 0 la 100 și este responsabil pentru calitate. Valoarea implicită este 75.
Ca rezultat, funcția noastră returnează valoarea variabilei $ res, care poate fi TRUE sau FALSE. Acest lucru este convenabil, deoarece când funcționează funcția, puteți verifica ce sa întors.
Rămâne să descrieți rezultatul imaginii BW din cod, care se schimbă într-o imagine colorată la evenimentul de mișcare a mouse-ului. Când mouse-ul părăsește zona imaginii, trebuie să se schimbe din nou în BW. Codul complet poate fi:
Excelent! Am implementat sarcina folosind PHP. Este timpul să începeți a doua parte a lecției.
2. Realizarea sarcinii cu jQuery
Pentru a doua opțiune, avem nevoie doar de un director pentru imagini color, deoarece vom procesa imagini în zbor. De asemenea, avem nevoie de o bibliotecă jQuery (o puteți găsi în materiale suplimentare sau o puteți descărca off-line). Și, în sfârșit, avem nevoie de un plug-in, care va produce decolorarea imaginilor. Acest plugin - grayscale.js - veți găsi în materiale suplimentare.
Deci, conectăm scripturile necesare pentru lucrare pe pagina noastră - o voi numi, de exemplu, color.html:
Acum, să afișăm imaginile color pe ecran:
Aici am adăugat o altă imagine. Excelent, acum afișează 2 imagini color:
Acum, tot ce avem nevoie este să apelați funcția în tonuri de gri () a plug-in-ului pentru imagini (acestea au clasa de culoare):
Dacă vedeți rezultatul în browser, atunci vom vedea imaginea BW:
În funcție de sarcină, trebuie să readuceți culoarea la imagini atunci când plasați mouse-ul peste ele și desaturați-le din nou când mouse-ul este plecat. În aceasta vom folosi metoda jQuery - hover - și metoda de resetare a pluginului:
Acum, totul
Care dintre cele două opțiuni care trebuie luate pentru implementarea sarcinii stabilite la începutul lecției, vă va alege. Trebuie doar să fiți avertizat că a doua opțiune poate fi utilizată numai pentru dimensiuni relativ mici de imagini și pentru un număr mic de imagini pe pagină.
Aceasta conchide această lecție. Mult noroc pentru tine și pentru noi întâlniri.
Cadrul YII2. Dezvoltare rapidă cu cadrul PHP modern
Aflați complexitatea dezvoltării web moderne cu ajutorul cadrului YII2
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Articole similare
Trimiteți-le prietenilor: