Image to Pixel

? Imagem a pixel

Um editor intuitivo para converter imagens em arte de pixel, aplicar efeitos de Dithering e gerenciar paletas personalizadas!
Disponível como um aplicativo interativo e uma API JavaScript .

Experimente ao vivo aqui : editor de imagem a pixel

? Procurando o antigo editor? Você pode encontrá -lo aqui.

? Este projeto foi construído inteiramente no editor de código baseado em navegador AIJS. ?

---

Recursos de aplicação

Versão 2.0
V2 apresenta velocidade aprimorada, novos recursos e uma interface refinada:

• ⚡ Altamente otimizado : resultados instantâneos para a maioria das imagens, mesmo em tamanhos maiores.
• Alternância automática : consulte as alterações ao vivo enquanto você ajusta as configurações.
• Opções de Dithering : Escolha entre Floyd-Steinberg , 2x2 Bayer , 4x4 Bayer , Ordered , Clustered 4x4 e atkinson e ajuste a força de endividamento em tempo real.
• ? Suporte à paleta : use paletas padrão da Lospec ou importar as personalizadas via API da Lospec usando uma slug de paleta (por exemplo, rgbg-36 da paleta Lospec).
• ? Gerenciamento de paleta personalizado : Crie paletas personalizadas, salve -as no cache local ou faça o download e envie -as no formato JSON.
• ? Controle de resolução : faça o download da sua imagem pixelada na resolução da imagem de entrada ou como arte de pixel real.
• ? Tamanho da imagem de detecção automática : defina facilmente a largura do pixel para corresponder ao tamanho da imagem original (ótimo para folhas de sprites).

---

Usando a API

Você pode usar a biblioteca image-to-pixel em seus próprios projetos. Passe uma imagem e opções para a função pixelate e obtenha uma imagem lindamente escavada em troca.
Nota : A API ainda é um trabalho em andamento; A documentação oficial está em desenvolvimento.

Exemplo de uso

Adicione a biblioteca ao seu projeto:

Use via CDN;

 < script src =" https://cdn.jsdelivr.net/gh/Tezumie/Image-to-Pixel@main/image-to-pixel.js " > </ script >

Ou use localmente (recomendado);

 < script src =" image-to-pixel.js " > </ script >

Exemplo JavaScript

 ditheredCanvas = await pixelate ( {
  image : myCanvas ,             // Accepts HTML canvas, image elements, or q5/p5.js image objects
  width : 128 ,                  // Set pixelation width
  dither : 'Floyd-Steinberg' ,   // Dithering method ('Floyd-Steinberg', 'Ordered','2x2 Bayer', '4x4 Bayer',`Clustered 4x4` or `atkinson`)
  strength : 20 ,                // Dithering strength (0-100)
  //palette: 'rgbg-36',        // Optional: Lospec palette slug (depends on Lospec API availability)
  //Recommended: Define a custom palette //  // You can also set `palette: null,` to use the colors from your original image //
  palette : [ 
    '#1b1b1e' , '#f4f1de' , '#e07a5f' ,
    '#3d405b' , '#81b29a' , '#f2cc8f' ,
    '#8d5a97' , '#ef3054'
  ] ,
  resolution : 'original'       // Use 'original' for full resolution, or 'pixel' for pixelated size
} ) ;

Experimente uma demonstração usando a API de imagem a pixel com Q5.js aqui.

---

Você também pode configurá -lo com P5/Q5 através p5.prototype.registerMethod .

Experimente uma demonstração usando a API de imagem a pixel com P5Play aqui.

 let myCanvas ; // add a reference for the input canvas 

function setup ( ) {
	myCanvas = createCanvas ( windowWidth , windowHeight ) ;
}
. . .
...
async function draw ( ) {
}

//-----------------------Function to pixelate entire sketch-----------------------//
p5 . prototype . registerMethod ( 'post' , async function pixelateAndRender ( ) {
	ditheredCanvas = await pixelate ( {
		image : myCanvas ,
		width : 320 ,
		dither : 'ordered' ,
		strength : 11 ,
		palette : [
			'#1b1b1e' , '#f4f1de' , '#e07a5f' ,
			'#3d405b' , '#495c92' , '#596da7' , '#81b29a' , '#f2cc8f' ,
			'#8d5a97' , '#ef3054' , '#d3d0be' , '#4a7762' , '#364e43' ,
		] ,
		resolution : 'pixelated'
	} ) ;
	image ( ditheredCanvas , 0 , 0 , width , height ) ;
} ) ; 

❤️ Suporte

Se você quiser apoiar o projeto, considere compartilhar suas criações usando o editor e me marque no Twitter @Tezumies. Seus comentários e arte compartilhada são muito apreciados!

• Para mais pixels de arte, confira o aplicativo completo Dither Dragon , oferecendo ainda mais opções, incluindo suporte para animação!
• Quer contribuir? Considere se tornar um patrono. Seu apoio ajuda a manter e expandir o projeto.

Feliz pixelating!

? Licença

? Labrário de imagem a pixel

A biblioteca de imagem para pixel (imagem para pixel.js) usada neste projeto é licenciada sob a licença do MIT. Você pode encontrar o texto completo da licença no arquivo LICENSE-library .

Aplicativo

O próprio aplicativo de imagem a pixel é licenciado sob a licença Apache 2.0. Consulte o arquivo de LICENSE-app para obter mais detalhes.

Nota: Enquanto a biblioteca de imagem para pixel.js está disponível gratuitamente sob a licença do MIT, o código do aplicativo é distribuído sob a licença Apache 2.0. Certifique -se de revisar as duas licenças para entender seus direitos e obrigações ao usar ou modificar este projeto.

---