По принцип, няма нищо по-лесно от това да се подготви една снимка предварително и да се възползват от спрайтове техника за изображения се променят от единия към другия. Но това решение не винаги е подходяща за нас. Например, ние се даде възможност на потребителите да качват снимки на нашия сайт, в която ни искат да ефект трябва да се прилага. Очевидно е, че тук вече имаме за обработка на изображения, изтеглени от страната на сървъра (PHP) или клиент (JS), че сайтът е бил получен B & W изображение.
Е, нека да стигнем до изпълнението на задачите, ...
план урок
1. Изпълнението на задачи в PHP
2. Изпълнението на задачата с JQuery
Рамковата YII2. Бързото развитие на съвременни PHP рамки
Изследване на съвременните рамкови уеб програмиране тънкостите използващи YII2
подробности за учебника
големина на файла: 78 Mb
1. Изпълнението на задачи в PHP
Първият метод, който ние считаме, може да обработва изображения на сървъра страна. За да направите това ще използваме PHP. Веднага си струва да се спомене, че за успеха на този метод версия на PHP на вашия сървър PHP версия трябва да бъде не по-ниска от петата, и трябва да бъде библиотека GD (библиотека за изображения). Как всичко това изпитание ще бъдат обсъдени по-долу.
Така че, първо да създадете папка на сървъра 2, нека да ги наречем, например, «blackwhite» и «цвят». Първата папка ще се съхранява изображението BW, вторият най - цвят. Ние няма да се помисли за сваляне на потребителски снимки към сървъра и показва тези образи на уебсайт. Всичко това може да се намери в нашите предишни уроци, в частност, е урок Зарежда оразмеряване на изображения с.
Сега в скрипта (например index.php) ще създаде необходимост от променливите:
Досега, тъй като тя трябва да се покаже нашето достъпно цветно изображение:
Сега, за да най-забавната част - за обработка на изображения с помощта на PHP. За осъществяване на този процес, ние ще позволи на библиотечните функции GD. Това е един вид «Photoshop в PHP», така да се каже. Нека преди да се пристъпи потвърдим, че имате на нашия сървър на GD библиотеката. Това може да стане по следния начин:
function_exists () проверява дали функция конкретна функция и се връща TRUE определени, ако функцията се поддържа. В този случай, ние тествахме дали поддържа imagefilter (функция). Ако се поддържа, а след това на екрана на «OK» се показва. В този случай, ако функцията не е дефинирана, попитайте вашия доставчик на хостинг услуги за инсталиране на GD библиотеката.
По-нататъшната работа ще се основава на използването на 4-те функции:
imageCreateFromJPEG () - създаване на нов имидж от съществуващ;
imageFilter () - прилагане на филтър на изображението;
imagejpeg () - запазване на изображението;
imagedestroy () - премахване на изображението.
Имайте предвид, че трябва да се работи с изображения в JPG формат и следователно съответната функция. Esoi снимки ще бъдат във формат GIF, тогава ние трябва да използвате функцията imageCreateFromGIF и imageGIF. Така че, ние имаме оригиналния цвят образ, въз основа на които е необходимо да се създаде B & W изображение. Първото нещо, което направихме - това ще създаде нов имидж от съществуващ. За да направите това като параметър на функция укажете пътя до изображението:
Сега имаме дубликат на нашия достъпно цветно изображение. В този случай, указател към създадения образ (ресурс) се съдържа в променливата $ IMG. За обработка на изображение с помощта на втора функция - imageFilter (). Тази функция има две задължителни параметри - показалеца и приложите филтъра. Запознат с всички видове филтри, които могат в документацията за тази функция. Също така трябва да се филтрира IMG_FILTER_GRAYSCALE:
Тук ние се създадат условия, които calibratable дали има ресурс и успешно положен, ако прилагането на филтъра. Ако състоянието връща вярно - това означава, че ние можем да спестим полученото изображение. В противен случай - ние извлече грешката.
Рамковата YII2. Бързото развитие на съвременни PHP рамки
Изследване на съвременните рамкови уеб програмиране тънкостите използващи YII2
Запазете изображението ще ни помогне да третата опция от списъка, който има две задължителни параметри - ресурс, както и начин за запазване на картината:
Всичко, което остава за нас, за да направи - е да се премахнат работната изображение (ресурс), след като запазите. Това прави списък функцията окончателен:
Ако всичко върви добре, а след това в директорията blackwhite изображение се появява след пускането на скрипта 1.jpg, но тази снимка вече е с променен цвят. Нека да го установят на екрана:
На екрана се появява 2 снимки:
Сега ние трябва да се направи всичко кода във функция, за да бъдат подходящи за многократна употреба и за изчистване на кода. По този начин, функцията ще има следния вид:
Нека да разгледаме най-нови времена. Първо, преди imageCreateFromJPEG на функции () и imagedestroy (), ще се постави потискане на грешка символ - "@". Това се прави, за да се гарантира, че в случай на грешки изображения нашия текст грешка бе отстранен.
На следващо място, ние виждаме, че функцията не се доставя три параметъра и 4 ... това:
$ ColorFolder - пътят към цветни папка снимките на;
$ BwFolder - път към папката BW на снимки;
$ File - името на изображението;
$ Качеството - качеството на записания файл.
Последният параметър можем да използваме, за да функционира imagejpeg (), което показва, опционален параметър от третия на функцията. Този параметър може да бъде цяло число от 0 до 100 и е отговорен за качество. По подразбиране, този параметър е 75.
В резултат на това ни връща стойността на променливата $ на ВЕИ, което може да бъде или вярно или невярно. Той е удобен, защото, когато стартирате, можете да го проверите отново.
Остава да бъдат описани в кода на изход картинката BW, които, когато мишката върху събитието е променено на цвят. Когато мишката напусне зоната на изображението - това трябва да се промени обратно към BW. Пълният код ще бъде:
Отличен! Ние сме внедрили задачата с PHP. Това е време, за да започне втората част на урока.
2. Изпълнението на задачата с JQuery
За втория вариант, ние се нуждаем само директория за цветни снимки, защото ние обработваме изображения "в движение". Също така, ние ще трябва JQuery библиотека (това може да се намери в други материали, или може да бъде изтеглен от ofsayte). И накрая, ние се нуждаем от плъгин, който ще доведе до промяна в цвета на изображенията. Този щепсел - grayscale.js - ще намерите допълнителни материали.
Така че, свържете необходимо за скриптове на нашата страница - Ще я нарека, например, color.html:
Ние сега се извлече цветни изображения на екрана:
Тук съм добавил друго изображение. Отлични, 2 цветни снимки сега се показват:
Сега всичко, което трябва да направим - е да се обадите на сива скала функция () плъгин за изображения (те имат цвят клас):
Ако сега се вгледате в резултата в браузъра, ще видим BW изображение:
Според задачата, е необходимо да се върне на цвета на снимките, когато мишката върху тях отново и да ги потъмнявам с мишката чист. Това ще ни помогне да метод JQuery - висене - и нулиране на метода на плъгина:
Сега наистина всички
Коя от двете възможности да се вземат за изпълнението на задачите, поставени в началото на урока, който сте избрали. Необходимо е само да предупредя, че втория вариант може да се използва за сравнително малки размери на изображения и само малък брой изображения на страницата.
В този урок е приключила. Успех и ще се видим скоро.
Рамковата YII2. Бързото развитие на съвременни PHP рамки
Изследване на съвременните рамкови уеб програмиране тънкостите използващи YII2
Най-IT новини и уеб разработки на нашия канал Телеграма
Свързани статии