Bild teilen in genaue Raster, Kacheln und Sprite-Frames

01

Ein Bild teilen und genaue Kacheln erhalten

bild teilen — Jeden Schnitt vor dem Export prüfen

Wähle Zeilen und Spalten, wenn das fertige Raster zählt. Beim Bild teilen verteilt das Werkzeug die nutzbare Fläche gleichmäßig und weist Restpixel eindeutig zu. Voreinstellungen liefern Hälften, Viertel oder ein 3-mal-3-Raster; benutzerdefinierte Werte reichen bis 20 Zeilen und 20 Spalten.

Wähle exakte Kachelgröße, wenn Laufzeit, Druck oder Sprite-Sheet feste Maße vorgibt. Das Werkzeug startet nach dem Rand, geht um Kachelgröße plus Abstand weiter und erhält bei Bedarf eine kleinere letzte Kachel.

Die nummerierte Vorschau verbindet jedes Rechteck mit seinem Namen. Standard beginnt oben links, umgekehrt weist unten rechts die 01 zu. Prüfe eine einzelne Kachel oder exportiere den vollständigen Plan als ZIP.

• bild teilen — 2 mal 1 ergibt linke und rechte Hälfte.
• bild teilen — 1 mal 2 ergibt obere und untere Hälfte.
• bild teilen — 3 mal 3 ergibt neun gleiche Flächen.
• bild teilen — Exakte Größe eignet sich für Sprites.

02

bild teilen — Raster oder exakte Größe wählen

bild teilen — Jeder Schnitt entspricht Quellpixeln

Beim Bild teilen nutzt die Berechnung die intrinsische Breite und Höhe. Der Rastermodus zieht Rand und Abstände ab und verteilt den Rest. Der Größenmodus geht mit den gewählten Maßen weiter und erhält den Rest am Rand. Vorschau und Export verwenden denselben Plan.

03

bild teilen — Das Quellbild privat halten

bild teilen — Lokale APIs vermeiden Uploads

Das Werkzeug liest ein lokales File mit createImageBitmap() und kopiert jedes Rechteck per drawImage() in einen temporären Canvas. Es enthält keine Upload-Anfrage und kein entferntes Projekt. Leeren schließt das Bitmap und widerruft die lokale URL.

04

bild teilen — Eine Kachel oder ZIP exportieren

bild teilen — Format, Qualität und Namen bleiben klar

Du kannst ein Bild teilen und PNG, JPEG oder WebP speichern. PNG eignet sich für Text und Transparenz, JPEG für Fotos, WebP für kompatible Ziele. Einzeldownload kodiert ein Rechteck; ZIP kodiert den gesamten Plan mit nummerierten Namen.

05

bild teilen — So wird das Werkzeug geprüft

bild teilen — Offizielle Quellen und reproduzierbare Tests

Die Prüfung verwendet Farbbilder mit bekannten Abmessungen, testet Raster und exakte Größe, Rand und Abstand, vergleicht Koordinaten, öffnet Exportmaße erneut und prüft das ZIP. Der Quellcode wird zusätzlich auf Netzwerkprimitive kontrolliert.

06

bild teilen — Sprite-Sheet-Ersteller ohne Atlas-Software verwenden

bild teilen — Frames ordnen, Zelle festlegen, Bewegung prüfen und exportieren

bild teilen — Füge Frames in Abspielreihenfolge hinzu. Verschieben oder Löschen ändert Vorschau und Metadatenindex. Ein Streifen eignet sich für kurze Schleifen, ein Raster verhindert eine extrem breite Textur.

bild teilen — Breite und Höhe legen jede Zelle fest. Einpassen zeigt die ganze Quelle, Ausfüllen beschneidet, Strecken erzwingt das Maß. Abstand trennt Zellen, der Außenrand umgibt den Atlas; beide fließen in x und y ein.

bild teilen — Erzeuge die Ausgabe vor dem Kopieren. Übersteigt der Atlas ein sicheres Budget, werden Bild und Koordinaten gemeinsam skaliert. CSS oder JSON beschreibt dadurch exakt die gespeicherte Datei.

07

bild teilen — Atlas-Abmessungen bewusst wählen

bild teilen — Zellen, Abstand und Rand bestimmen Koordinaten

bild teilen — Der Sprite-Sheet-Ersteller macht seine Geometrie nachvollziehbar. Spalten bestimmen Zeilenumbrüche; Streifen erzwingen eine Zeile oder Spalte. Jeder Ursprung beginnt nach dem Außenrand und rückt um Frame-Maß plus Abstand weiter. Muss die Canvas-Fläche verkleinert werden, verwenden Bild und Koordinaten denselben endgültigen Maßstab.

08

bild teilen — Unveröffentlichte Grafiken im Browser behalten

bild teilen — Lokale APIs vermeiden Verarbeitungs-Uploads

bild teilen — Ausgewählte Dateien werden mit createImageBitmap() dekodiert und auf einer lokalen Canvas gezeichnet. Vorschaubilder nutzen vom Browser erzeugte Blob-Adressen. Es gibt keinen Upload-Endpunkt, kein Konto und kein Cloud-Projekt. Beim Leeren werden Bitmaps geschlossen und Vorschau-URLs widerrufen, ohne die Quelldateien zu verändern.

09

bild teilen — Koordinaten für CSS oder Game-Engines exportieren

bild teilen — Alle Formate beschreiben denselben Atlas

bild teilen — Das JSON-Array bewahrt die Reihenfolge, während das JSON-Objekt nach Dateinamen suchen lässt. CSS erzeugt eine gemeinsame Hintergrundregel und je Frame eine Klasse mit negativen background-position-Werten. PNG erhält Alpha; WebP bietet regelbare Qualität. Sämtliche Maße beziehen sich auf die tatsächlich exportierte Atlas-Datei.

10

bild teilen — Atlas-Ausgabe verifizieren

bild teilen — Offizielle Spezifikationen ermöglichen reproduzierbare Prüfungen

bild teilen — Die Prüfung verbindet offizielle Dokumentation und reproduzierbare Browser-Tests. MDN beschreibt drawImage() und toBlob(), der W3C-Standard background-position. Tests laden Farben mit unterschiedlichen Maßen und Alpha, ändern die Reihenfolge, prüfen Rechtecke, exportieren WebP, lesen 148 mal 414 Pixel erneut aus und unterscheiden im Netzwerkprotokoll statische Ressourcen von lokalen Blob-Zugriffen.

11

bild teilen — Ein praktischer Ablauf zum Bilder zusammenfügen

bild teilen — Von getrennten Dateien zu einer planbaren Fläche

bild teilen — Beginne mit der Reihenfolge. Die Liste zeigt die Ausgabe und erlaubt Verschieben oder Entfernen, ohne das Original zu ändern. Horizontal vergleicht, vertikal zeigt Schritte, das Raster ordnet Sammlungen und intelligentes Stitching verbindet aufeinanderfolgende Screenshots.

bild teilen — Natürliche Größen erhalten Pixel, gleiche Breite oder Höhe richtet eine Komposition aus. Abstand, Ausrichtung und Hintergrund werden vor dem Export berechnet. Die Vorschau zeigt falsche Reihenfolgen oder Lücken.

bild teilen — Die zentrale Aktion steht oben. Dateien lassen sich auswählen oder ablegen und danach mit Maus oder Tastatur neu sortieren. Bilder zusammenfügen bleibt bis zum Download umkehrbar.