Image to Pixel

? Imagen a píxel

¡Un editor intuitivo para convertir imágenes en arte de píxeles, aplicar efectos ditacadores y administrar paletas personalizadas!
Disponible como una aplicación interactiva y una API JavaScript .

Pruébalo en vivo aquí : editor de imagen a píxel

? ¿Buscando al antiguo editor? Puedes encontrarlo aquí.

? Este proyecto fue construido completamente en el editor de código basado en el navegador AIJS. ?

---

Características de la aplicación

Versión 2.0
V2 introduce una velocidad mejorada, nuevas características y una interfaz refinada:

• ⚡ Altamente optimizado : resultados instantáneos para la mayoría de las imágenes, incluso en tamaños más grandes.
• Auto-refresh Taggle : vea los cambios en vivo mientras modifica la configuración.
• Opciones de dithering : elija entre Floyd-Steinberg , 2x2 Bayer , 4x4 Bayer , Ordered , Clustered 4x4 y atkinson , y ajuste la resistencia a la dithering en tiempo real.
• ? Soporte de la paleta : use paletas predeterminadas de Lospec o importe las personalizadas a través de la API de Lospec usando una paleta de paleta ( rgbg-36 . Ej.
• ? Gestión de la paleta personalizada : cree paletas personalizadas, guárdelas en caché local o descargue y cárguelas en formato JSON.
• ? Control de resolución : descargue su imagen pixelada en la resolución de la imagen de entrada o como arte de píxeles real.
• ? Tamaño de imagen de detectación automática : configure fácilmente el ancho del píxel para que coincida con el tamaño de la imagen original (ideal para las hojas de sprits).

---

Usando la API

Puede usar la biblioteca image-to-pixel en sus propios proyectos. Pase una imagen y opciones a la función pixelate , y obtenga una imagen bellamente descificada a cambio.
Nota : La API sigue siendo un trabajo en progreso; La documentación oficial está en desarrollo.

Uso de ejemplo

Agregue la biblioteca a su proyecto:

Usar a través de CDN;

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

O use localmente (recomendado);

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

Ejemplo de 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
} ) ;

Pruebe una demostración usando la API de imagen a píxel con Q5.js aquí.

---

También puede configurarlo con P5/Q5 a través de p5.prototype.registerMethod .

Pruebe una demostración usando la API de imagen a píxel con P5Play aquí.

 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 ) ;
} ) ; 

Soporte

Si desea apoyar el proyecto, considere compartir sus creaciones usando el editor y etiquetarme en Twitter @tezumies. ¡Sus comentarios y arte compartido son muy apreciados!

• Para obtener más bondades de arte de Pixel, consulte la aplicación con todas las funciones dragón , ¡ofrece aún más opciones, incluido el soporte de animación!
• ¿Quieres contribuir? Considere convertirse en patrón. Su soporte ayuda a mantener y expandir el proyecto.

¡Feliz pixelación!

? Licencia

? Labrary de imagen a píxel

La biblioteca Image-to Pixel (Image-to-Pixel.js) utilizada en este proyecto tiene licencia bajo la licencia MIT. Puede encontrar el texto completo de la licencia en el archivo LICENSE-library .

Solicitud

La aplicación de imagen a píxel en sí tiene licencia bajo la licencia de Apache 2.0. Consulte el archivo de LICENSE-app para obtener más detalles.

Nota: Si bien la biblioteca Image-to-Pixel.js está disponible gratuitamente bajo la licencia MIT, el código de aplicación se distribuye bajo la licencia APACHE 2.0. Asegúrese de revisar ambas licencias para comprender sus derechos y obligaciones al usar o modificar este proyecto.

---