Image to Pixel

? Bild-zu-Pixel

Ein intuitiver Redakteur zum Konvertieren von Bildern in Pixelkunst, die Anwendung von Dithering -Effekten und das Verwalten von benutzerdefinierten Paletten!
Erhältlich sowohl als interaktive Anwendung als auch als JavaScript -API .

Versuchen Sie es hier live : Image-to-Pixel-Editor

? Auf der Suche nach dem alten Herausgeber? Sie können es hier finden.

? Dieses Projekt wurde vollständig im AIJS -browserbasierten Code -Editor erstellt. ?

---

Anwendungsfunktionen

Version 2.0
V2 führt zu einer erweiterten Geschwindigkeit, neuen Funktionen und einer raffinierten Schnittstelle:

• ⚡ Hoch optimiert : Sofortige Ergebnisse für die meisten Bilder, auch bei größeren Größen.
• Auto-Refresh Toggle : Siehe Änderungen live, während Sie die Einstellungen optimieren.
• Dithering-Optionen : Wählen Sie zwischen Floyd-Steinberg , 2x2 Bayer , 4x4 Bayer , Ordered , Clustered 4x4 und atkinson , und stellen Sie die Dithering-Stärke in Echtzeit ein.
• ? Palettenunterstützung : Verwenden Sie Standardpaletten von lospec oder importieren Sie benutzerdefinierte über die API von LOSPEC mit einem Palettenschläger (z. B. rgbg-36 aus der LOSPEC-Palette).
• ? Benutzerdefinierte Palettenverwaltung : Erstellen Sie benutzerdefinierte Paletten, speichern Sie sie im lokalen Cache oder laden Sie sie im JSON -Format herunter und laden Sie sie hoch.
• ? Auflösungsregelung : Laden Sie Ihr pixeliges Bild auf die Auflösung des Eingabebildes oder als tatsächliche Pixelkunst herunter.
• ? Bildgröße für automatische Erstellung : Stellen Sie die Pixelbreite einfach auf die Originalbildgröße (ideal für Spriteshets) ein.

---

Verwenden der API

Sie können die image-to-pixel -Bibliothek in Ihren eigenen Projekten verwenden. Geben Sie ein Bild und Optionen an die pixelate und erhalten Sie im Gegenzug ein wunderschönes Bild.
Hinweis : Die API ist noch in Arbeit; Offizielle Dokumentation befindet sich in der Entwicklung.

Beispiel Verwendung

Fügen Sie die Bibliothek Ihrem Projekt hinzu:

Verwendung über CDN;

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

Oder lokal verwenden (empfohlen);

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

JavaScript -Beispiel

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

Versuchen Sie hier eine Demo mit Bild-zu-Pixel-API mit Q5.JS.

---

Sie können es auch mit P5/Q5 über p5.prototype.registerMethod einrichten.

Probieren Sie eine Demo mithilfe von Image-to-Pixel-API mit p5play hier aus.

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

❤️ Unterstützung

Wenn Sie das Projekt unterstützen möchten, sollten Sie Ihre Kreationen mit dem Editor teilen und mich auf Twitter @tezumies markieren. Ihr Feedback und Ihre gemeinsame Kunst werden sehr geschätzt!

• Weitere Pixel-Kunstgüte finden Sie in der vollwertigen App Dither Dragon und bieten Sie noch mehr Optionen an, einschließlich Animationsunterstützung!
• Willst du einen Beitrag leisten? Überlegen Sie, ein Patron zu werden. Ihre Unterstützung hilft bei der Aufrechterhaltung und Erweiterung des Projekts.

Happy Pixelation!

? Lizenz

? Bild-zu-Pixel-Labrary

Die in diesem Projekt verwendete Bild-zu-Pixel-Bibliothek (Image-to-Pixel.js) ist unter der MIT-Lizenz lizenziert. Sie finden den vollständigen Lizenztext in der LICENSE-library Bibliotheksdatei.

Anwendung

Die Bild-zu-Pixel-Anwendung selbst ist unter der Apache-Lizenz 2.0 lizenziert. Weitere Informationen finden Sie in der LICENSE-app Datei.

Hinweis: Während die Bibliothek von Image-zu-Pixel.js unter der MIT-Lizenz frei verfügbar ist, wird der Anwendungscode unter der Apache-Lizenz 2.0 verteilt. Stellen Sie sicher, dass Sie beide Lizenzen überprüfen, um Ihre Rechte und Pflichten bei der Verwendung oder Änderung dieses Projekts zu verstehen.

---