Создайте редактор изображений с EaselJS, jQuery и файловым API HTML5

Обратите внимание на спецификацию HTML5 типа документа. Нет бесполезных длинных спецификаций DTD; просто слово html .

Вверху мы связываем необходимые библиотеки и файлы JS. Все они включены в исходный код загрузки ; конкретные библиотеки — это EaselJS , jQuery и jQuery UI .

(Для ознакомления с EaselJS ознакомьтесь с данным руководством .)

Далее мы строим всю структуру пользовательского интерфейса. Просто помните: каждый div с классом dialog — это просто диалог для пользователя, чтобы ввести данные, необходимые для выполнения какой-либо операции над изображением. Если вы запустите этот код в своем браузере сейчас, вы заметите несколько 404 ошибок в консоли и то, что меню не будет работать, но мы исправим это, когда создадим файл ui.js

Шаг 3: Основной объект приложения

Хорошей практикой является объединение всех функций и переменных, связанных с вашим приложением, в один объект, чтобы предотвратить их переопределение внешними библиотеками или даже вашими собственными сценариями. Наш объект будет выглядеть так:

(Я начинаю все имена переменных и функций с маленькой буквы, основываясь на условных обозначениях Дугласа Крокфорда для языка программирования JavaScript .)

В app.stage мы будем хранить ссылку на объект Stage для нашего приложения. Если вы что-то кодировали в ActionScript, подумайте об этой стадии как об AS3. Он имеет список отображения, который рисуется в элементе canvas при каждом обновлении. app.canvas является переменной со ссылкой на элемент canvas внутри нашего HTML-документа. Мы будем использовать его для создания сцены и изменения ее размера вместе с окном.

Массив app.layers будет содержать все слои изображения, а app.tool содержит значение фактически выбранного инструмента. В app.callbacks будет содержаться каждый обратный вызов события, который нам нужно будет указать (например, нажав кнопку меню), app.renameLayer содержит номер фактически переименованного слоя, а app.undoBuffer и app.redoBuffer — это массивы для хранения резервной копии app.layers состояние app.layers чтобы заставить работать функции отмены и возврата.

Вам также нужно будет добавить эти четыре строки перед определением app (это просто константы идентификатора инструмента):

Шаг 4: Полезные методы

Теперь мы определим методы этого объекта. Сначала добавьте следующие refreshLayers() и sortLayers() :

Обратите внимание, что внутри объекта вам нужно объявлять переменные и функции с помощью «:» вместо «=».

Метод sortLayers() вызывается, когда пользователь перетаскивает слои на панели «Слои»; refreshLayers() вызывается очень часто, потому что он воссоздает app.stage и app.stage добавляет все слои на сцену, устанавливая их свойства и применяя обратные вызовы событий. Эти обратные вызовы позволяют перемещать слои и редактировать текст на текстовых слоях. Это очень важная функция, поскольку она также добавляет все слои на панель «Слои» в пользовательском интерфейсе и отключает кнопки инструментов в меню (если слоев нет), а также включает их (при наличии хотя бы одного слоя).

Перед refreshLayers() вставьте другой набор вспомогательных функций (не забудьте добавить запятую после последней!):

Активный слой — это тот, к которому вы применяете все операции (преобразования, добавления фильтров и т. Д.). Вы можете активировать слой, щелкнув по нему на панели «Слои» или используя инструмент «Выбрать» на холсте.

Как видите, параметр метода activateLayer() может быть либо Bitmap либо числом. Если это Bitmap — объект EaselJS для изображений — тогда для его active свойства установлено значение true , а если это число, то слой в этой позиции в массиве app.layers активируется. getActiveLayer() просто возвращает активный слой, а getActiveLayerN() возвращает позицию активного слоя в массиве app.layers .

Последняя группа методов в этом объекте должна быть вставлена ​​непосредственно после объявления app.redoBuffer и перед теми, которые вы добавили туда ранее:

Как вы заметили, читая app.refreshLayers() , метод app.layers toString() переопределяется кодом, который подготавливает строковую версию всех слоев внутри. Конечно, хранить всю информацию о слоях было бы пустой тратой памяти, поэтому резервное копирование выполняется только для тех значений, которые могут быть изменены приложением.

Метод addUndo() фактическое состояние слоев в массив app.undoBuffer и очищает app.redoBuffer — потому что, когда вы делаете действие, которое можно отменить, вы не можете восстановить все, что было отменено до этого действия. loadLayers() принимает два аргумента (массив, из которого мы должны app.layers состояние app.layers и массив, в который мы должны app.layers фактическое состояние этой переменной), и выполняет анализ резервных app.layers .

Как показывает пример фильтра EaselJS:

«… фильтры отображаются только при кэшировании экранного объекта …»

(Из примеров EaselJS: фильтры .)

Это означает, что вам нужно вызвать метод cache() Bitmap чтобы применить фильтр. Кэширование выполняется для повышения производительности — фильтр применяется только один раз, и отрисовывается только отфильтрованное растровое изображение. EaselJS кеширует контент очень умным способом — он просто копирует его в другой элемент canvas, который не добавляется в документ (он скрыт). Я упоминаю об этом, потому что в конце метода loadLayers() есть блок if который проверяет, есть ли какие-либо фильтры, которые должны быть обновлены на этом слое — и, если они есть, обновляет элемент cache или cache

Шаг 5: Инициализация

Инициализация всего приложения проста; просто вставьте это после объявления app :

Ticker — это встроенный в EaselJS таймер, который вызывает функцию tick() слушателя, чтобы поддерживать стабильный ранее установленный FPS Таким образом, мы можем автоматически вызывать app.stage.update() для перерисовки app.stage.update() области.

В начале (сразу после загрузки документа) мы назначаем первый элемент canvas на странице, который функция $ ( jQuery ) находит для app.canvas , затем мы отключаем выбор чего-либо в документе (потому что в противном случае при перетаскивании мыши через холст есть эффект, как будто вы выбираете текст).

Мы устанавливаем скорость тикера в 30 (вам нужно всего 24 кадра в секунду, чтобы заставить человека думать, что он видит движение) и устанавливаем окно в качестве слушателя тикера.

Шаг 6: вспомогательные функции пользовательского интерфейса

Теперь пришло время воплотить в жизнь наше меню и весь пользовательский интерфейс. Файл ui.js будет почти полностью состоять из функций jQuery, поэтому его действительно легко понять. Начнем с вспомогательных функций:

Переменная importFile сообщит нам, открываем ли мы файл или импортируем его.

Имена функций showDialog() и hideDialog() говорят сами за себя — хотя одна интересная вещь в функции hideDialog() — это то, как она проверяет, все ли диалоги скрыты с помощью псевдокласса jQuery ‘: visible’, только чтобы затем скрыть наложение. В конце концов, это оказалось бесполезным, потому что нет ситуации, когда на экране более одного диалога, но я оставил его для вашего будущего использования; Может быть, это пригодится.

Шаг 7: измени размер сцены

Теперь мы должны что-то сделать, когда пользователь изменит размер окна браузера. Это когда событие изменения размера window вступает в игру. Он запускается каждый раз, когда пользователь изменяет размер окна браузера:

Сначала мы центрируем все диалоги с помощью функции each() jQuery. Это вызывает обратный вызов для каждого элемента, которому соответствует селектор в функции $ .

Затем мы должны установить ширину и высоту холста — но не в CSS, потому что это растянет изображения внутри холста, а мы этого не хотим. Высота меню составляет 37 пикселей, поэтому мы устанавливаем высоту холста равной высоте окна минус 37 пикселей. То же самое для ширины, но на этот раз мы должны вычесть ширину панели слоев, которая составляет 232 пикселей. Мы также изменяем размеры меню и панели «Слои», чтобы соответствовать размеру окна (здесь мы можем использовать CSS).

После этого нам нужно обновить слои, чтобы они всегда были актуальными при изменении размера окна. Последнее, что нужно сделать, это переместить диалог обрезки, если пользователь изменил размер окна при обрезке слоя.

Шаг 8: связывая все вместе

Кнопки меню должны быть привязаны к обратным app.callbacks , указанным в app.callbacks , а также нам нужно привязать событие keydown для входов и click кнопки диалога. Последнее предложение может показаться сложным, но когда вы увидите код, оно станет понятным:

Помните еще одну вещь: когда вы что-то делаете с jQuery и любыми элементами HTML, делайте это внутри document.readyобратного вызова, потому что только тогда вы можете быть уверены, что все элементы, которые вы используете, уже отрисованы.

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

Далее вы должны взглянуть на live()функцию, которую мы используем для привязки событий щелчка к кнопкам слоя (на панели «Слой») — live()функция добавляет обратный вызов для каждого элемента, который будет соответствовать этому селектору в будущем , что делает его очень полезным, так как мы генерируем новый список слоев на каждый app.refreshLayers()звонок.

Последняя функция здесь, $(window).resize()которая вручную запускает resizeсобытие окна. Вот почему важно связывать скрипты по порядку, потому что, если они ui.jsбыли добавлены в HTML раньше main.js, слои будут обновляться до определения функции, что иногда может привести к неожиданным результатам, что еще больше затрудняет поиск ошибки.

Если вы запустите приложение сейчас, вы увидите хорошо работающее меню и правильное изменение размера пользовательского интерфейса, но все равно ни одна кнопка не сделает ничего, кроме выдачи ошибок в консоль при нажатии на нее.

Шаг 9: Открытие файлов

Теперь мы будем использовать другой API из спецификации HTML5: File API. Это позволяет нам открывать файлы с компьютера пользователя, но только тогда, когда он выбирает их в поле ввода файлов ОС (чтобы веб-приложения не могли украсть ваши личные данные).

Обратите внимание, что если вы будете запускать это приложение на локальном компьютере, вам необходимо настроить локальный сервер или добавить --allow-file-access-from-filesпараметр при запуске Chrome, поскольку открытие файлов из локальных веб-страниц по умолчанию отключено.

В file.jsфайл мы также поместим функции для сохранения и печати изображения, поэтому давайте начнем с этих четырех помощников:

openFileФункция будет использоваться , чтобы открыть изображение и добавить его к слоям. Если мы выберем «Открыть файл» из меню, то старое содержимое будет стерто, а «Импорт файла» добавит новые слои к изображению. (В функции, если первый параметр, trueто мы открываем файл, в противном случае мы его импортируем).

openURLоткрывает файл, используя ту же функцию, но из внешнего источника (и, насколько мне известно, Chrome отключает доступ к данным междоменных исходных пикселей, что делает эти изображения довольно бесполезными). Поскольку мы не можем сохранить файл на диске пользователя, мы просто открываем другое окно, содержащее только изображение, представляющее фактическую сцену; пользователь может затем щелкнуть правой кнопкой мыши, чтобы сохранить изображение.

Печать достигается по телефону window.print() . Конечно, мы не можем печатать что-либо, не сообщая об этом пользователю, поэтому эта функция откроет диалоговое окно печати по умолчанию, где пользователь может выбрать параметры печати.

Теперь мы определим несколько обратных вызовов для кнопок внутри меню:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

app.callbacks.openFile = function (e) {     var file = e.target.files[0],         self = this;            if (!file.type.match('image.*')) return false;        var reader = new FileReader();     reader.onload = function(e) {         openFile(e.target.result, true);     };        reader.readAsDataURL(file); };    app.callbacks.openURL = function (e) {     switch (e.type) {         case "click":             openURL($('#dialog-openurl input'), $('#dialog-openurl input').val());             break;         case "keydown":             if (e.keyCode == 13) openURL(this, $(this).val());             break;     } }    app.callbacks.importFile = function (e) {     for (var i = 0, file; file = e.target.files[i]; i++) {         if (!file.type.match('image.*')) continue;            var reader = new FileReader();         reader.onload = function(e) {             openFile(e.target.result, false);         };            reader.readAsDataURL(file);     } };    app.callbacks.saveFile = function () {     saveFile(); }    app.callbacks.printFile = function () {     printFile(); }

Как видите, код очень короткий, но очень мощный. В app.callbacks.openFileобратном вызове first ( ) мы проверяем, является ли открытый файл изображением, и останавливаем его, если это не так. Затем мы создаем новый FileReader, устанавливаем его onloadобратный вызов, чтобы открыть файл, и вызываемreadAsDataURL(file) метод, который загружает файл и выводит результат в виде URL-адреса данных для чтения.

(Также обратите внимание, что мы очищаем массивы отмены и возврата; мы должны сделать это, потому что мы не можем восстановить изображение, если мы его удалим — пользователь должен вручную повторно выбрать файл из ввода.)

Сохраните файл, откройте приложение в своем браузере, и вы, наконец, сможете что-то сделать! Немного, но если вы делаете это в первый раз, возможно, очень интересно иметь возможность загружать некоторые изображения в браузер, даже если вы можете только перемещать их.

---

Шаг 10: текстовые слои

Теперь, когда вы можете открывать и импортировать изображения, вы можете добавить текст. Есть одна действительно полезная вещь с канвой — вы определяете текст так же, как в атрибуте шрифта CSS. И EaselJS полностью использует эту функцию.

Мы определим инструмент Text в tools.jsфайле. Добавьте следующие строки:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

editText = false;    toolText = function (text, font, color, size, x, y) {     var n = (editText ? app.getActiveLayerN(): app.layers.length);     app.layers[n] = new Text(text, size + ' ' + font, color);     app.layers[n].x = x - app.canvas.width / 2;     app.layers[n].y = y - app.canvas.height / 2;     app.layers[n].name = text;     app.activateLayer(n);     hideDialog('#dialog-tooltext');            this.undoBuffer = [];     this.redoBuffer = []; }    app.callbacks.toolText = function (e) {     switch (e.type) {         case "click":             if (e.target instanceof HTMLButtonElement) {                 toolText($('#dialog-tooltext input.input-text').val(), $('#dialog-tooltext select').val(), $('#dialog-tooltext input.input-color').val(), $('#dialog-tooltext input.input-size').val(), (editText ? app.getActiveLayer().x: app.selection.x), (editText ? app.getActiveLayer().y: app.selection.y));             } else {                 if (app.tool != TOOL_TEXT) return true;                 $('#dialog-tooltext').show();                 $('#overlay').show();                 app.selection.x = e.offsetX;                 app.selection.y = e.offsetY;                 $('#dialog-tooltext input.input-text').val((editText ? app.getActiveLayer().text: ''));                 $('#dialog-tooltext input.input-size').val((editText ? app.getActiveLayer().font.split(' ')[0]: '12px'));                 $('#dialog-tooltext select').val((editText ? app.getActiveLayer().font.split(' ')[1]: 'Calibri'));                 $('#dialog-tooltext input.input-color').val((editText ? app.getActiveLayer().color: 'black'));                 $('#dialog-tooltext input.input-color').css({ backgroundColor: $('#dialog-tooltext input.input-color').val() });             }             break;         case "keydown":             if (e.keyCode == 13) toolText($('#dialog-tooltext input.input-text').val(), $('#dialog-tooltext select').val(), $('#dialog-tooltext input.input-color').val(), $('#dialog-tooltext input.input-size').val(), (editText ? app.getActiveLayer().x: app.selection.x), (editText ? app.getActiveLayer().y: app.selection.y));             break;     } }

editTextПеременный , trueкогда мы изменяем свойство существующего текстового слоя вместо создания нового.

Первая функция, как обычно, вспомогательная функция. Он проверяет, редактируем ли мы существующий текстовый слой или добавляем новый, затем создает новый Textобъект и добавляет его в прикладные слои. Поскольку все объекты в EaselJS расширяют базу DisplayObject, мы можем использовать оба Textи Bitmapодинаково; отличаются только их свойства.

Вторая функция — обратный вызов. Первое, что нам нужно сделать, это проверить, какой тип события мы получаем (потому что мы используем только один обратный вызов как для обработки нажатия кнопки, так и нажатия клавиши ввода внутри ввода). Тогда мы просто вызываем предыдущего помощника.

---

Шаг 11: Преобразование слоя

Простые преобразования слоев действительно просты с EaselJS. Все, что я покажу здесь, можно сделать, просто изменив свойства слоя ( Bitmapили Text).

Я начну с объяснения точки регистрации. В regXи regYсвойства определяют точку , из которой рассчитываются поворот и положение — это как ручка. В main.jsфайле мы устанавливаем эту точку в центр изображения, чтобы упростить преобразование слоев. Все функции преобразования слоя будут помещены в layer.jsфайл.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

affectImage = false;    layerScale = function (x, y) {     app.addUndo();     if (affectImage) return imageScale(x, y);     app.getActiveLayer().scaleX *= x / 100;     app.getActiveLayer().scaleY *= y / 100;     hideDialog('#dialog-scale'); }    layerRotate = function (deg) {     app.addUndo();     if (affectImage) return imageRotate(deg);     app.getActiveLayer().rotation += deg;     hideDialog('#dialog-rotate'); }    layerSkew = function (degx, degy) {     app.addUndo();     if (affectImage) return imageSkew(degx, degy);     app.getActiveLayer().skewX += degx;     app.getActiveLayer().skewY += degy;     hideDialog('#dialog-skew'); }    layerFlipH = function () {     app.addUndo();     app.getActiveLayer().scaleX = -app.getActiveLayer().scaleX; }    layerFlipV = function () {     app.addUndo();     app.getActiveLayer().scaleY = -app.getActiveLayer().scaleY; }

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

Первое: нам нужно вызвать addUndo()функцию, прежде чем мы начнем что-либо менять. Почему? Потому что мы хотим вернуться в состояние до того, как какая-то операция будет выполнена, когда мы нажмем кнопку отмены.

Также обратите внимание на affectImageпеременную. Мы установим его, trueкогда мы хотим повлиять на все изображение; почти в каждой функции есть ifоператор, проверяющий, влияем ли мы на все изображение, и (если так) возвращающий результат соответствующей image*()функции.

Теперь поместите код обратного вызова в файл:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

app.callbacks.numberOnly = function (e) {     if ((e.shiftKey) || ([8, 13, 37, 38, 39, 40, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 190, 189].indexOf(e.keyCode) < 0)) return false; }    app.callbacks.layerRename = function (e) {     switch (e.type) {         case "click":             app.layers[app.renameLayer].name = $('#dialog-layerrename input').val();             app.refreshLayers();             hideDialog('#dialog-layerrename');             break;         case "keydown":             if (e.keyCode == 13) {                 app.layers[app.renameLayer].name = $('#dialog-layerrename input').val();                 app.refreshLayers();                 hideDialog('#dialog-layerrename');             }             break;     } }    app.callbacks.layerScale = function (e) {     switch (e.type) {         case "click":             layerScale($('#dialog-scale input.input-scaleX').val() * 1, $('#dialog-scale input.input-scaleY').val() * 1);             break;         case "keydown":             if (e.keyCode == 13) layerScale($('#dialog-scale input.input-scaleX').val() * 1, $('#dialog-scale input.input-scaleY').val() * 1);             break;     } }    app.callbacks.layerRotate = function (e) {     switch (e.type) {         case "click":             layerRotate($('#dialog-rotate input').val() * 1);             break;         case "keydown":             if (e.keyCode == 13) layerRotate($(this).val() * 1);             break;     }        }    app.callbacks.layerSkew = function (e) {     switch (e.type) {         case "click":             layerSkew($('#dialog-skew input.input-skewX').val() / 100, $('#dialog-skew input.input-skewY').val() / 100);             break;         case "keydown":             if (e.keyCode == 13) layerSkew($('#dialog-skew input.input-skewX').val() / 100, $('#dialog-skew input.input-skewY').val() / 100);             break;     } }    } }    app.callbacks.layerCrop = function () {     var layer = app.getActiveLayer();     layer.cache(         Math.floor(app.canvas.width / 2 - $('#cropoverlay').position().left - layer.regX + layer.x - 1),         Math.floor(app.canvas.height / 2 - $('#cropoverlay').position().top - layer.regY + layer.y + 38),         $('#cropoverlay').width(),         $('#cropoverlay').height()     );     $(this).parent().find('.button-cancel').click(); }

Еще одна связка вызовов jQuery. Мы также проверяем тип события, потому что мы можем получить эти функции, вызываемые кнопкой или полем ввода. Каждая функция в приведенном выше коде практически одинакова: проверьте тип события, получите входное значение из диалога и вызовите функцию.

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

---

Шаг 12: Преобразования: Масштаб

Давайте начнем с добавления этого исходного кода; Я объясню это позже. Поместите код ниже в image.jsфайл:

01 02 03 04 05 06 07 08 09 10

imageScale = function (x, y) {     for (var i = 0, layer; layer = app.layers[i]; i++) {         layer.scaleX *= x / 100;         layer.scaleY *= y / 100;         layer.x *= x / 100;         layer.y *= y / 100;     }     hideDialog('#dialog-scale');     affectImage = false; }

Мы просто перекручивание через все слои , устанавливающие их scaleXи scaleYсвойство. Но изображение выглядело бы странно, если бы мы только масштабировали слои. Нам также нужно переместить каждый слой, чтобы эта функция работала нормально.

---

Шаг 13: трансформации изображения: вращение

Вращение будет немного сложнее, чем масштабирование. Но сначала это код; поместите это также в image.jsфайл:

01 02 03 04 05 06 07 08 09 10 11 12

imageRotate = function (deg) {     for (var i = 0, layer; layer = app.layers[i]; i++) {         layer.rotation += deg;         var rad = deg * Math.PI / 180,             x = (layer.x * Math.cos(rad)) - (layer.y * Math.sin(rad)),             y = (layer.x * Math.sin(rad)) + (layer.y * Math.cos(rad));         layer.x = x;         layer.y = y;     }     hideDialog('#dialog-rotate');     affectImage = false; }

Мы, конечно, добавляем ротацию слоев, но выделенный мною код является новым. Он основан на уравнениях вращения точки в декартовой системе координат:

Где Φ — угол Таким образом, выделенный код — это всего лишь перевод приведенных выше уравнений в код JavaScript (плюс преобразование из градусов в радианы, потому что тригонометрические функции в Mathбиблиотеке принимают радианы в качестве параметров, а один радиан равен точно pi / 180 градусам).

---

Шаг 14: Преобразования: перекос

Перекос очень похож на вращение, потому что в основном это вращение, но с двумя разными углами для двух направлений. Посмотрите на код:

01 02 03 04 05 06 07 08 09 10 11 12 13 14

imageSkew = function (degx, degy) {     for (var i = 0, layer; layer = app.layers[i]; i++) {         layer.skewX += degx;         layer.skewY += degy;         var radx = degx * Math.PI / 180,             rady = degy * Math.PI / 180,             x = (layer.x * Math.cos(radx)) - (layer.y * Math.sin(radx)),             y = (layer.x * Math.sin(rady)) + (layer.y * Math.cos(rady));         layer.x = x;         layer.y = y;     }     hideDialog('#dialog-skew');     affectImage = false; }

Вы видите разницу? Мы просто используем radxдля позиции х и radyу позиции. Это делает изображение искаженным должным образом (я должен сказать, что это дает довольно хороший эффект).

---

Шаг 15: Трансформации: Отразить

Это модификация imageScale()функции. Он не последний, потому что это самая сложная из функций преобразования изображений, просто потому, что он находится на последней позиции в меню. Код:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

imageFlipH = function () {     app.addUndo();     for (var i = 0, layer; layer = app.layers[i]; i++) {         layer.scaleX = -layer.scaleX;         layer.x = -layer.x;     }     affectImage = false; }    imageFlipV = function () {     app.addUndo();     for (var i = 0, layer; layer = app.layers[i]; i++) {         layer.scaleY = -layer.scaleY;         layer.y = -layer.y;     }     affectImage = false; }    app.callbacks.imageFlipV = function () {     imageFlipV(); }    app.callbacks.imageFlipH = function () {     imageFlipH(); }

Конечно, мы можем игнорировать обратные вызовы — мы уже знаем, что они делают. Мы должны сосредоточиться на первых двух функциях. Они просто перебирают слои, устанавливая их scaleXили scaleYпротивоположное значение — это то, что мы знаем как отражение: просто отрицательный масштаб. Кроме того , xили yдолжно быть отменено , чтобы сделать изображение действительно выглядеть переворачивается.

Это было последнее из преобразований изображения. Теперь мы собираемся сделать что-то более продвинутое — фильтры!

---

Шаг 16: Простые фильтры: Введение

Я называю их простыми, потому что мы используем фильтры, встроенные в EaselJS: ColorFilterи ColorMatrixFilter. Они изменяют изображение попиксельно, поэтому с большими изображениями и сложными фильтрами вы можете на некоторое время задержать браузер или даже полностью остановиться.

Прежде чем применять их, я объясню, что делает каждый фильтр.

ColorFilter принимает восемь параметров при создании:

1	new ColorFilter(redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset);

Когда фильтр применяется, он разбивает изображение на четыре канала (красный, зеленый, синий и альфа) и для каждого канала умножает каждое значение на соответствующий множитель и добавляет соответствующее смещение. (На самом деле, изображение на самом деле не разделено; это удобная метафора.)

ColorMatrixFilter принимает только один параметр при создании:

1	new ColorMatrixFilter(matrix);

Матрица имеет следующий формат:

 
 [ 
	р-р, рг, рб, ра, ро, 
	gr, gg, gb, ga, иди, 
	br, bg, bb, ba, bo, 
	ар, аг, аа, аа, ао 
 ] 

Когда этот фильтр применяется, он также (в переносном смысле) разбивает изображение на каналы, а затем умножает каждое значение друг на друга. Например, уравнение для значения пикселя в красном канале после прохождения через фильтр:

1	newRed = (red * rr) + (green * rg) + (blue * rb) + (alpha * ra) + ro;

То же самое относится и к зеленому, синему и альфа, только с разными переменными из матрицы ( gr,gg,gb,gaдля зеленого и т. Д.). Этот фильтр немного более продвинутый, чем ColorFilterкаждый, потому что каждый цвет зависит от других цветов пикселя.

Для получения более подробной информации см. Этот учебник .

---

Шаг 17: Простые фильтры: вспомогательная функция

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

Поместите этот код в начало filters.jsфайла:

01 02 03 04 05 06 07 08 09 10 11 12

applyFilter = function (filter) {     app.addUndo();     var layer = app.getActiveLayer();            layer.filters = (layer.filters ? layer.filters: []);     layer.filters.push(filter);     if (layer.cacheCanvas) {         layer.updateCache();     } else {         layer.cache(0, 0, layer.width, layer.height);     } }

Он делает всю работу за нас: захватывает активный слой; если нет фильтров, то создает массив фильтров; и добавляет фильтр.

После этого мы должны кэшировать слой, чтобы эффекты фильтра были видны, поэтому мы проверяем, уже кэшировали ли мы этот слой (например, при его обрезке), и вызываем updateCache()или, cache()если необходимо.

Вот изображение, которое я буду использовать для демонстрации эффектов фильтров:

---

Шаг 18: Простые фильтры: Яркость

Для этого эффекта мы будем использовать ColorFilter, потому что изменение яркости просто изменяет все значения каналов (красный, зеленый, синий) в слое на одно и то же значение.

Вот код (поместите его в filters.jsфайл):

1 2 3 4

filterBrightness = function (value) {     applyFilter(new ColorFilter(value, value, value, 1));     hideDialog('#dialog-filterbrightness'); }

Как я упоминал ранее, наша вспомогательная функция делает все за нас, нам нужно только создать новый фильтр. Здесь мы создаем ColorFilterс мультипликаторами красного, зеленого, синего, установленными на, valueи альфа, установленными на 1,0 (мы не хотим, чтобы этот фильтр касался альфы).

Ниже приведен пример результата этого фильтра:

---

Шаг 19: Простые фильтры: Colorify

Colorify увеличит или уменьшит значение некоторых каналов для изменения общего цвета изображения, поэтому мы снова будем использовать ColorFilter.

Посмотрите на код:

1 2 3 4

filterColorify = function (r, g, b, a) {     applyFilter(new ColorFilter(1.0, 1.0, 1.0, 1.0, r, g, b, a));     hideDialog('#dialog-filtercolorify'); }

Опять же, грязная работа обрабатывается applyFilter, и мы сосредоточены только на создании объекта фильтра. Здесь мы будем использовать последние четыре параметраColorFilter конструктора. Они добавляются в каналы, поэтому они идеально соответствуют нашим потребностям.

Ниже приведен пример результата этого фильтра:

---

Шаг 20: Простые фильтры: десатурация

Десатурация — это процесс удаления насыщенности — простыми словами, делая изображение черно-белым. Для этого нам нужно рассчитать яркость каждого пикселя и установить для всех цветов это значение. Самое простое уравнение светимости включает в себя только добавление одинакового количества всех цветов, и для этого мы можем использовать ColorMatrixFilter:

01 02 03 04 05 06 07 08 09 10 11

filterDesaturation = function () {     applyFilter(new ColorMatrixFilter(         [             0.33, 0.33, 0.33, 0.00, 0.00,             0.33, 0.33, 0.33, 0.00, 0.00,             0.33, 0.33, 0.33, 0.00, 0.00,             0.00, 0.00, 0.00, 1.00, 0.00         ]     ));     hideDialog('#dialog-filterbrightness'); }

Как я уже говорил ранее — возьмите равное количество трех цветов и добавьте их. Мы снова не касаемся альфы, так как она не содержит никаких значений цвета.

Нет примера изображения результата, потому что оно уже черно-белое; фильтр не имеет никакого эффекта.

---

Шаг 21: сверточные фильтры

Это Convolution Filterнемного более продвинутый, чем ColorMatrixFilter. Он также использует матрицу, но матрица свертки представляет множители пикселей, окружающих фактический пиксель.

Допустим, у нас есть пример матрицы свертки 3х3 (уже представленной в виде массива JavaScript):

1 2 3 4 5

[     [ 0, 0, 0],     [-1, 1, 0],     [ 0, 0, 0] ]

И (например) мы смотрим на часть изображения, где пиксели выглядят так (каждое число представляет силу канала красного цвета; мы игнорируем остальные для простоты):

 
	[00] [12] [43] 
	[12] [56] [62] 
	[63] [67] [92] 

С помощью фильтра свертки мы модифицируем пиксель посередине (текущее значение: 56). Итак, мы начинаем с умножения каждого значения цвета вокруг этого пикселя на его множитель из массива свертки, а затем мы складываем их вместе. Мы получаем следующее уравнение:

 
newPixelValue = (00 * 0) + (12 * 0) + (43 * 0) 
              + (12 * -1) + (56 * 1) + (62 * 0)  
              + (63 * 0) + (67 * 0) + (92 * 0)  
              = (-12) + 56  
              = 44 

Итак, теперь мы устанавливаем значение красного канала нового пикселя равным 44 — но в новом массиве данных, потому что нам все еще нужно держаться за старое значение 56 для изменения других пикселей в изображении. Это означает, что при применении фильтра мы фактически создаем копию изображения, а не модифицируем существующую копию на месте.

При увеличении матрицы вы можете видеть, как формула будет усложняться, поскольку каждый пиксель зависит от данных из более окружающих пикселей; по этой причине большая матрица требует более длительного времени работы. При запуске фильтра свертки браузер обычно на некоторое время зависает.

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

Также вы должны помнить, что сумма всех значений в матрице свертки должна быть равна нулю или единице, иначе вы получите странные результаты. Чтобы сделать это проще , мы можем использовать factorи в offsetпеременные. После вычисления значения пикселя (с помощью приведенного выше уравнения) мы умножаем все значение на factorи добавляем offset. Это упрощает создание, например, фильтра размытия (который мы получим через минуту), где все значения матрицы свертки совпадают.

К сожалению, ConvolutionFilterв EaselJS нет реализации, поэтому мы должны написать ее. Следуя примеру ColorFilterя создал этот код:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

(function (window) {     var ConvolutionFilter = function (matrix, factor, offset) {         this.initialize(matrix, factor, offset);     }            var p = ConvolutionFilter.prototype = new Filter();            p.matrix = null;     p.factor = 0.0;     p.offset = 0.0;                p.initialize = function (matrix, factor, offset) {         this.matrix = matrix;         this.factor = factor;         this.offset = offset;     }            p.applyFilter = function (ctx, x, y, width, height, targetCtx, targetX, targetY) {         targetCtx = targetCtx || ctx;         targetX = (targetX == null ? x: targetX);         targetY = (targetY == null ? y: targetY);                    try {             var imageData = ctx.getImageData(x, y, width, height);         } catch (e) {             return false;         }                    var data = JSON.parse(JSON.stringify(imageData.data));                    var matrixhalf = Math.floor(this.matrix.length / 2);         var r = 0, g = 1, b = 2, a = 3;                    for (var y = 0; y < height; y++) {             for (var x = 0; x < width; x++) {                 var pixel = (y * width + x) * 4,                     sumr = 0, sumg = 0, sumb = 0;                 for (var matrixy in this.matrix) {                     for (var matrixx in this.matrix[matrixy]) {                         var convpixel = ((y + (matrixy - matrixhalf)) * width + (x + (matrixx - matrixhalf))) * 4;                         sumr += data[convpixel + r] * this.matrix[matrixy][matrixx];                         sumg += data[convpixel + g] * this.matrix[matrixy][matrixx];                         sumb += data[convpixel + b] * this.matrix[matrixy][matrixx];                     }                 }                 imageData.data[pixel + r] = this.factor * sumr + this.offset;                 imageData.data[pixel + g] = this.factor * sumg + this.offset;                 imageData.data[pixel + b] = this.factor * sumb + this.offset;                 imageData.data[pixel + a] = data[pixel + a];             }         }                    targetCtx.putImageData(imageData, targetX, targetY);         return true;     }        p.toString = function() {         return "[ConvolutionFilter]";     }            p.clone = function() {         return new ConvolutionFilter(this.matrix, this.factor, this.offset);     }            window.ConvolutionFilter = ConvolutionFilter; }(window));

Вы можете пропустить все методы, кроме applyFilter, поскольку они используются EaselJS для инициализации фильтра.

applyFilter()вызывается, когда мы применяем фильтр к изображению. Сначала мы должны получить данные изображения из canvas, затем я использую трюк с JSON.parse(JSON.stringify(imageData.data))— потому что мы хотим получить копию данных изображения, а imageData.dataобъект не имеет clone()илиslice() метода чтобы достичь этого, поэтому мы используем этот хитрый способ, чтобы полностью скопировать объект и все его свойства.

Информация о цвете хранится в этих данных следующим образом:

 
[...] [красный] [зеленый] [синий] [альфа] [красный] [зеленый] [синий] [альфа] [...] 

Таким образом, каждый пиксель занимает четыре элемента массива — по одному на каждый канал. Наконец, после перебора всех данных о пикселях мы вызываем putImageData()цель, чтобы сохранить результат.

---

Шаг 22: сверточные фильтры: размытие

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

01 02 03 04 05 06 07 08 09 10 11 12 13

filterBlur = function (radius) {     var matrix = [];            for (var y = 0; y < radius * 2; y++) {         matrix[y] = [];         for (var x = 0; x < radius * 2; x++) {             matrix[y][x] = 1;         }     }            applyFilter(new ConvolutionFilter(matrix, 1.0 / Math.pow(radius * 2, 2), 0.0));     hideDialog('#dialog-filterblur'); }

Он генерирует матрицу размытия, затем применяет фильтр.

Почему мы настроены factorна Math.pow(radius * 2, 2)? Потому что, как я сказал ранее: сумма всех полей массива должна быть равна нулю или единице; если мы разделим их всех на их сумму, мы всегда получим 1.

Ниже приведен результат этого фильтра:

---

Шаг 23: размытие по Гауссу

Этот сверточный фильтр называется так, потому что он использует значения из стандартного гауссова распределения (на рисунке выше), вставленные в матрицу свертки. Чтобы упростить задачу, мы позволяем пользователю выбрать только три значения радиуса, потому что применение фильтра для большего радиуса займет слишком много времени (радиус 3 пикселя уже является матрицей 7 на 7).

Вот функция:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

var gaussMatrix = [     [         [ 0.05472157, 0.11098164, 0.05472157 ],         [ 0.11098164, 0.22508352, 0.11098164 ],         [ 0.05472157, 0.11098164, 0.05472157 ]     ],     [         [ 0.00078633, 0.00655965, 0.01330373, 0.00655965, 0.00078633 ],         [ 0.00655965, 0.05472157, 0.11098164, 0.05472157, 0.00655965 ],         [ 0.01330373, 0.11098164, 0.22508352, 0.11098164, 0.01330373 ],         [ 0.00655965, 0.05472157, 0.11098164, 0.05472157, 0.00655965 ],         [ 0.00078633, 0.00655965, 0.01330373, 0.00655965, 0.00078633 ]     ],     [         [ 0.00000067, 0.00002292, 0.00019117, 0.00038771, 0.00019117, 0.00002292, 0.00000067 ],         [ 0.00002292, 0.00078633, 0.00655965, 0.01330373, 0.00655965, 0.00078633, 0.00002292 ],         [ 0.00019117, 0.00655965, 0.05472157, 0.11098164, 0.05472157, 0.00655965, 0.00019117 ],         [ 0.00038771, 0.01330373, 0.11098164, 0.22508352, 0.11098164, 0.01330373, 0.00038771 ],         [ 0.00019117, 0.00655965, 0.05472157, 0.11098164, 0.05472157, 0.00655965, 0.00019117 ],         [ 0.00002292, 0.00078633, 0.00655965, 0.01330373, 0.00655965, 0.00078633, 0.00002292 ],         [ 0.00000067, 0.00002292, 0.00019117, 0.00038771, 0.00019117, 0.00002292, 0.00000067 ]     ] ];    filterGaussianBlur = function (radius) {     applyFilter(new ConvolutionFilter(gaussMatrix[radius], 1.0, 0.0));     hideDialog('#dialog-filtergaussianblur'); }

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

Ниже приведен результат этого фильтра:

---

Шаг 24: Обнаружение края

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

Для достижения этого мы используем приближение первых значений из распределения Лапласа (изображение выше) с b = 1/4. Все функции из этой точки будут иметь только разные матрицы:

01 02 03 04 05 06 07 08 09 10 11 12

filterEdgeDetection = function () {     applyFilter(new ConvolutionFilter(         [             [ 0, -1, 0 ],             [ -1, 4, -1 ],             [ 0, -1, 0 ]         ],         1.0,         0.0     ));     hideDialog('#dialog-filteredgedetection'); }

Ниже приведен результат этого фильтра:

---

Шаг 25: Улучшение края

Этот фильтр аналогичен предыдущему, но он усиливает края, не затемняя остальную часть изображения, что делает его идеальным для художественного использования. Это на самом деле матрица, которую я использовал, чтобы объяснить вам, как работают фильтры свертки:

01 02 03 04 05 06 07 08 09 10 11 12

filterEdgeEnhance = function () {     applyFilter(new ConvolutionFilter(         [             [ 0, 0, 0 ],             [ -1, 1, 0 ],             [ 0, 0, 0 ]         ],         1.0,         0.0     ));     hideDialog('#dialog-filteredgeenhance'); }

Ниже приведен результат этого фильтра:

---

Шаг 26: выбить

Фильтр «Тиснение» добавляет небольшой трехмерный эффект к изображению, выделяя левые нижние углы краев (так что это также фильтр обнаружения краев).

Функция:

01 02 03 04 05 06 07 08 09 10 11 12

filterEmboss = function () {     applyFilter(new ConvolutionFilter(         [             [ -1, -1, 0 ],             [ -1, 1, 1 ],             [ 0, 1, 1 ]         ],         1.0,         0.0     ));     hideDialog('#dialog-filteremboss'); }

Ниже приведен результат этого фильтра:

---

Шаг 27: Резкость

Мы все знаем, что такое заточка. Это достигается небольшой модификацией обнаружения края:

01 02 03 04 05 06 07 08 09 10 11 12

filterSharpen = function () {     applyFilter(new ConvolutionFilter(         [             [ 0, -1, 0 ],             [ -1, 5, -1 ],             [ 0, -1, 0 ]         ],         1.0,         0.0     ));     hideDialog('#dialog-filtersharpen'); }

Ниже приведен результат этого фильтра:

Вы видите разницу? Он действительно мал в матрице свертки, но в результате изображение получается более четким.

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

---

Шаг 28: Фильтрует обратные вызовы

Это будет следующая связка вызовов jQuery, но перед этим нам понадобится наша вторая вспомогательная функция в этом файле:

01 02 03 04 05 06 07 08 09 10

filterSwitch = function (e, val, func) {     switch (e.type) {         case "click":             func(val);             break;         case "keydown":             if (e.keyCode == 13) func(val);             break;     } }

Требуется три параметра:

• e — объект события,
• val — значение для передачи в функцию, и
• func — функция для вызова с предыдущим значением.

Это создает сокращение, которое мы можем использовать в следующем коде обратного вызова; просто вставьте его под помощник:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

app.callbacks.filterBrightness = function (e) {     var val = $('#dialog-filterbrightness input').val() / 100;     filterSwitch(e, val, filterBrightness); }    app.callbacks.filterDesaturation = function () {     filterDesaturation(); }    app.callbacks.filterColorify = function (e) {     var r = $('#dialog-filtercolorify input.r').val() * 1,         g = $('#dialog-filtercolorify input.g').val() * 1,         b = $('#dialog-filtercolorify input.b').val() * 1,         a = $('#dialog-filtercolorify input.a').val() * 1;     switch (e.type) {         case "click":             filterColorify(r, g, b, a);             break;         case "keydown":             if (e.keyCode == 13) filterColorify(r, g, b, a);             break;     } }    app.callbacks.filterBlur = function (e) {     var val = $('#dialog-filterblur input').val() * 1;     filterSwitch(e, val, filterBlur); }    app.callbacks.filterGaussianBlur = function (e) {     var val = ($('#dialog-filtergaussianblur input.3').attr('checked') ? 2: $('#dialog-filtergaussianblur input.2').attr('checked') ? 1: 0);     filterSwitch(e, val, filterGaussianBlur); }    app.callbacks.filterEdgeDetection = function (e) {     filterEdgeDetection(); }    app.callbacks.filterEdgeEnhance = function (e) {     filterEdgeEnhance(); }    app.callbacks.filterEmboss = function (e) {     filterEmboss(); }    app.callbacks.filterSharpen = function (e) {     filterSharpen(); }

---

Шаг 29: Сценарии: Введение

Предоставление пользователю возможности использовать некоторый язык сценариев в вашем приложении — очень полезная функция. Это позволяет пользователю автоматизировать свою работу, или когда он достигает какого-то приятного эффекта, он может поделиться им с кем-то еще, и этот человек тоже получит тот же эффект. И поскольку мы пишем все приложение на JavaScript — который сам является языком сценариев — очень легко создать такую ​​функцию.

Используя eval()функцию, мы можем запустить некоторый JavaScript из строки, и эта строка будет скриптом пользователя.

Вы, наверное, читали, что использование этой eval()функции — очень плохая практика. Конечно, если вам нужно использовать его внутри вашего кода, тогда это предложение верно, потому что это отключает любое кэширование или компиляцию, которые современные движки JavaScript используют для ускорения кода. Он также создает другой экземпляр синтаксического анализатора JavaScript, который тратит память до тех пор, пока не завершит работу с кодом. Поэтому избегайте использования eval()как это:

1 2 3 4

var myEvilCondition = "someObjectPropertyButIDontKnowWhichOne"; function evilEval () {     return eval('myObject.' + myEvilCondition); }

Код выше очень плохой . Вы никогда не должны использовать eval()как это. Приведенный выше пример можно исправить с помощью квадратных скобок:

1 2 3 4

var myNotEvilCondition = "someObjectPropertyButIDontKnowWhichOne"; function goodNoEval () {     return myObject[myNotEvilCondition]; }

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

---

Шаг 30: Сценарии: безопасный Eval

Поскольку мы выполняем пользовательские сценарии, мы должны быть уверены, что он случайно не уничтожит результат, над которым он работал, потому что он неправильно набрал имена функций или номера слоев. Вот почему он должен убедиться, что пользователь не может получить доступ к каким- windowлибо appметодам напрямую.

По этой причине мы делаем нашу функцию похожей на это:

1 2 3 4 5

scriptExecute = function (code) {     hideDialog('#dialog-executescript');     if ((code.match(/eval\(/g) != null) && (!confirm('You used the eval function inside of your code. This may lead to unexpected effects, do you want to continue?'))) return;     eval(code.replace(/(window\.|app\.)(.*?);/g, '')); }

(Поместите этот код в scripts.jsфайл.)

Сначала мы скрываем диалог, потому что в противном случае он просто зависнет там, пока скрипт не завершится, и, возможно, пользователь захочет увидеть свой скрипт на работе. Затем мы вызываем предоставленный код, но мы заменяем все windowи appсвязанные вызовы, поэтому пользователь не может удалить все слои или закрыть окно по ошибке.

Небольшое предупреждение: пользователь все еще может что-то сделать с этими переменными, если он использует eval()функцию в своем коде — но затем мы спрашиваем его, действительно ли он хочет это сделать.

Теперь мы должны добавить эту маленькую функцию обратного вызова:

1 2 3

app.callbacks.scriptExecute = function (e) {     scriptExecute($('#dialog-executescript textarea').val()); }

Это полная система сценариев. Идите и проверьте это, передав хороший код в диалог «Выполнение скрипта». Попробуйте использовать eval()там, чтобы увидеть, что он спрашивает вас, действительно ли вы хотите это сделать.

---

Вывод

Как вы можете видеть, HTML5 Canvas — мощная вещь. Но мы только поцарапали поверхность того, что можно с этим сделать. Мы создали действительно продвинутое приложение, которое позволяет пользователям загружать свои фотографии и вносить в них некоторые изменения, а затем сохранять и распечатывать отредактированные фотографии — используя чистый JavaScript. Несколько лет назад это было бы шуткой.

Также вы можете расширить приложение, которое вы только что создали! Добавьте больше фильтров, измените интерфейс, добавьте больше полезных функций (например, вы можете добавить больше свойств к слою, может быть список всех фильтров с возможностью их удаления и редактирования или кнопку для преобразования буфера отмены в готовый скрипт для пользователь, чтобы поделиться). Просто будьте изобретательны, и, возможно, вы создадите действительно полезный материал!

Спасибо за чтение этого урока, надеюсь, я действительно научил вас чему-то, что вы будете использовать в каком-то большом проекте. Если вам нужна помощь в создании чего-то продвинутого с HTML5, не стесняйтесь спрашивать меня на мой контактный адрес электронной почты или добавив комментарий к этому учебнику. Я отвечу вам, как только получу ваше сообщение.