Hozzon létre egy fekete-fehér képet egy színből
Elvileg nincs semmi könnyebb előre elkészíteni a képet, és a sprites technikát használni a képek egymás közötti megváltoztatására. De ez a megoldás messze nem mindig alkalmas számunkra.
Például engedélyezzük a webhelyünk felhasználói számára képek letöltését, amelyekhez a kívánt hatást kell alkalmazni. Nyilvánvaló, hogy itt már meg kell dolgozni a letöltött képeket a szerveroldalon (PHP) vagy az ügyfélen (JS), hogy a webhely BW képet jelenítsen meg.
Hát, menjünk le a feladathoz ...
Lecke terv
1. A feladat végrehajtása PHP-ben
2. Feladata a feladat jQuery-el
Az YII2 keretrendszer. Gyors fejlesztés a modern PHP keretrendszerrel
Ismerje meg a modern webfejlesztés bonyolultságait az YII2 keretrendszer segítségével
Tankönyv részletei
Archív méret: 78 Mb
1. A feladat végrehajtása PHP-ben
Az első megoldás, amelyet figyelembe vessünk, lehetővé teszi a képek feldolgozását a szerver oldalon. Ezt a PHP használatával fogjuk megtenni. Azonnal érdemes megemlíteni, hogy ennek a módszernek a sikeres működéséhez a PHP verziója a kiszolgálón egy PHP verziónak kell lennie, amely nem alacsonyabb, mint az ötödik, és tartalmaznia kell egy GD könyvtárat (könyvtár a képek feldolgozásához). Hogyan ellenőrizzük mindezt, az alábbiakban figyelembe vesszük.
Tehát először hozzon létre a szerveren 2 mappát, hívja őket például "blackwhite" és "color". Az első mappában a BCH képek tárolódnak, a második színben. Nem fogjuk itt megvizsgálni, hogy a felhasználók hogyan töltenek le képeket a szerverre, és ezeket a képeket a webhelyen megjelenítik. Mindezeket a korábbi leckéinkben találja meg, különösen a leckét Képek átméretezésével.
Most, a parancsfájlban (például index.php) létrehozzuk a feladathoz szükséges változókat:
A várakozások szerint eddig a rendelkezésre álló színes kép jelenik meg:
Most menjünk le a legérdekesebbek közé - a képek feldolgozásával a PHP használatával. Ezt a feldolgozást elvégezhetjük a GD könyvtár funkcióival. Ez egyfajta "Photoshop PHP-ben", ha ezt mondhatom. Ellenőrizzük előre, hogy a GD könyvtár telepítve van-e a kiszolgálón. Ezt a következők szerint teheti meg:
A függvény function_exists () ellenőrzi, hogy egy adott függvény definiálva van-e és TRUE-t ad vissza, ha a függvény támogatott. Ebben az esetben ellenőriztük, hogy támogatott-e a imagefilter (). Ha a funkciót támogatja, a képernyőn megjelenik az "OK". Abban az esetben, ha a funkció nincs megadva, kérje meg a gazdagépet a GD könyvtár telepítéséhez.
További munkák 4 funkció használatán alapulnak:
imageCreateFromJPEG () - készítsen új képet a létezőből;
imageFilter () - a szűrő alkalmazása a képre;
imagejpeg () - a kép mentése;
imagedestroy () - törölje a képet.
Megjegyzendő, hogy JPG-képekkel dolgozik, ezért a megfelelő funkciókat használják. Az Esoy képek GIF formátumban lesznek, akkor a imageCreateFromGIF és a imageGIF funkciókat kell használnunk. Tehát az eredeti színes képünk van, amelynek alapján BW-képet kell létrehoznunk. Az első dolog, hogy létrehozzunk egy új képet a létezőből. Ehhez megadjuk a kép elérési útját függvényparaméterként:
Most van egy dupla színes képünk. A létrehozott kép (erőforrás) mutatója a $ img $ változóban található. A kép feldolgozásához a második funkciót - imageFilter () használjuk. Ez a funkció 2 kötelező paraméterrel rendelkezik - a mutató és a használt szűrő. A funkció dokumentációjában megtalálható minden típusú szűrő. Szükségünk lesz az IMG_FILTER_GRAYSCALE szűrőre:
Itt létrehozunk egy olyan feltételt, amellyel ellenőrizzük, van-e erőforrás, és hogy sikerült-e a szűrő alkalmazása. Ha a feltétel visszatér TRUE, akkor mentheti a képet. Ellenkező esetben hibát fogunk okozni.
Az YII2 keretrendszer. Gyors fejlesztés a modern PHP keretrendszerrel
Ismerje meg a modern webfejlesztés bonyolultságait az YII2 keretrendszer segítségével
Mentse el a képet nekünk, segítsünk a harmadik funkciónak a listából, melynek 2 szükséges paramétere van - az erőforrás és a kép mentési útja:
Mindössze annyit kell tennünk, hogy a mentés után töröljük a munkaképet (erőforrást). Ez teszi a lista utolsó funkcióját:
Ha minden jól megy, akkor a blackwhite könyvtárban a script kezdete után megjelenik a 1.jpg kép, de ez a kép már elszíneződött. Vigyük a képernyőre:
A képernyőn 2 kép látható:
Most meg kell terveznie az összes kódot egy funkció formájában, hogy elfogadható legyen az ismételt felhasználás és a kód javítása érdekében. Tehát a funkció így fog kinézni:
Elemezzük az új pillanatokat. Először a imageCreateFromJPEG () és imagedestroy () függvények elé helyezzük a hiba elnyomó szimbólumot - "@". Ez azért van, hogy hibaüzenetet jelenítsen meg a kép létrehozásának hibája esetén.
Ezután látjuk, hogy a funkció nem 3 paraméterrel, hanem 4 ... ezzel:
$ colorFolder - a színes képek mappájának elérési útja;
$ bwFolder - a B & W mappa elérési útja;
$ fájl - a kép neve;
$ minőségi - a mentett fájl minősége.
Az utolsó paraméter, amit a imagejpeg () függvényhez használhatunk, jelezve ezzel a funkció harmadik opcionális paraméterét. Ez a paraméter 0-tól 100-ig terjedő egész számot vehet fel, és felelős a minőségért. Az alapértelmezett érték 75.
Ennek eredményeként a függvényünk visszaadja a $ res változó értékét, amely lehet TRUE vagy FALSE. Ez kényelmes, mivel a funkció működése közben ellenőrizheti, hogy mit küld.
Továbbra is leírja a BW kép kimenetét a kódban, amely az egér lebegés eseményén színesre változik. Ha az egér elhagyja a képterületet, akkor ismét át kell térnie a BW-re. A teljes kód lehet:
Kiváló! A feladatot a PHP használatával valósítottuk meg. Ideje elkezdeni a lecke második részét.
2. Feladata a feladat jQuery-el
A második lehetőséghez csak a színes képekhez szükséges könyvtárra van szükségünk, mivel a képeket pillanatnyilag feldolgozni fogjuk. Szükségünk van egy jQuery könyvtárra is (további anyagokban megtalálható, vagy off-line letölthető). És végül szükségünk van egy plug-in-re, ami a képek elszíneződését eredményezi. Ez a plugin - grayscale.js - további anyagokat talál.
Tehát a munkához szükséges szkripteket az oldalunkhoz kapcsoljuk - megnevezem, például color.html:
Most nézzük meg a színes képeket a képernyőn:
Itt adtam még egy képet. Kitűnő, mostantól 2 színes kép jelenik meg:
Most mindössze annyit kell tennünk, hogy hívjuk a plug-in szürkeárnyalatos () függvényét képekhez (ezek a színosztályok):
Ha most látja az eredményt a böngészőben, akkor látni fogjuk a BW képet:
A feladat szerint vissza kell állítanod a színt a képekre, amikor átölelsz rájuk, és újra deszaturálod őket, amikor az egér elment. Ebben használjuk a jQuery - hover módszert - és a plugin újraindítási módját:
Most, tényleg, mindent
A következő két lehetőség közül melyiket kell tennie a lecke elején beállított feladatok végrehajtásához. Csak figyelmeztetni kell, hogy a második lehetőség csak viszonylag kicsi képméretekhez és kis számú képhez használható az oldalon.
Ez lezárja ezt a leckét. Sok szerencsét neked és új találkozóknak.
Az YII2 keretrendszer. Gyors fejlesztés a modern PHP keretrendszerrel
Ismerje meg a modern webfejlesztés bonyolultságait az YII2 keretrendszer segítségével
A legfrissebb hírek az informatikai és webfejlesztésről a Telegram csatornán