Image to Pixel

? Image à pixel

Un éditeur intuitif pour convertir des images en art de pixel, appliquer des effets de tramage et gérer les palettes personnalisées!
Disponible à la fois comme une application interactive et une API JavaScript .

Essayez-le en direct ici : éditeur d'image à pixels

? Vous cherchez l'ancien éditeur? Vous pouvez le trouver ici.

? Ce projet a été entièrement construit dans l'éditeur de code basé sur le navigateur AIJS. ?

---

Caractéristiques d'application

Version 2.0
V2 introduit une vitesse améliorée, de nouvelles fonctionnalités et une interface raffinée:

• ⚡ hautement optimisé : résultats instantanés pour la plupart des images, même à des tailles plus grandes.
• Togue automatique : voir les modifications en direct lorsque vous modifiez les paramètres.
• Options de tramage : choisissez entre Floyd-Steinberg , 2x2 Bayer , 4x4 Bayer , Ordered , Clustered 4x4 et atkinson , et ajuster la force de tramage en temps réel.
• ? Prise en charge de la palette : utilisez des palettes par défaut à partir de Lospec ou importez des personnaux via l'API de Lospec à l'aide d'une limace de palette (par exemple, rgbg-36 de la palette Lospec).
• ? Gestion des palettes personnalisées : créez des palettes personnalisées, enregistrez-les dans le cache local ou téléchargez-les et téléchargez-les au format JSON.
• ? Contrôle de résolution : téléchargez votre image pixélée à la résolution de l'image d'entrée ou en tant qu'art de pixel réel.
• ? Taille de l'image de détection automatique : définissez facilement la largeur des pixels pour correspondre à la taille d'image d'origine (idéal pour les spritesheets).

---

Utilisation de l'API

Vous pouvez utiliser la bibliothèque image-to-pixel dans vos propres projets. Passez une image et des options à la fonction pixelate et obtenez une image magnifiquement dédiée en retour.
Remarque : L'API est toujours un travail en cours; La documentation officielle est en cours de développement.

Exemple d'utilisation

Ajoutez la bibliothèque à votre projet:

Utiliser via CDN;

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

Ou utiliser localement (recommandé);

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

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

Essayez une démo à l'aide de l'API d'image à pixels avec Q5.JS ici.

---

Vous pouvez également le configurer avec p5 / q5 via p5.prototype.registerMethod .

Essayez une démo à l'aide de l'API d'image à pixels avec P5Play ici.

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

❤️ Support

Si vous souhaitez soutenir le projet, envisagez de partager vos créations à l'aide de l'éditeur et taguez-moi sur Twitter @Tezumies. Vos commentaires et art partagé sont grandement appréciés!

• Pour plus d'art de pixels, consultez l'application complète avec Dther Dragon , offrant encore plus d'options, y compris le support d'animation!
• Vous voulez contribuer? Envisagez de devenir un mécène. Votre soutien aide à maintenir et à étendre le projet.

Happy Pixelating!

? Licence

? Labraire d'image à pixel

La bibliothèque d'image à pixels (image-à-pixel.js) utilisée dans ce projet est sous licence MIT. Vous pouvez trouver le texte complet de licence dans le fichier LICENSE-library .

Application

L'application d'image-pixel elle-même est sous licence en vertu de la Licence 2.0 Apache. Veuillez vous référer au fichier LICENSE-app pour plus de détails.

Remarque: Bien que la bibliothèque Image-to-Pixel.js soit librement disponible sous la licence MIT, le code d'application est distribué sous la licence Apache 2.0. Assurez-vous de consulter les deux licences pour comprendre vos droits et obligations lors de l'utilisation ou de la modification de ce projet.

---