Това е повторната публикация на оригиналната ми публикация на адрес https://dev.to/namdx1987/welcome-to-vintagram-1h2p

Някога чудили ли сте се дали можете да създадете такава офлайн алтернатива на gram от meta, за да използвате ретро филтрите, които обичате, като същевременно избягвате всички здравословни проблеми с метала? Не се чудете повече, защото днес, в тази статия, ще ви покажа как да създадете офлайн такъв, който трябва да се нарича Vintagram 😀 Тогава се забавлявайте да го използвате 😆

Бъгът, зъкът и офлайн

Качих този на glitch, така че можете да го използвате както онлайн на адрес https://vintagram.glitch.me/, така и офлайн, просто като изтеглите файлове или копирате изходните кодове, които поставих тук, като избягвате напълно Zuck, страхотно ли е ? 😀

Изтеглете файловете за офлайн употреба

За да използвате vinagram офлайн, трябва да изтеглите файловете от

и стартирайте локален уеб сървър, който да ги обслужва.

Малко въведение

Пиша код главно за забавление и мисля, че е необходимо да се забавлявам в живота, защото е твърде кратък 😓. Основният ми интерес сега е да намеря някои страхотни библиотеки, особено javascript и да мисля как да се забавлявам с тях 😀. Всъщност има много библиотеки, с които да се забавлявам и се надявам да имам време в бъдеще да го направя :D Vintagram е идея, която имам, когато намерих много готини библиотеки с ефекти и няма много хора, които желаят да ги превърнат в нещо забавно да използвам. Затова решавам да създам такъв 😊 и ще ви покажа как да го направите също 😀

Разберете как работи

Структура на интерфейса

Структурата на интерфейса е доста ясна. След това можете да видите изходния код, за да видите html кода и малко css. pico.css и шрифтът могат да се обслужват от cdn. Просто копирайте кода, който ви дават и това е готово.

Структура и поток на приложението

Vintagram е проектиран така, че първо да заредите снимка на страницата чрез плъзгане (използване на настолен компютър / лаптоп) или бутона за качване на снимка (смартфони, …). След това снимката се показва и щракването върху филтърното изображение ще приложи този ефект. Бутонът за изтегляне е за запазване на изображение или използвайте функцията за запазване на изображение от браузъра.

Плъзгащ файл

Това е лесно, тъй като просто ще трябва да внедрите слушателите за събитията dragover и drop. За бързо изграждане слушам целия изглед, тоест елемента html. Функцията handleDrop обработва отпадането, докато функцията handleDragOver е само за предотвратяване на действието по подразбиране от браузъра. Вижте кода

function handleDrop(ev) {
    ev.preventDefault();
    if (ev.dataTransfer.files && ev.dataTransfer.files.length == 1) {
        let [f] = ev.dataTransfer.files;
        loadFile(f);
    }
}

Така че, за да извлечете изпуснатия файл, правите заявка към свойството ev.dataTransfer.files. length е само за да гарантира, че потребителят пуска само по 1 изображение наведнъж. Също така не забравяйте да предотвратите действието по подразбиране. След това функцията loadFile ще обработи файла.

Можете да разберете кода за бутона за качване на снимка

function handleFileChange(ev) {
    ev.preventDefault();

    if (ev.target.files && ev.target.files.length == 1) {
        let [f] = ev.target.files;

        loadFile(f)
    }
}

да се справят с тази ситуация. Този път, за да получите файла, правите заявка към свойството ev.target.files, а не към ev.dataTransfer.files по-горе, и събитието, което трябва да прослушате тук, е change събитие от входа на скрития файл на страницата. Отново функцията loadFile се извиква, за да свърши работата.

Зареждане на изображението

За да заредя и покажа изображението, поддържам 2 променливи на изображението: променливата display за показване на резултата и променливата inner за обработка на зареждане зад сцената. Също така, inner е за проверка дали дадения файл е валидно изображение (също за запазване на оригиналната версия на изображението). Ето защо слушам събитието onload и onerror от inner. Има и две url променливи, current и received за поддържане на текущия url и този, който се получава.

Ако е заредено валидно изображение, изхвърлете URL адреса current и го заменете с този received. Ако се зареди невалидно изображение, изхвърлете received. В случай на валидно изображение, ние също го показваме, като предаваме url на изображението display и от използването на webgl-image-filter, трябва да създадем нова променлива filter (това изисква платно с ширината и височината на изображението) а оттам и кода

inner.onload = function () {
    let canvas = document.createElement('canvas');

    canvas.width = inner.naturalWidth;
    canvas.height = inner.naturalHeight;

    filter = new WebGLImageFilter({ canvas });
    display.src = this.src;

    if (current)
        URL.revokeObjectURL(current);

    current = received;
    received = null;
}

Тогава сме готови да заредим изображението.

Използване на WebGLImageFilter

Основната точка на библиотеката webgl-image-filter е да създаде филтър, което направихме в слушателя onload, след което да извикаме функцията addFilter за всеки филтър, който искате да добавите. Има и функцията reset, в случай че искате да се върнете в началото (ще изчисти всички добавени филтри) и накрая, като използвате apply, за да приложите филтъра към изображението. Резултатът ще бъде начертан на платното, дадено на филтъра в слушателя по-горе. След това можете да използвате данните от платното. Ето примера за използване на променливата filter

filter.reset()

filter.addFilter('hue', 15);
filter.addFilter('saturation', 0.2);
filter.addFilter('brightness', 0.2);
filter.addFilter('contrast', 0.2);

filter.apply(theImage).toDataURL(); // get the data url from the drawn canvas

Намирам тази библиотека за страхотна, защото авторът предостави някои полезни филтри, които можете да използвате веднага. Така че вместо да знаете как да използвате оттенък, наситеност, яркост, контраст,... правилно, можете да използвате незабавно да използвате полароидния ефект с

filter.reset()

filter.addFilter('polaroid'); // cool!!!

filter.apply(theImage).toDataURL(); // get the data url from the drawn canvas

Целта на тази статия е да ви покаже как да създадете просто приложение като vinagram, така че няма да задълбавам как да създавам филтри, а по-скоро ще се съсредоточа върху използването на библиотеката и предварително зададените настройки. Ще трябва да намерите повече за филтрите в други статии или да опитате да създадете такъв.

Прилагане на филтъра

Идеята тук е проста: използване на предварително зададено и прехвърляне на URL адреса на данните към изображението display. Създавам някакъв филтър със свързано име в променливата presets, така че можете да ги използвате лесно, като извикате функцията applyPreset, която ще намери и приложи филтъра, както е показан следният код

function applyPreset(name) {
    if (!filter || !(name in presets))
        return;

    filter.reset();
    presets[name](filter);
    display.src = filter.apply(inner).toDataURL();
}

Изтеглете изображението

Това е доста просто: използвайте функцията download, предоставена от библиотеката download.js чрез обвивката downloadImage

function downloadImage() {
    if (!filter)
        return;

    download(display.src, "vintagram.png");
}

Е, и това е Vintagram. Надявам се да харесате приложението, статията и да научите нещо ново. Приятен ден тогава 😊