Оригинальный адрес:10 JavaScript Image Manipulation Libraries for 2020

Оригинальный автор:Mahdhi Rezvi

Перевод с:Программа перевода самородков

Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…

Переводчик:IAMSHENSH

Корректор:niayyy-S

10 лучших библиотек обработки изображений JavaScript на 2020 год

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

Если вы найдете что-то полезное, попробуйте инкапсулировать это как компонент выбранного вами фреймворка. Таким образом, у вас будет повторно используемый компонент с декларативным API, готовый к использованию.

1. Pica

Этот плагин помогает уменьшить размер загружаемых изображений, тем самым экономя время загрузки. Он позволяет изменять размер изображений в браузере, является отзывчивым и не становится пиксельным, поскольку он автоматически выбирает наилучшую доступную технологию из Web Workers, WebAssembly, метода createImageBitmap и чистого JavaScript.

демо Github

2. Lena.js

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

демо руководство Github

3. Compressor.js

Это простой компрессор изображений JavaScript, который использует собственный браузер.canvas.toBlobAPI для обработки сжатия изображений. Это позволяет вам установить качество сжатого вывода от 0 до 1.

демо Github

4. Fabric.js

Fabric.js позволяет использовать JavaScript для HTML на веб-страницах.\ <canvas>Легко создавайте простые фигуры на элементах, такие как прямоугольники, круги, треугольники и другие многоугольники, или более сложные фигуры, состоящие из множества контуров. Fabric.js также позволяет управлять размером, положением и вращением этих объектов с помощью мыши.

Также можно использовать библиотеку Fabric.js для изменения свойств этих объектов, таких как их цвет, прозрачность, положение глубины на веб-странице, или для выбора групп этих объектов. Fabric.js также позволяет преобразовывать изображения SVG в данные JavaScript и непосредственно в\ <canvas>используемый элемент.

демо руководство Github

5. Blurify

Это крошечная (около 2кб) библиотека для размытия картинок, с функциями изcssрежим дляcanvasОтличная поддержка даунгрейда для режимов. Плагин работает в следующих трех режимах:

css:использоватьfilterсвойство (по умолчанию)
canvas:использоватьcanvasЭкспорт в формате base64
auto:Приоритетное использованиеcssрежим, если он не поддерживается, он будет автоматически преобразован вcanvasмодель

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

демо Github

6. Merge Images

Эта библиотека позволяет легко комбинировать изображения, не портя холст. Работа с холстом иногда может быть немного болезненной, особенно если вам нужен контекст холста только для выполнения относительно простых операций (таких как слияние изображений).merge-imagesАбстрагируйте все повторяющиеся задачи в простую функцию.

Изображения могут перекрываться и транспонировать друг друга. Функция возвращаетPromise,иresolveURI типа данных base64. Поддерживаются как браузеры, так и Node.js.

Github

7. Cropper.js

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

демо Github

8. CamanJS

Это библиотека манипулирования холстом для JavaScript. Он отличается простым в использовании интерфейсом и передовыми и эффективными методами редактирования изображений/холстов. Его легко расширить с помощью новых фильтров и плагинов, и он имеет ряд функций редактирования изображений, которые все еще расширяются. Он полностью свободен от зависимостей и работает как в Node.js, так и в браузере.

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

демо Официальный сайт Github

9. MarvinJ

MarvinJ — это фреймворк для обработки изображений на чистом JavaScript, созданный на основе фреймворка Marvin. MarvinJ прост, но мощен для множества различных приложений для обработки изображений.

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

Официальный сайт Github

10. Grade

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

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

HTML-файл

<!--渐变将应用于这些外部 div，作为背景图像-->
<div class="gradient-wrap">
    <img src="./samples/finding-dory.jpg" alt="" />
</div>
<div class="gradient-wrap">
    <img src="./samples/good-dinosaur.jpg" alt="" />
</div>

Сценарий JavaScript

<script src="path/to/grade.js"></script>
<script type="text/javascript">
    window.addEventListener('load', function(){
        /*
            你所有图像容器的节点列表（或单个节点）。
            该库将在每个容器中找到一个 <img /> 来创建渐变。
         */
        Grade(document.querySelectorAll('.gradient-wrap'))
    })
</script>

демо Github

Надеюсь, вам понравится эта статья. Не стесняйтесь комментировать, если вы чувствуете, что нужно что-то добавить.

Удачного кодирования!

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,продукт,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.