Добавление фильтров к изображениям с помощью FabricJS — часть 3

Сегодня мы увидим, как легко применять контраст к изображениям. Мы также увидим, как можно добиться эффекта поворота оттенка в FabricJS. Итак, давайте приступим!

Как сделать изображение высококонтрастным в FabricJS

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

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

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

Мы используем класс Contrast в FabricJS, чтобы применить контраст к изображениям, загруженным на холст.

• Первым шагом является добавление нужного изображения с помощью метода fromURL().
• Нам также нужно установить crossOrigin как "анонимный", чтобы избежать каких-либо исключений.
• Наконец, мы создаем экземпляр fabric.Image.filters.Contrast и добавляем его в массив фильтров с помощью метода push().
• Вы можете видеть, что я выполнил описанные выше шаги в приведенном ниже примере кода.

Предыдущая статья: Измените яркость или добавьте шум к изображениям на холсте

     var canvas = new fabric.Canvas("canvas", {
        backgroundColor: "black",
        isDrawingMode: false,
      });

      fabric.Image.fromURL(
        "https://images.unsplash.com/photo-1471922694854-ff1b63b20054?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80",
        function (img) {
          img.scale(0.45);
          img.set("top", 15);
          img.set("left", 200);
          img.set("originX", "center");
          img.set("originY", "top");

          // Adding contrast to our image
          img.filters.push(
            new fabric.Image.filters.Contrast({
              contrast: 0.3,
            })
          );

          img.applyFilters();
          canvas.add(img);
        },
        { crossOrigin: "anonymous" }
      );

Вы можете увидеть выходное изображение ниже:

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

Следует также отметить, что:

• Я передал свойству контрастности значение 0,3 в необязательных параметрах объекта.
• Свойство контрастности принимает значение Число в диапазоне от -1 до 1, которое управляет контрастностью изображения.
• Значение свойства по умолчанию contrast равно 0.

Добавление эффекта поворота оттенка с помощью FabricJS

Оттенок используется для обозначения чистого спектра цветов. Это не означает яркость цвета, а вместо этого одно значение, обозначающее чистый цвет чего-либо.

Чистый спектр цветов можно увидеть в цветовом круге или, чаще, в радуге.

Вы можете прочитать эту действительно крутую статью, чтобы лучше понять Hue, Value и Color!

Для достижения эффекта чередования оттенков мы используем класс чередования оттенков FabricJS.

Точно так же, как мы создали экземпляр класса Contrast в предыдущем примере, нам нужно создать экземпляр класса fabric.Image.filters.HueRotation. и добавьте его в список фильтров Array.

Нам также нужно передать свойству rotate числовое значение, лежащее где-то между -1 и 1. Это значение поворота оттенка, которое нам нужно в радианах.

      var canvas = new fabric.Canvas("canvas", {
        backgroundColor: "black",
        isDrawingMode: false,
      });

      fabric.Image.fromURL(
        "https://images.unsplash.com/photo-1471922694854-ff1b63b20054?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80",
        function (img) {
          img.scale(0.45);
          img.set("top", 15);
          img.set("left", 200);
          img.set("originX", "center");
          img.set("originY", "top");

          // Applying the hue rotation effect
          img.filters.push(
            new fabric.Image.filters.HueRotation({
              rotation: 0.5,
            })
          );

          img.applyFilters();
          canvas.add(img);
        },
        { crossOrigin: "anonymous" }
      );

Вы можете увидеть выходное изображение ниже: