A internet está repleta de inúmeras imagens enviadas pelos usuários. Isso é especialmente verdadeiro para sites de mídia social – e é muito raro as pessoas postarem imagens originais e não editadas em qualquer lugar. Também é comum precisar postar imagens com tamanho ou formato específico. Embora existam muitos aplicativos de edição de imagem completos em smartphones hoje, ainda pode ser um pouco inconveniente para as pessoas cortar ou redimensionar qualquer imagem antes de enviá-la.
Felizmente, o JavaScript tem muitas bibliotecas gratuitas e de código aberto que podem ajudá-lo a fazer edição de imagem básica e bastante avançada. Use-os em seus próprios projetos para dar aos usuários a opção de cortar ou dimensionar qualquer imagem depois de enviá-la.
Neste post, daremos uma breve visão geral dos melhores editores de imagens JavaScript gratuitos e de código aberto que você pode adicionar ao seu site hoje.
Editor de Imagens Filerobot
O Filerobot é um dos editores de imagens JavaScript gratuitos mais ricos em recursos que você encontrará. Ele vem com toneladas de recursos de manipulação de imagem. Você pode ajustar facilmente o brilho, contraste, saturação e exposição das imagens. Existem também alguns efeitos e filtros embutidos, caso você queira algo que lhe dê resultados semelhantes aos filtros do Instagram.
Você pode alterar facilmente a rotação de uma imagem ou girá-la horizontal e verticalmente. As imagens podem ser facilmente cortadas em algumas proporções predefinidas, como banners, quadrados, etc. Há também uma opção para especificar uma largura e altura personalizadas para as imagens.
O editor vem com a capacidade de adicionar sua própria marca sobre as imagens que você edita com marcas d’água personalizadas, bem como sobreposições de texto e forma. Existem dois temas disponíveis chamados claro e escuro, mas você pode criar seus próprios temas para combinar com o esquema de cores do site onde planeja integrar o editor.
Você pode experimentar todos os recursos do editor na página de demonstração. Ele vem em duas versões: vanilla JS e componente React. Integrações com outras bibliotecas e frameworks também estão planejadas no futuro.
CamanJS
O CamanJS é outro editor de imagens popular baseado em JavaScript que vem com um conjunto de recursos decente. A biblioteca não é atualizada há algum tempo, o que significa que não adicionará novos recursos. No entanto, você ainda pode usá-lo para fazer muitas tarefas.
Ele vem com uma grande variedade de métodos para ajustar o brilho, contraste, saturação, vibração, nitidez, ruído e muitas outras coisas. Existem muitos filtros predefinidos inspirados no Instagram e originais disponíveis para você usar também, e os efeitos que eles produzem são incríveis. Você também pode criar várias camadas e aplicar modos de mesclagem a elas para criar algo mais complexo.
Você também tem a opção de aplicar filtros diferentes a elementos de imagem em uma página da Web usando o data-caman atributo. Os filtros serão aplicados automaticamente às imagens no carregamento da página.
As coisas que mais gosto na biblioteca são sua facilidade de extensibilidade e o controle que a biblioteca dá aos seus usuários. É possível registrar seus próprios filtros e modos de mesclagem na biblioteca e aplicá-los diretamente em diferentes imagens. Você também pode acompanhar o progresso dos filtros ouvindo diferentes eventos disparados pelo CamanJS. Nossa série sobre como criar um editor de imagens com o CamanJS cobre todos os aspectos da biblioteca em detalhes.
Editor de imagens da interface do usuário do Toast
O editor de imagens da interface do usuário do Toast também é um editor de imagens completo e gratuito que vem em três sabores. Você pode usar a versão JavaScript vanilla ou ir com os componentes Vue ou React wrapper.
Ele vem com sua própria interface de usuário, mas você também tem a opção de usar a API diretamente para editar as imagens. Existem temas claros e escuros no editor e você pode escolher se deseja colocar os controles de edição de imagem à esquerda, direita, superior ou inferior.
Os usuários podem cortar, inverter e girar a imagem depois de carregada no editor. Eles também podem desenhar sobre a imagem com linhas retas ou estilo livre. Algumas formas e ícones predefinidos também podem ser colocados em camadas sobre a imagem principal. Opções comuns de edição como brilho, tons de cinza, pixelização e inversão também estão disponíveis. No entanto, você não pode alterar o contraste ou a saturação da imagem, o que pode ser uma chatice.
Lena.js
Lena.js é uma biblioteca leve e fácil de usar para processamento de imagens. A diferença entre o Lena.js e outras bibliotecas é que ele não oferece controle granular sobre o processo de edição de imagens. Existem alguns filtros predefinidos comuns que você pode aplicar às suas imagens.
Os filtros são divididos principalmente em duas categorias. Primeiro, você pode usar filtros pixel a pixel para alterar a saturação ou tornar as imagens em tons de cinza. A outra categoria inclui filtros de detecção de borda. Você pode conferir todos eles em ação na página de demonstração da biblioteca.
VintageJS
A biblioteca VintageJS faz exatamente o que seu nome sugere. Ele permite que você aplique alguns efeitos vintage incríveis às imagens. Você só precisa passar sua fonte e um objeto com todas as opções de filtro como parâmetros para o vintagejs função.
A flexibilidade no uso desta biblioteca vem do fato de que a fonte pode ser um caminho para uma imagem real, bem como uma imagem ou elemento de tela na página da web. A função então retorna uma promessa que resolve para um objeto de resultado. O objeto de resultado também tem três métodos para ajudá-lo a obter a URL de dados da imagem atualizada, o elemento de tela ou um elemento de imagem com os dados de imagem atualizados.
Experimente a demo da biblioteca para ver se você gosta desses efeitos vintage.
Filtrado 2
A biblioteca Filterous 2 é outra ótima opção para pessoas que querem apenas uma biblioteca para aplicar rapidamente alguns efeitos predefinidos populares e conhecidos em imagens. Ele vem com cerca de 40 filtros diferentes inspirados no Instagram para aplicar às suas imagens.
Além disso, também oferece a opção de aplicar alguns efeitos básicos como aumentar ou diminuir o brilho, contraste e saturação das imagens passando um valor entre -1 e 1. Você também pode aplicar efeitos como desfoque, nitidez e borda detecção de imagens usando uma matriz de convolução.
Editores de imagem baseados em WebGL
Todas as bibliotecas que mencionei até agora executam todo o código de manipulação de imagem na CPU. Isso não é um problema quando você está editando imagens pequenas ou quando os usuários não se importam em esperar um pouco para ver os resultados finais. No entanto, não é possível para uma CPU mostrar resultados em tempo real quando ela tem que fazer todos esses cálculos para milhões de pixels.
É aqui que o WebGL prova ser muito útil. Você pode usar algumas bibliotecas baseadas em WebGL para fazer todos os cálculos para edição de imagens em uma GPU. A paralelização de toda essa computação de cor de pixel em uma GPU significa que quaisquer efeitos que você aplicar às imagens aparecerão instantaneamente.
Glfx.js
A primeira biblioteca sobre a qual gostaria de falar nesta categoria é a Glfx.js. Dá acesso a todas as funções que você precisa para ajustar o brilho, contraste, matiz, saturação, vibração e ruído em uma imagem.
Ele também suporta quatro métodos diferentes de desfoque. Isso inclui desfoque de zoom, desfoque de lente e deslocamento de inclinação, além de desfoque uniforme de toda a imagem. Alguns efeitos adicionais estão incluídos na biblioteca, como uma escala de cinza ou meio-tom de cor que dá às imagens uma aparência de quadrinhos. Você também pode distorcer as imagens usando vários filtros de distorção que podem criar um efeito de abaulamento, redemoinho ou mudança de perspectiva.
Nem todos os filtros e efeitos darão bons resultados em todas as imagens. Por exemplo, o efeito de desfoque da lente fica ótimo apenas se houver algumas fontes de luz de ponto brilhante na imagem. Você pode ver a rapidez com que os filtros são aplicados a uma imagem com esta biblioteca na demonstração.
Pixelapp
Pixelapp é outro editor de imagens que você pode usar para editar imagens com WebGL. Ele oferece a opção de ajustar os valores de brilho, contraste, saturação, sombras, matiz, matiz e muitas outras propriedades. Todos esses efeitos são divididos em quatro categorias chamadas luz, cor, detalhes e efeitos.
Ele também vem com suporte para ações de desfazer e refazer em vários níveis, caso você não esteja satisfeito com algumas das alterações anteriores feitas em uma imagem. Há um divisor que você pode arrastar sobre a imagem para ver a imagem original e a editada lado a lado. Você também pode inverter a imagem horizontalmente e verticalmente, dimensioná-la ou girá-la.
Tente editar algumas de suas imagens no editor. Você ficará impressionado com sua velocidade e funcionalidade.
Pensamentos finais
Neste post, dei uma breve visão geral de alguns dos melhores editores de imagem JavaScript gratuitos e de código aberto. Alguns deles, como o Filerobot e o Toast UI, vêm com sua própria interface de usuário integrada, enquanto outros, como o CamanJS, oferecem a flexibilidade de implementar a interface do usuário por conta própria. Você deve considerar o uso de um dos editores baseados em WebGL se desejar uma biblioteca que mostre os resultados em tempo real.
Originally posted 2022-06-13 09:32:07.
