jspaint
1.0.0
JS -FarbeEin pixel-perfektes webbasiertes MS-Paint-Remake und mehr ... probieren Sie es aus! Schließen Sie sich dann dem Discord -Server bei, um Ihre Kunst zu teilen!
JS Paint stellt jedes Werkzeug und Menü der MS-Farbe und sogar nur wenig bekannte Funktionen zu einem hohen Maß an Treue her.
Es unterstützt Themen, zusätzliche Dateitypen und Zugangsfunktionen wie den Augenblattmodus und die Spracherkennung.
Ah ja, gute alte Farbe. Nicht der mit den Bändern oder dem neuen skeuomorphen mit der Schnittstelle, das fast die Hälfte des Bildschirms einnehmen kann. (Und nicht die noch neuere Farbe 3d.)
Windows 95, 98 und XP waren die goldenen Farbe. Sie hatten einen Werkzeugkasten und eine Farbbox, eine Vordergrundfarbe und eine Hintergrundfarbe, und das war alles, was Sie brauchten.
Die Dinge waren einfach.
Aber wir wollen mehr als drei Aktionen rückgängig machen. Wir möchten transparente Bilder bearbeiten. Wir können nicht einfach die alte Farbe verwenden.
Deshalb mache ich JS malen. Ich möchte gute alte Farbe in die moderne Ära bringen.
Anypalette.js.)Bearbeitungsfunktionen:
Verschiedene Verbesserungen:
Ein paar Dinge mit den Werkzeugen sind noch nicht fertig. Siehe todo.md
Der vollständige Clipboard -Support in der Web -App erfordert einen Browser, der die asynchrische Clipboard -API mit Bildern unterstützt, nämlich Chrome 76+ zum Zeitpunkt des Schreibens.
In anderen Browsern können Sie weiterhin mit Strg+C kopieren, mit Strg+x geschnitten und mit Strg+V einfügen. Daten, die von JS -Farben kopiert wurden, können nur in andere Fälle von JS -Farben eingefügt werden. Externe Bilder können eingefügt werden.
Im Gegensatz zu MS Paint können Sie Edit> rückgängig machen, um die Farb- oder Qualitätsreduzierung durch das Einsparen zurückzuversetzen. Dies speichert die Datei nicht rückgängig, aber Sie können dann in einem anderen Format mit höherer Qualität speichern, indem Sie Datei> speichern wie .
Es wird empfohlen, als PNG zu sparen, da es kleine Dateigrößen bietet und gleichzeitig die volle Qualität beibehält.
| Dateierweiterung | Name | Lesen | Schreiben | Palette lesen | Schreiben Sie Palette |
|---|---|---|---|---|---|
| .png | Png | ✅ | ✅ | ||
| .bmp, .dib | Monochrombitmap | ✅ | ✅ | ✅ | |
| .bmp, .dib | 16 Farbbitmap | ✅ | ✅ | ✅ | |
| .bmp, .dib | 256 Farbbitmap | ✅ | ✅ | ✅ | |
| .bmp, .dib | 24-Bit-Bitmap | ✅ | ✅ | N / A | N / A |
| .tif, .tiff, .dng, .cr2, .nef | Tiff (lädt die erste Seite) | ✅ | ✅ | ||
| PDF (lädt die erste Seite) | ✅ | ||||
| .Webp | Webp | ||||
| .gif | GIF | ||||
| .jpeg, .jpg | JPEG | N / A | N / A | ||
| .svg | SVG (nur Standardgröße) | ||||
| .ICO | ICO (nur Standardgröße) |
Die mit markierten Fähigkeiten werden derzeit dem Browser überlassen, um sie zu unterstützen oder nicht. Wenn "Write" gekennzeichnet ist, wird das Format im Dropdown -Typ -Typ angezeigt, funktioniert jedoch möglicherweise nicht, wenn Sie versuchen, zu speichern. Weitere Informationen finden Sie zum Öffnen von Dateien für weitere Informationen.
Die mit gekennzeichneten Fähigkeiten werden in Kürze und N/A nicht anwendbar sein.
"Read Palette" bezieht sich auf das Laden der Farben automatisch in die Farbenbox (aus einem indizierten Farbbild), und "Write Palette" bezieht sich auf das Schreiben eines indizierten Farbbildes.
Mit Farben> Farben und Farben sparen> Erhalten Sie Farben, die Sie in vielen verschiedenen Formaten sparen und laden können, um Kompatibilität mit einer Vielzahl von Programmen zu erhalten.
Wenn Sie einer anderen Anwendung umfangreiche Palettenunterstützung hinzufügen möchten, habe ich diese Funktionalität als Bibliothek verfügbar gemacht: Anypalette.js
| Dateierweiterung | Name | Programme | Lesen | Schreiben |
|---|---|---|---|---|
| .Kumpel | Riffpalette | MS -Lack für Windows 95 und Windows NT 4.0 | ✅ | ✅ |
| .gpl | Gimp -Palette | Gimp, Inkscape, Krita, Kolourpaint, Scribus, Cinepaint, MyPaint | ✅ | ✅ |
| .ACO | Adobe Color Swatch | Adobe Photoshop | ✅ | ✅ |
| .ase | Adobe Swatch Exchange | Adobe Photoshop, Indesign und Illustrator | ✅ | ✅ |
| .txt | Paint.net Palette | Paint.net | ✅ | ✅ |
| .Akt | Adobe Color Table | Adobe Photoshop und Illustrator | ✅ | ✅ |
| .pal, .psppalette | Paint Shop Pro Palette | Paint Shop Pro (JASC -Software / Corel) | ✅ | ✅ |
| .Hpl | Homesit Palette | Allaire Homesit / Macromedia Coldfusion | ✅ | ✅ |
| .cs | ColorSchemer | ColorSchemer Studio | ✅ | |
| .Kumpel | Starcraft Palette | Starcraft | ✅ | ✅ |
| .Wpe | Starcraft Terrain Palette | Starcraft | ✅ | ✅ |
| .ketchpalette | Skizze Palette | Skizzieren | ✅ | ✅ |
| .Spl | Skencil Palette | Skencil (früher als Skizze bezeichnet) | ✅ | ✅ |
| .Soc | Staroffice -Farben | Staroffice, OpenOffice, Libreoffice | ✅ | ✅ |
| .Kolors | Kolourpaint -Farbsammlung | Kolourpaint | ✅ | ✅ |
| .Kolors | Plasma -Desktop -Farbschema | KDE Plasma Desktop | ✅ | |
| .Thema | Windows -Thema | Windows Desktop | ✅ | |
| .TheMepack | Windows -Thema | Windows Desktop | ✅ | |
| .css, .scss, .styl | Cascading -Stylesheets | Webbrowser / Webseiten | ✅ | ✅ |
| .html, .svg, .js | Alle Textdateien mit CSS -Farben | Webbrowser / Webseiten | ✅ |
Es gibt einen Schwarzweißmodus mit Mustern anstelle von Farben in der Palette, die Sie von Bild> Attributen erhalten können ...
Sie können den Farbbox und die Werkzeugkasten herumziehen, wenn Sie sie an der richtigen Stelle greifen. Sie können sie sogar in kleine Fenster ziehen. Sie können die Fenster wieder zur Seite andocken, indem Sie auf ihre Titelbalken doppelklicken.
Zusätzlich zu der linken Klick-Vordergrundfarbe und der rechten Klick-Hintergrundfarbe gibt es eine dritte Farbe, auf die Sie beim Zeichnen Strg gedrückt halten können. Es beginnt ohne Farbe, sodass Sie Strg halten und zuerst eine Farbe auswählen müssen. Das ausgefallene Ding an diesem Farbsteckplatz ist, dass Sie Strg drücken und loslassen können, um die Farben während des Zeichnens zu wechseln.
Sie können Bildtransformationen wie Flip/Drehen, Stretch/Turn oder Invert (im Bildmenü) entweder auf das gesamte Bild oder auf eine Auswahl anwenden. Versuchen
Diese Tipps und Tricks aus einem Tutorial für MS Paint funktionieren auch in JS Paint:
JS Paint kann als progressive Web -App (PWA) installiert werden, obwohl sie noch nicht offline funktioniert. Suchen Sie nach der Installationsaufforderung in der Adressleiste.
PWA -Funktionen:
Fehlende Funktionen:
Ich habe es auch zu einer Desktop -App mit Elektronen- und Elektronen -Forge aufgebaut. Sie können es von der Seite "Releases" herunterladen.
Elektronen -App -Funktionen:
jspaint path/to/file.png im Terminal eineditor_window.on("close") preventDefault und kann ein Feature sein, muss jedoch das Fenster anzeigen/fokussierenKlonen Sie das Repo.
Installieren Sie node.js, wenn Sie es nicht haben, und öffnen Sie dann eine Eingabeaufforderung / Terminal im Projektverzeichnis.
Führen Sie npm run lint aus, um auf Rechtschreibfehler, Fehler, Probleme mit dem Codestil und andere Probleme einzugeben.
Führen Sie npm run format aus, um die Formatierungsprobleme automatisch zu beheben, oder npx eslint --fix um alle automatisch fixierbaren Probleme zu beheben.
Die Formatierungsregeln sind für die Kompatibilität mit dem integrierten Formatierer des VS-Code konfiguriert.
Führen Sie npm test aus, um Browser-basierte Tests mit Cypress durchzuführen. (Leider ist es langsam, Tests zu starten und durchzuführen.)
Führen Sie npm run accept Accept Accome Socome visuelle Änderungen an. Dies führt leider alle Tests erneut aus, anstatt die Ergebnisse des vorherigen Tests zu akzeptieren, sodass Sie unterschiedliche Ergebnisse als der vorherige Test erhalten können. Wenn Sie GitHub Desktop verwenden, können Sie Diffs von Bildern in vier verschiedenen Modi anzeigen.
Um die Cypress UI zu öffnen, run npm run test:start-server und dann gleichzeitig npm run cy:open
Tests werden auch in kontinuierlicher Integration mit Travis CI durchgeführt.
Nachdem Sie Abhängigkeiten mit npm i installiert haben, verwenden Sie npm run dev um einen Live-Reloading-Server zu starten.
Stellen Sie sicher, dass alle Layout-entscheidenden Stile in layout.css gehen. Bei der Aktualisierung layout.css wird eine Version des Stylesheetes mit RTLCSS generiert.
Sie sollten das RTL -Layout testen, indem Sie die Sprache in Arabisch oder Hebräisch ändern. Gehen Sie zu Extras> Sprache> العرvonة oder עברית .
Siehe Kontrollanweisungen, um das RTL -Layout zu kontrollieren.
Es gibt eine VS -Code -Startaufgabe zum Anhängen an Chrome zum Debuggen. Sehen Sie .vscode/launch.json für Verwendungsanweisungen.
npm inpm run electron:startElectron-Debug ist enthalten, sodass Sie F5 / Strg+R zum Nachladen und F12 / Strg+Shift+i verwenden können, um die Devtools zu öffnen.
Sie können mit npm run electron:make
Es gibt eine VS -Code -Startaufgabe zum Debuggen des Elektronenhauptprozesses. Für den Renderer -Prozess können Sie die eingebetteten Chrom Devtools verwenden.
JS Paint kann mit einem regulären Webserver bereitgestellt werden.
Nichts muss zusammengestellt werden.
Optional können Sie einen CORS Anywhere -Server einrichten, zum Laden von Bildern aus dem Web, wenn Sie eine URL in JS -Farbe einfügen oder die Funktion #load:<URL> mit Bildern verwenden, die nicht auf derselben Domäne liegen.
Standardmäßig wird eine CORS Anywhere -Instanz verwendet, um mit jspaint.app zu arbeiten.
Es wird kostenlos auf Heroku gehostet und Sie können Ihre eigene Instanz einrichten und es so konfigurieren, dass sie mit Ihrer eigenen Domain arbeiten.
Sie müssen https://jspaint-cors-proxy.herokuapp.com durch Ihre eigene Instanz-URL finden und ersetzen.
Der Multiplayer -Support ist derzeit auf Firebase angewiesen, das keine Open -Source -Software ist.
Sie können eine Firebase Echtzeit -Datenbankinstanz erstellen und sessions.js von JS Paint.Js bearbeiten, um darauf zu verweisen, und die config ersetzt, die an initializeApp durch die Konfiguration über die Firebase -Konsole übergeben wurde, wenn Sie eine Web -App einrichten.
Aber der Mehrspielermodus ist bisher sehr schlecht. Es sollte durch etwas Open Source ersetzt werden, sicherer, effizienter und robuster.
Fügen Sie dies zu Ihrem HTML hinzu:
< iframe src =" https://jspaint.app " width =" 100% " height =" 100% " > </ iframe > Sie können ein Bild aus einer URL laden lassen, indem Sie #load:<URL> zur URL hinzufügen.
< iframe src =" https://jspaint.app#load:https://jspaint.app/favicon.ico " width =" 100% " height =" 100% " > </ iframe >Wenn Sie JS Paint steuern möchten, wie es Dateien speichert/lädt oder direkt auf die Leinwand zugreift, gibt es eine instabile API.
Zuerst müssen Sie das Repo klonen, damit Sie einen iframe auf Ihre lokale Kopie verweisen können.
Die lokale Kopie von JS Paint muss auf demselben Webserver wie die enthaltende Seite oder genauer gesagt, sie muss denselben Ursprung teilen.
Eine lokale Kopie bedeutet auch, dass die Dinge nicht zu jeder Zeit brechen, wenn sich die API ändert.
Wenn JS -Farbe in einen Ordner namens jspaint kloniert wird, der im selben Ordner wie die Seite, in die Sie ihn einbetten möchten, lebt, können Sie dies verwenden:
< iframe src =" jspaint/index.html " id =" jspaint-iframe " width =" 100% " height =" 100% " > </ iframe > Wenn es woanders wohnt, müssen Sie möglicherweise ../ zum Beginn des Pfades hinzufügen, um ein Level zu erreichen. Zum Beispiel src="../../apps/jspaint/index.html" . Sie können auch eine absolute URL verwenden, wie src="https://example.com/cool-apps/jspaint/index.html" .
Sie können die Dateisparen- und Öffnensdialoge mit systemHooks -API von JS Paint überschreiben.
< script >
var iframe = document . getElementById ( "jspaint-iframe" ) ;
var jspaint = iframe . contentWindow ;
// Wait for systemHooks object to exist (the iframe needs to load)
waitUntil ( ( ) => jspaint . systemHooks , 500 , ( ) => {
// Hook in
jspaint . systemHooks . showSaveFileDialog = async ( { formats , defaultFileName , defaultPath , defaultFileFormatID , getBlob , savedCallbackUnreliable , dialogTitle } ) => { ... } ;
jspaint . systemHooks . showOpenFileDialog = async ( { formats } ) => { ... } ;
jspaint . systemHooks . writeBlobToHandle = async ( save_file_handle , blob ) => { ... } ;
jspaint . systemHooks . readBlobFromHandle = async ( file_handle ) => { ... } ;
} ) ;
// General function to wait for a condition to be met, checking at regular intervals
function waitUntil ( test , interval , callback ) {
if ( test ( ) ) {
callback ( ) ;
} else {
setTimeout ( waitUntil , interval , test , interval , callback ) ;
}
}
</ script >Ein Blob repräsentiert den Inhalt einer Datei im Speicher.
Ein Dateihandle ist alles, was eine Datei identifizieren kann. Sie können dieses Konzept besitzen und definieren, wie Dateien identifiziert werden können. Es könnte alles von einem Index in ein Array bis hin zu einer Dropbox -Datei -ID bis hin zu einer IPFS -URL zu einem Dateipfad sein. Es kann irgendein Typ sein, oder vielleicht muss es eine Zeichenfolge sein, vergesse ich.
Sobald Sie ein Konzept eines Dateihandels haben, können Sie Datei -Picker mithilfe der Systemhaken und Funktionen zum Lesen und Schreiben von Dateien implementieren.
| Befehl | Haken verwendet |
|---|---|
| Datei> speichern als | systemHooks.showSaveFileDialog , wenn eine Datei ausgewählt wird, systemHooks.writeBlobToHandle |
| Datei> Öffnen | systemHooks.showOpenFileDialog , wenn eine Datei ausgewählt wird, systemHooks.readBlobFromHandle |
| Datei> Speichern | systemHooks.writeBlobToHandle (oder wie Datei> Speichern, als ob noch keine Datei geöffnet wäre) |
| Bearbeiten> kopieren zu | systemHooks.showSaveFileDialog , wenn eine Datei ausgewählt wird, systemHooks.writeBlobToHandle |
| Bearbeiten> Einfügen von einfügen von | systemHooks.showOpenFileDialog , wenn eine Datei ausgewählt wird, systemHooks.readBlobFromHandle |
| Datei> als Tapete eingestellt (gekachelt) | systemHooks.setWallpaperTiled falls definiert, sonst systemHooks.setWallpaperCentered , wenn definiert, sonst gleich wie Datei> speichern als |
| Datei> als Tapete eingestellt (zentriert) | systemHooks.setWallpaperCentered wenn definiert, sonst gleich wie Datei> speichern als |
| Extras> Geschichte als GIF rendern | Gleich wie Datei> speichern als |
| Farben> Farben sparen | Gleich wie Datei> speichern als |
| Farben> Farben Holen Sie sich | Gleich wie Datei> Öffnen |
Warten Sie, um die App mit einer zum Bearbeiten geladenen Datei zu starten, bis die App geladen wird, und rufen Sie systemHooks.readBlobFromHandle mit einem Dateihandle auf und geben Sie der App an, diesen Dateiblob zu laden.
const file_handle = "initial-file-to-load" ;
systemHooks . readBlobFromHandle ( file_handle ) . then ( file => {
if ( file ) {
contentWindow . open_from_file ( file , file_handle ) ;
}
} , ( error ) => {
// Note: in some cases, this handler may not be called, and instead an error message is shown by readBlobFromHandle directly.
contentWindow . show_error_message ( `Failed to open file ${ file_handle } ` , error ) ;
} ) ;Dies ist ungeschickt, und in Zukunft kann es einen Parameter für Abfragezeichenfolge geben, um eine Anfangsdatei nach ihrem Handle zu laden. (Hinweis für sich selbst: Es muss warten, bis Ihre Systemhaken irgendwie registriert werden.)
Es gibt bereits einen Parameter für Abfragebarge aus einer URL:
< iframe src =" https://jspaint.app?load:SOME_URL_HERE " > </ iframe >Dies wird jedoch nicht das Dateihandle zum Speichern eingerichtet.
Sie können zwei Funktionen definieren, um das Hintergrundbild festzulegen, das von der Datei> als Tapete (gekachelte) und Datei> als Wallpaper (zentriert) eingestellt wird.
systemHooks.setWallpaperTiled = (canvas) => { ... };systemHooks.setWallpaperCentered = (canvas) => { ... }; Wenn Sie nur systemHooks.setWallpaperCentered systemHooks.setWallpaperCentered .
Wenn Sie keine systemHooks.setWallpaperCentered angegeben haben, speichert JS Paint standardmäßig eine Datei ( <original file name> wallpaper.png ) mit systemHooks.showSaveFileDialog und systemHooks.writeBlobToHandle .
Hier ist ein vollständiges Beispiel, das eine anhaltende benutzerdefinierte Tapete als Hintergrund auf der enthaltenden Seite unterstützt:
const wallpaper = document . querySelector ( "body" ) ; // or some other element
jspaint . systemHooks . setWallpaperCentered = ( canvas ) => {
canvas . toBlob ( ( blob ) => {
setDesktopWallpaper ( blob , "no-repeat" , true ) ;
} ) ;
} ;
jspaint . systemHooks . setWallpaperTiled = ( canvas ) => {
canvas . toBlob ( ( blob ) => {
setDesktopWallpaper ( blob , "repeat" , true ) ;
} ) ;
} ;
function setDesktopWallpaper ( file , repeat , saveToLocalStorage ) {
const blob_url = URL . createObjectURL ( file ) ;
wallpaper . style . backgroundImage = `url( ${ blob_url } )` ;
wallpaper . style . backgroundRepeat = repeat ;
wallpaper . style . backgroundPosition = "center" ;
wallpaper . style . backgroundSize = "auto" ;
if ( saveToLocalStorage ) {
const fileReader = new FileReader ( ) ;
fileReader . onload = ( ) => {
localStorage . setItem ( "wallpaper-data-url" , fileReader . result ) ;
localStorage . setItem ( "wallpaper-repeat" , repeat ) ;
} ;
fileReader . onerror = ( ) => {
console . error ( "Error reading file (for setting wallpaper)" , file ) ;
} ;
fileReader . readAsDataURL ( file ) ;
}
}
// Initialize the wallpaper from localStorage, if it exists
try {
const wallpaper_data_url = localStorage . getItem ( "wallpaper-data-url" ) ;
const wallpaper_repeat = localStorage . getItem ( "wallpaper-repeat" ) ;
if ( wallpaper_data_url ) {
fetch ( wallpaper_data_url ) . then ( response => response . blob ( ) ) . then ( file => {
setDesktopWallpaper ( file , wallpaper_repeat , false ) ;
} ) ;
}
} catch ( error ) {
console . error ( error ) ;
}Es ist ein bisschen rekursiv, sorry; Es könnte wahrscheinlich einfacher gemacht werden. Wie nur durch Verwendung von Daten -URLs. (Eigentlich denke ich, ich wollte nur Blob -URLs verwenden, damit der DOM -Inspektor nicht mit einer super langen URL aufbläht. Was wirklich ein Devtools -UX -Fehler ist. Vielleicht haben sie dies verbessert?)
Sie können eine Datei mit den gewünschten Abmessungen laden. Im Moment gibt es dafür keine besondere API dafür.
Siehe zunächst das Laden einer Datei.
Sie können das Thema programmatisch ändern:
var iframe = document . getElementById ( "jspaint-iframe" ) ;
var jspaint = iframe . contentWindow ;
jspaint . set_theme ( "modern.css" ) ;Dies wird jedoch die Benutzerpräferenz brechen.
Das Menü extras> Themen funktioniert weiterhin, aber die Präferenz bleibt beim Nachladen der Seite nicht bestehen.
In Zukunft kann es einen Parameter für Abfragebarstellung geben, um das Standardthema anzugeben. Sie können JSPaint auch für das Standardthema ändern.
Ähnlich wie beim Thema können Sie versuchen, die Sprache programmgesteuert zu ändern:
var iframe = document . getElementById ( "jspaint-iframe" ) ;
var jspaint = iframe . contentWindow ;
jspaint . set_language ( "ar" ) ;Dies wird jedoch tatsächlich den Benutzer auffordern, die Anwendung neu zu laden, um Sprachen zu ändern.
Das Extras> Sprachmenü funktioniert weiterhin, aber der Benutzer wird die Mühe machen, die Sprache jedes Mal zu ändern, wenn er die Seite neu lädt.
In Zukunft kann es einen Parameter für Abfragebaritte geben, um die Standardsprache anzugeben. Sie können JSPaint auch die Standardsprache ändern.
Noch nicht unterstützt. Sie könnten JSPaint aufgeben und Ihre eigenen Menüs hinzufügen.
Mit dem Zugriff auf die Leinwand können Sie eine Live -Vorschau Ihrer Zeichnung implementieren, beispielsweise die Aktualisierung einer Textur in einer Spiele -Engine in Echtzeit.
var iframe = document . getElementById ( "jspaint-iframe" ) ;
// contentDocument here refers to the webpage loaded in the iframe, not the image document loaded in jspaint.
// We're just reaching inside the iframe to get the canvas.
var canvas = iframe . contentDocument . querySelector ( ".main-canvas" ) ; Es wird empfohlen, dies nicht zum Laden eines Dokuments zu verwenden, da es den Dokumenttitel nicht ändert oder unter anderem die Verschiebung/Wiederholungsgeschichte zurückgesetzt wird. Verwenden Sie stattdessen open_from_file .
Wenn Sie Schaltflächen oder andere Benutzeroberflächen machen möchten, um Dinge im Dokument zu tun, sollten Sie es (wahrscheinlich) unauffällig machen. Es ist sehr einfach, wickeln Sie Ihre Aktion einfach in einen Anruf ein, um undoable zu tun.
var iframe = document . getElementById ( "jspaint-iframe" ) ;
var jspaint = iframe . contentWindow ;
var icon = new Image ( ) ;
icon . src = "some-folder/some-image-15x11-pixels.png" ;
jspaint . undoable ( {
name : "Seam Carve" ,
icon : icon , // optional
} , function ( ) {
// do something to the canvas
} ) ; systemHooks.showSaveFileDialog({ formats, defaultFileName, defaultPath, defaultFileFormatID, getBlob, savedCallbackUnreliable, dialogTitle })Definieren Sie diese Funktion, um das Standarddialogfeld SPARE zu überschreiben. Dies wird sowohl zum Speichern von Bildern als auch zum Palettendateien und zum Animationen verwendet.
Argumente:
formats : Eine Reihe von Objekten, die Arten von Dateien darstellen, mit den folgenden Eigenschaften:formatID : Eine Zeichenfolge, die das Format eindeutig identifiziert (kann mit mimeType entsprechen)mimeType (optional): Der ausgewiesene Medientyp des Dateiformats z. B. "image/png" (Palettenformate haben diese Eigenschaft nicht)name : Der Name des Dateiformats, z. B. "WebP"nameWithExtensions : Der Name des Dateiformats gefolgt von einer Liste von Erweiterungen, zB "TIFF (*.tif;*.tiff)"extensions : Eine Reihe von Dateierweiterungen mit Ausnahme des Punktes mit der bevorzugten Erweiterung zuerst, z. B. ["bmp", "dib"]defaultFileName (optional): Ein vorgeschlagener Dateiname, z. B. "Untitled.png" oder der Name eines geöffneten Dokuments.defaultPath (optional): Ein Dateihandle für ein geöffnetes Dokument, sodass Sie einfach auf demselben Ordner speichern können. Fehlbezeichnung: Dies ist möglicherweise kein Weg, es hängt davon ab, wie Sie Dateigriffe definieren.defaultFileFormatID (optional): Die formatID eines Dateiformats ausgewählt standardmäßig ausgewählt.async function getBlob(formatID) : Eine Funktion, die Sie aufrufen, um eine Datei in einem der unterstützten Formate zu erhalten. Es ist eine formatID und gibt ein Promise zurück, das mit einem Blob auflöst, der den zu speichernden Dateiinhalt darstellt.function savedCallbackUnreliable({ newFileName, newFileFormatID, newFileHandle, newBlob }) (optional): Eine Funktion, die Sie aufrufen, wenn der Benutzer die Datei gespeichert hat. Der newBlob sollte von getBlob(newFileFormatID) stammen.dialogTitle (optional): Ein Titel für den Dialogfeld Speichern. Beachten Sie hier die Inversion der Kontrolle: JS Paint ruft Ihre systemHooks.showSaveFileDialog -Funktionen auf, und dann nennen Sie die getBlob -Funktion von JS Paint. Sobald getBlob behoben ist, können Sie die von JS Paint definierte savedCallbackUnreliable -Funktion aufrufen. (Hoffentlich kann ich dies in Zukunft klarstellen.)
Beachten Sie auch, dass diese Funktion für das Speichern der Datei verantwortlich ist und nicht nur einen Speicherort auswählen kann. Sie können Ihre systemHooks.writeBlobToHandle wiederverwenden.
systemHooks.showOpenFileDialog({ formats })Definieren Sie diese Funktion, um den Standarddialogfeld "Standard" zu überschreiben. Dies wird zum Öffnen von Bildern und Paletten verwendet.
Argumente:
formats : Gleich wie systemHooks.showSaveFileDialog Beachten Sie, dass diese Funktion für das Laden des Inhalts der Datei verantwortlich ist und nicht nur eine Datei auswählt. Sie können Ihre systemHooks.readBlobFromHandle wiederverwenden.
systemHooks.writeBlobToHandle(fileHandle, blob)Definieren Sie diese Funktion, um JS Malen zu mitteilen, wie Sie eine Datei speichern.
Argumente:
fileHandle : Ein Dateihandle, wie von Ihrem System definiert, das die Datei darstellt, an die sie schreiben soll.blob : Ein Blob der den zu speichernden Dateiinhalt darstellt.Rückgaben:
Promise , die mit true auflöst, wenn die Datei definitiv erfolgreich gespeichert wurde, false , wenn ein Fehler aufgetreten ist oder der Benutzer storniert oder undefined , wenn nicht bekannt ist, ob die Datei erfolgreich gespeichert wurde, wie es bei der Datei heruntergeladen wird, die mit <a href="..." download="..."> . Das Versprechen sollte nicht ablehnen; Fehler sollten behandelt werden, indem eine Fehlermeldung angezeigt und false zurückgegeben wird. systemHooks.readBlobFromHandle(fileHandle)Definieren Sie diese Funktion, um JS Malen zu mitteilen, wie eine Datei geladen wird.
Argumente:
fileHandle : Ein von Ihrem System definierter Dateihandle, der die Datei darstellt, aus der sie gelesen werden sollen. systemHooks.setWallpaperTiled(canvas)Definieren Sie diese Funktion, um JS Malen zu sagen, wie das Hintergrundbild eingestellt werden kann. Integrieren Sie das Set als Beispiel für ein Beispiel.
Argumente:
canvas : Eine HTMLCanvasElement mit dem Bild als Tapete. systemHooks.setWallpaperCentered(canvas)Definieren Sie diese Funktion, um JS Malen zu sagen, wie das Hintergrundbild eingestellt werden kann. Integrieren Sie das Set als Beispiel für ein Beispiel.
Argumente:
canvas : Eine HTMLCanvasElement mit dem Bild als Tapete. undoable({ name, icon }, actionFunction)Verwenden Sie dies, um eine Aktion unauffällig zu machen.
Diese Funktion enthält einen Momentaufnahme der Leinwand und einen anderen Zustand und ruft dann die actionFunction -Funktion auf. Es schafft einen Eintrag in die Geschichte, damit es rückgängig gemacht werden kann.
Argumente:
name : Ein Name für die Aktion, z. B. "Brush" oder "Rotate Image 270°"icon (optional): Ein Image , das im Verlaufsfenster angezeigt werden soll. Es wird empfohlen, 15x11 Pixel zu sein.actionFunction : Eine Funktion, die keine Argumente nimmt und die Leinwand ändert. show_error_message(message, [error])Verwenden Sie dies, um ein Dialogfeld zur Fehlermeldung anzuzeigen, optional mit erweiterbaren Fehlerdetails.
Argumente:
message : Klartext im Dialogfeld anzeigen.error (optional): Ein Error , das im Dialogfeld angezeigt werden soll, das standardmäßig in einem von "Details" erweiterbaren Abschnitt standardmäßig zusammenbricht. open_from_file(blob, source_file_handle)Verwenden Sie dies, um eine Datei in die App zu laden.
Argumente:
blob : Ein Blob -Objekt, das die zu geladene Datei darstellt.source_file_handle : Ein entsprechender Dateihandle für die Datei, wie von Ihrem System definiert.Entschuldigung für die schrullige API. Die API ist neu und Teile davon wurden überhaupt nicht entworfen. Dies war nur ein Hack, auf den ich mich verlassen hatte, um mich auf die Interna von JS Paint zu wenden, um eine Datei zu laden. Ich habe mich entschlossen, es als erste Version der API zu dokumentieren, da ich beim Upgrade meine Verwendung sowieso einen Changelog haben möchte.
set_theme(theme_file_name)Verwenden Sie dies, um das Aussehen der Anwendung zu ändern.
Argumente:
theme_file_name : Der Name der zu geladenen Themendatei, einer von:"classic.css" : Das Windows98 -Thema."dark.css" : Das dunkle Thema."modern.css" : Das moderne Thema."winter.css" : Das festliche Winterthema."occult.css" : Ein satanisches Thema. set_language(language_code)Sie können dies verwenden, um die Sprache der Anwendung zu ändern. Tatsächlich wird dem Benutzer jedoch eine Eingabeaufforderung angezeigt, die Sprache zu ändern, da die Anwendung neu geladen werden muss, um die Änderung anzuwenden. Und wenn dieser Dialog nicht in der richtigen Sprache ist, werden sie wahrscheinlich verwirrt sein.
Argumente:
language_code : Der zu verwendende Sprachcode, z. B. "en" für Englisch, "zh" für traditionelle Chinesen, "zh-simplified" für vereinfachte Chinesen usw. Die API wird sich stark ändern, aber Änderungen werden im Changelog dokumentiert.
Nicht nur eine Geschichte von Änderungen, sondern auch ein Migrations-/Upgrade -Leitfaden.
Für allgemeine Projektnachrichten klicken Sie in der App auf Extras> Projektnachrichten .
JS Paint ist kostenlos und Open -Source -Software, lizenziert unter der zulässigen MIT -Lizenz.
