Это репост моего оригинального поста на https://dev.to/namdx1987/welcome-to-vintagram-1h2p

Вы когда-нибудь задумывались, можете ли вы создать такую ​​автономную альтернативу грамму из мета, чтобы использовать винтажные фильтры, которые вы любите, и избежать всех проблем со здоровьем металла? Больше не удивляйтесь, потому что сегодня в этой статье я покажу вам, как создать офлайн-сайт, который должен называться Vintagram 😀 Тогда получайте удовольствие от его использования 😆

Глюк, Zuck и Offline

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

Загрузите файлы для автономного использования

Для того, чтобы использовать vintagram в автономном режиме, вам необходимо скачать файлы по адресу

и запустите локальный веб-сервер для их обслуживания.

Небольшое вступление

Я пишу код в основном просто для удовольствия, и я думаю, что нужно получать удовольствие от жизни, потому что она слишком короткая 😓. Мой главный интерес сейчас — найти какие-нибудь крутые библиотеки, особенно 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 предназначен только для того, чтобы пользователь удалял только одно изображение за раз. Также не забудьте также предотвратить действие по умолчанию. После этого функция 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

Эта статья предназначена для того, чтобы показать вам, как создать простое приложение, такое как vintagram, поэтому я не буду углубляться в создание фильтров, а сосредоточусь на использовании библиотеки и пресетов. Вам придется найти больше о фильтрах в других статьях или попробовать создать их.

Применение фильтра

Идея здесь проста: использовать предустановку и передать 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");
}

Ну а это винтаграм. Надеюсь, вам понравится приложение, статья и вы узнаете что-то новое. Тогда хорошего дня 😊