jspaint
1.0.0
JS PaintRemake MS Paint berbasis web berbasis web dan banyak lagi ... Cobalah! Kemudian bergabunglah dengan server Discord untuk berbagi karya seni Anda!
JS Paint menciptakan kembali setiap alat dan menu cat MS, dan bahkan fitur yang sedikit diketahui, dengan tingkat kesetiaan yang tinggi.
Ini mendukung tema, jenis file tambahan, dan fitur aksesibilitas seperti mode tatapan mata dan pengenalan ucapan.
Ah ya, cat tua yang bagus. Bukan yang dengan pita atau skeuomorphic baru dengan antarmuka yang dapat memakan hampir setengah layar. (Dan bukan 3d cat yang lebih baru.)
Windows 95, 98, dan XP adalah tahun -tahun keemasan cat. Anda memiliki kotak alat dan kotak warna, warna latar depan dan warna latar belakang, dan hanya itu yang Anda butuhkan.
Segalanya sederhana.
Tapi kami ingin membatalkan lebih dari tiga tindakan. Kami ingin mengedit gambar transparan. Kita tidak bisa terus menggunakan cat lama.
Jadi itulah mengapa saya membuat cat JS. Saya ingin membawa cat lama yang bagus ke era modern.
Anypalette.js.)Fitur Pengeditan:
Perbaikan lain -lain:
Beberapa hal dengan alat belum selesai. Lihat Todo.MD
Dukungan clipboard lengkap di aplikasi web membutuhkan browser yang mendukung API clipboard async w/ gambar, yaitu chrome 76+ pada saat penulisan.
Di browser lain Anda masih dapat menyalin dengan Ctrl+C , dipotong dengan Ctrl+X , dan menempel dengan Ctrl+V , tetapi data yang disalin dari cat JS hanya dapat ditempelkan ke dalam contoh cat JS lainnya. Gambar eksternal dapat disisipkan.
Tidak seperti di MS Paint, Anda dapat menggunakan Edit> Undo untuk mengembalikan warna atau pengurangan kualitas dari Saving. Ini tidak membatalkan menyimpan file, tetapi memungkinkan Anda untuk menyimpan dalam format yang berbeda dengan kualitas yang lebih tinggi, menggunakan File> Simpan As .
Menyimpan sebagai PNG direkomendasikan karena memberikan ukuran file kecil sambil mempertahankan kualitas penuh.
| Ekstensi file | Nama | Membaca | Menulis | Baca palet | Tulis palet |
|---|---|---|---|---|---|
| .png | Png | ✅ | ✅ | ||
| .bmp, .dib | Bitmap monokrom | ✅ | ✅ | ✅ | |
| .bmp, .dib | 16 warna bitmap | ✅ | ✅ | ✅ | |
| .bmp, .dib | 256 warna bitmap | ✅ | ✅ | ✅ | |
| .bmp, .dib | Bitmap 24-bit | ✅ | ✅ | N/a | N/a |
| .tif, .Tiff, .dng, .cr2, .nef | TIFF (Muat halaman pertama) | ✅ | ✅ | ||
| PDF (memuat halaman pertama) | ✅ | ||||
| .webp | Webp | ||||
| .gif | Gif | ||||
| .jpeg, .jpg | Jpeg | N/a | N/a | ||
| .svg | SVG (hanya ukuran default) | ||||
| .ico | ICO (hanya ukuran default) |
Kemampuan yang ditandai dengan saat ini diserahkan ke browser untuk mendukung atau tidak. Jika "tulis" ditandai, format akan muncul di dropdown jenis file tetapi mungkin tidak berfungsi ketika Anda mencoba untuk menyimpan. Untuk membuka file, lihat Tabel Dukungan Format Gambar Browser Wikipedia untuk informasi lebih lanjut.
Kemampuan yang ditandai dengan mungkin akan segera hadir, dan N/A berarti tidak berlaku.
"Baca Palet" mengacu pada memuat warna ke dalam kotak warna secara otomatis (dari gambar warna yang diindeks), dan "Palet Tulis" mengacu pada menulis gambar warna yang diindeks.
Dengan Warna> Simpan Warna dan Warna> Dapatkan warna yang dapat Anda simpan dan memuat warna dalam berbagai format, untuk kompatibilitas dengan berbagai program.
Jika Anda ingin menambahkan dukungan palet yang luas ke aplikasi lain, saya telah membuat fungsi ini tersedia sebagai perpustakaan: Anypalette.js
| Ekstensi file | Nama | Program | Membaca | Menulis |
|---|---|---|---|---|
| .sahabat | Palet Riff | MS Paint for Windows 95 dan Windows NT 4.0 | ✅ | ✅ |
| .gpl | Palet GIMP | Gimp, Inkscape, Krita, Kolourpaint, Scribus, Cinepaint, Mypaint | ✅ | ✅ |
| .aco | Adobe Color Swatch | Adobe Photoshop | ✅ | ✅ |
| .Ase | Pertukaran Swatch Adobe | Adobe Photoshop, InDesign, dan Illustrator | ✅ | ✅ |
| .txt | Palet Paint.net | Paint.net | ✅ | ✅ |
| .bertindak | Tabel Warna Adobe | Adobe Photoshop dan Illustrator | ✅ | ✅ |
| .pal, .psppalette | Paint Shop Pro Palette | Paint Shop Pro (JASC Software / Corel) | ✅ | ✅ |
| .hpl | Palet Homesite | Allaire Homesite / Macromedia Coldfusion | ✅ | ✅ |
| .cs | ColorsChemer | Studio ColorsChemer | ✅ | |
| .sahabat | Palet Starcraft | Starcraft | ✅ | ✅ |
| .wpe | Palet Daerah Starcraft | Starcraft | ✅ | ✅ |
| .sketchpalette | Palet Sketsa | Sketsa | ✅ | ✅ |
| .spl | Palet Skensil | Skensil (sebelumnya disebut sketsa) | ✅ | ✅ |
| .soc | Warna Staroffice | StarOffice, OpenOffice, LibreOffice | ✅ | ✅ |
| .colors | Koleksi Warna Kolourpaint | Kolourpaint | ✅ | ✅ |
| .colors | Skema Warna Desktop Plasma | Desktop plasma kde | ✅ | |
| .tema | Tema Windows | Desktop Windows | ✅ | |
| .temepack | Tema Windows | Desktop Windows | ✅ | |
| .css, .scss, .styl | Cascading Stylesheets | Browser web / halaman web | ✅ | ✅ |
| .html, .svg, .js | File teks apa pun dengan warna CSS | Browser web / halaman web | ✅ |
Ada mode hitam dan putih dengan pola , bukan warna di palet, yang bisa Anda dapatkan dari gambar> atribut ...
Anda dapat menyeret kotak warna dan kotak alat di sekitar jika Anda mengambilnya di tempat yang tepat. Anda bahkan dapat menyeretnya ke jendela kecil. Anda dapat menggali jendela kembali ke samping dengan mengklik dua kali pada judul bar mereka.
Selain warna latar depan klik kiri dan warna latar belakang klik kanan, ada warna ketiga yang dapat Anda akses dengan memegang CTRL saat Anda menggambar. Dimulai tanpa warna sehingga Anda harus memegang CTRL dan memilih warna terlebih dahulu. Hal mewah tentang slot warna ini adalah Anda dapat menekan dan melepaskan CTRL untuk beralih warna saat menggambar .
Anda dapat menerapkan transformasi gambar seperti Flip/Rotate, Stretch/Conder atau Invert (di menu gambar) baik untuk seluruh gambar atau untuk pilihan. Coba coret dengan alat pilih bentuk bebas dan kemudian lakukan gambar> invert
Tips dan trik ini dari tutorial untuk MS Paint juga berfungsi di JS Paint:
JS Paint dapat diinstal sebagai aplikasi web progresif (PWA), meskipun belum berfungsi secara offline. Cari prompt instalasi di bilah alamat.
Fitur PWA:
Fitur yang hilang:
Saya juga telah membangunnya menjadi aplikasi desktop dengan elektron dan elektron forge. Anda dapat mengunduhnya dari halaman rilis.
Fitur Aplikasi Elektron:
jspaint path/to/file.png di terminaleditor_window.on("close") panggilan preventDefault dan mungkin fitur tetapi perlu menampilkan/memfokuskan jendelaKloning repo.
Instal node.js jika Anda tidak memilikinya, lalu buka prompt / terminal perintah di direktori proyek.
Jalankan npm run lint untuk memeriksa kesalahan ejaan, ketik kesalahan, masalah gaya kode, dan masalah lainnya.
Jalankan npm run format untuk secara otomatis memperbaiki masalah pemformatan, atau npx eslint --fix untuk memperbaiki semua masalah yang dapat diperbaiki secara otomatis.
Aturan pemformatan dikonfigurasi untuk kompatibilitas dengan formatter bawaan VS Code.
Jalankan npm test untuk menjalankan tes berbasis browser dengan Cypress. (Sayangnya, lambat memulai dan menjalankan tes.)
Jalankan npm run accept untuk menerima perubahan visual apa pun. Sayangnya ini menjalankan kembali semua tes, daripada menerima hasil tes sebelumnya, sehingga Anda bisa berakhir dengan hasil yang berbeda dari tes sebelumnya. Jika Anda menggunakan desktop github, Anda dapat melihat perbedaan gambar, dalam empat mode yang berbeda.
Untuk membuka UI Cypress, First Run npm run test:start-server , lalu secara bersamaan npm run cy:open
Tes juga dijalankan dalam integrasi berkelanjutan dengan Travis CI.
Setelah Anda menginstal dependensi dengan npm i , gunakan npm run dev untuk memulai server live-reloading.
Pastikan gaya tata letak yang penting masuk layout.css . Saat memperbarui layout.css , versi kanan-ke-kiri dari stylesheet dihasilkan, menggunakan RTLCSS.
Anda harus menguji tata letak RTL dengan mengubah bahasa menjadi bahasa Arab atau Ibrani. Pergi ke Ekstra> Bahasa> العربية atau עברית .
Lihat arahan kontrol untuk cara mengontrol tata letak RTL.
Ada tugas peluncuran VS Code untuk melampirkan ke Chrome untuk debugging. Lihat .vscode/launch.json untuk instruksi penggunaan.
npm inpm run electron:startTermasuk elektron-debug, sehingga Anda dapat menggunakan f5 / ctrl+r untuk memuat ulang dan f12 / ctrl+shift+i untuk membuka devtools.
Anda dapat membangun untuk diproduksi dengan npm run electron:make
Ada tugas peluncuran VS Code untuk men -debug proses utama elektron. Untuk proses renderer, Anda dapat menggunakan Chrome Devtools yang tertanam.
JS Paint dapat digunakan menggunakan server web biasa.
Tidak ada yang perlu dikompilasi.
Secara opsional, Anda dapat mengatur server CORS Anywhere, untuk memuat gambar dari web, jika Anda menempelkan URL ke cat JS, atau menggunakan fitur #load:<URL> dengan gambar yang tidak ada di domain yang sama.
Secara default itu akan menggunakan instance CORS Anywhere yang diatur untuk bekerja dengan jspaint.app.
Ini di -host secara gratis di Heroku, dan Anda dapat mengatur instance Anda sendiri dan mengkonfigurasinya untuk bekerja dengan domain Anda sendiri.
Anda harus menemukan dan mengganti https://jspaint-cors-proxy.herokuapp.com dengan URL instance Anda sendiri.
Dukungan multipemain saat ini bergantung pada Firebase, yang bukan perangkat lunak open source.
Anda dapat membuat instance database realtime firebase initializeApp mengedit sessions.js js cat config
Tetapi mode multipemain sangat buruk sejauh ini. Itu harus diganti dengan sesuatu yang open source, lebih aman, lebih efisien, dan lebih kuat.
Tambahkan ini ke html Anda:
< iframe src =" https://jspaint.app " width =" 100% " height =" 100% " > </ iframe > Anda dapat memuatnya gambar dari URL dengan menambahkan #load:<URL> ke URL.
< iframe src =" https://jspaint.app#load:https://jspaint.app/favicon.ico " width =" 100% " height =" 100% " > </ iframe >Jika Anda ingin mengontrol cat JS, bagaimana cara menyimpan/memuat file, atau mengakses kanvas secara langsung, ada API yang tidak stabil.
Pertama, Anda perlu mengkloning repo, sehingga Anda dapat mengarahkan iframe ke salinan lokal Anda.
Salinan lokal JS Paint harus di -host di server web yang sama dengan halaman yang berisi, atau lebih khusus lagi, ia harus berbagi asal yang sama.
Memiliki salinan lokal juga berarti hal -hal tidak akan rusak kapan saja API berubah.
Jika cat JS dikloning ke folder bernama jspaint , yang hidup di folder yang sama dengan halaman yang ingin Anda embedanya, Anda dapat menggunakan ini:
< iframe src =" jspaint/index.html " id =" jspaint-iframe " width =" 100% " height =" 100% " > </ iframe > Jika tinggal di tempat lain, Anda mungkin perlu menambahkan ../ ke awal jalan, untuk naik level. Misalnya, src="../../apps/jspaint/index.html" . Anda juga dapat menggunakan URL absolut, seperti src="https://example.com/cool-apps/jspaint/index.html" .
Anda dapat mengganti dialog Simpan dan Membuka File dengan API systemHooks JS Paints.
< 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 >Gumpalan mewakili isi file dalam memori.
Pegangan file adalah apa pun yang dapat mengidentifikasi file. Anda dapat memiliki konsep ini, dan mendefinisikan cara mengidentifikasi file. Ini bisa berupa apa saja dari indeks ke array, ke ID file dropbox, ke URL IPFS, ke jalur file. Ini bisa berupa jenis apa pun, atau mungkin perlu string, saya lupa.
Setelah Anda memiliki konsep pegangan file, Anda dapat menerapkan pemetik file menggunakan kait sistem, dan fungsi untuk membaca dan menulis file.
| Memerintah | Kait digunakan |
|---|---|
| File> simpan sebagai | systemHooks.showSaveFileDialog , lalu saat file dipilih, systemHooks.writeBlobToHandle |
| File> buka | systemHooks.showOpenFileDialog , lalu saat file diambil, systemHooks.readBlobFromHandle |
| File> Simpan | systemHooks.writeBlobToHandle (atau sama dengan File> Simpan Seolah belum ada file yang terbuka) |
| Edit> Salin ke | systemHooks.showSaveFileDialog , lalu saat file dipilih, systemHooks.writeBlobToHandle |
| Edit> Tempel dari | systemHooks.showOpenFileDialog , lalu saat file diambil, systemHooks.readBlobFromHandle |
| File> Set sebagai wallpaper (ubin) | systemHooks.setWallpaperTiled jika didefinisikan, else systemHooks.setWallpaperCentered jika didefinisikan, yang sama seperti file> simpan sebagai |
| File> Set as Wallpaper (terpusat) | systemHooks.setWallpaperCentered jika didefinisikan, sama seperti file> simpan sebagai |
| Ekstra> membuat sejarah sebagai gif | Sama seperti file> simpan sebagai |
| Warna> Simpan Warna | Sama seperti file> simpan sebagai |
| Warna> Dapatkan Warna | Sama seperti File> Open |
Untuk memulai aplikasi dengan file yang dimuat untuk diedit, tunggu aplikasi dimuat, lalu hubungi systemHooks.readBlobFromHandle dengan pegangan file, dan beri tahu aplikasi untuk memuat gumpalan file tersebut.
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 ) ;
} ) ;Ini canggung, dan di masa depan mungkin ada parameter string kueri untuk memuat file awal dengan pegangannya. (Catatan untuk diri sendiri: Perlu menunggu kait sistem Anda terdaftar, entah bagaimana.)
Sudah ada parameter string kueri untuk dimuat dari URL:
< iframe src =" https://jspaint.app?load:SOME_URL_HERE " > </ iframe >Tapi ini tidak akan mengatur pegangan file untuk disimpan.
Anda dapat mendefinisikan dua fungsi untuk mengatur wallpaper, yang akan digunakan oleh File> Set sebagai wallpaper (ubin) dan file> diatur sebagai wallpaper (terpusat) .
systemHooks.setWallpaperTiled = (canvas) => { ... };systemHooks.setWallpaperCentered = (canvas) => { ... }; Jika Anda hanya mendefinisikan systemHooks.setWallpaperCentered , JS Paint akan mencoba menebak dimensi layar Anda dan ubin gambar, menerapkannya dengan memanggil systemHooks.setWallpaperCentered Anda.
Jika Anda tidak menentukan systemHooks.setWallpaperCentered , JS Paint akan default untuk menyimpan file ( <original file name> wallpaper.png ) menggunakan systemHooks.showSaveFileDialog dan systemHooks.writeBlobToHandle .
Berikut adalah contoh lengkap yang mendukung wallpaper khusus yang gigih sebagai latar belakang pada halaman yang berisi:
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 ) ;
}Ini sedikit rekursif, maaf; Itu mungkin bisa dilakukan lebih sederhana. Seperti hanya dengan menggunakan URL data. (Sebenarnya, saya pikir saya ingin menggunakan URL gumpalan hanya sehingga tidak mementingkan Inspektur DOM dengan URL yang sangat panjang. Yang benar -benar bug Devtools UX. Mungkin mereka telah meningkatkan ini?)
Anda dapat memuat file yang memiliki dimensi yang diinginkan. Tidak ada API khusus untuk ini saat ini.
Lihat memuat file pada awalnya.
Anda dapat mengubah tema secara terprogram:
var iframe = document . getElementById ( "jspaint-iframe" ) ;
var jspaint = iframe . contentWindow ;
jspaint . set_theme ( "modern.css" ) ;Tapi ini akan merusak preferensi pengguna.
Menu Ekstra> Tema masih akan berfungsi, tetapi preferensi tidak akan bertahan saat memuat ulang halaman.
Di masa depan mungkin ada parameter string kueri untuk menentukan tema default. Anda juga bisa membayar jspaint untuk mengubah tema default.
Mirip dengan tema, Anda dapat mencoba mengubah bahasa secara terprogram:
var iframe = document . getElementById ( "jspaint-iframe" ) ;
var jspaint = iframe . contentWindow ;
jspaint . set_language ( "ar" ) ;Tetapi ini sebenarnya akan meminta pengguna untuk memuat ulang aplikasi untuk mengubah bahasa.
Menu Ekstra> Bahasa masih akan berfungsi, tetapi pengguna akan repot -repot mengubah bahasa setiap kali mereka memuat ulang halaman.
Di masa depan mungkin ada parameter string kueri untuk menentukan bahasa default. Anda juga bisa membayar JSpaint untuk mengubah bahasa default.
Belum didukung. Anda bisa membayar jspaint dan menambahkan menu sendiri.
Dengan akses ke kanvas, Anda dapat menerapkan pratinjau langsung gambar Anda, misalnya memperbarui tekstur di mesin game secara realtime.
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" ) ; Disarankan untuk tidak menggunakan ini untuk memuat dokumen, karena tidak akan mengubah judul dokumen, atau mengatur ulang sejarah Undo/Redo, antara lain. Alih -alih gunakan open_from_file .
Jika Anda ingin membuat tombol atau UI lain untuk melakukan hal -hal pada dokumen, Anda harus (mungkin) membuatnya tidak bisa ditentukan. Ini sangat mudah, cukup bungkus tindakan Anda dalam panggilan untuk undoable .
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 })Tentukan fungsi ini untuk mengganti dialog Simpan Default. Ini digunakan untuk menyimpan gambar, serta file palet, dan animasi.
Argumen:
formats : Array objek yang mewakili jenis file, dengan properti berikut:formatID : String yang secara unik mengidentifikasi format (mungkin sama dengan mimeType )mimeType (Opsional): Jenis media yang ditunjuk oleh format file, misalnya "image/png" (format palet tidak memiliki properti ini)name : Nama format file, misalnya "WebP"nameWithExtensions : Nama format file diikuti oleh daftar ekstensi, misalnya "TIFF (*.tif;*.tiff)"extensions : Array ekstensi file, tidak termasuk titik, dengan ekstensi yang disukai terlebih dahulu, misalnya ["bmp", "dib"]defaultFileName (Opsional): Nama file yang disarankan, misalnya "Untitled.png" atau nama dokumen terbuka.defaultPath (Opsional): Pegangan file untuk dokumen yang dibuka, sehingga Anda dapat menyimpan ke folder yang sama dengan mudah. Misnomer: Ini mungkin bukan jalur, itu tergantung pada bagaimana Anda mendefinisikan pegangan file.defaultFileFormatID (Opsional): formatID format file yang akan dipilih secara default.async function getBlob(formatID) : Fungsi yang Anda panggil untuk mendapatkan file dalam salah satu format yang didukung. Dibutuhkan formatID dan mengembalikan Promise yang diselesaikan dengan Blob yang mewakili konten file untuk disimpan.function savedCallbackUnreliable({ newFileName, newFileFormatID, newFileHandle, newBlob }) (opsional): fungsi yang Anda hubungi ketika pengguna telah menyimpan file. newBlob harus berasal dari getBlob(newFileFormatID) .dialogTitle (Opsional): Judul untuk Dialog Simpan. Perhatikan inversi kontrol di sini: JS Paint memanggil systemHooks.showSaveFileDialog Anda. THOWSAVEFILIALOG FUNGSI, dan kemudian Anda menyebut fungsi getBlob JS Paint. Setelah getBlob menyelesaikan, Anda dapat menghubungi fungsi savedCallbackUnreliable yang didefinisikan oleh cat JS. (Semoga saya bisa mengklarifikasi ini di masa depan.)
Perhatikan juga bahwa fungsi ini bertanggung jawab untuk menyimpan file, bukan hanya memilih lokasi simpan. Anda dapat menggunakan kembali fungsi systemHooks.writeBlobToHandle jika itu membantu.
systemHooks.showOpenFileDialog({ formats })Tentukan fungsi ini untuk mengganti dialog terbuka default. Ini digunakan untuk membuka gambar dan palet.
Argumen:
formats : Sama seperti systemHooks.showSaveFileDialog Perhatikan bahwa fungsi ini bertanggung jawab untuk memuat konten file, bukan hanya memilih file. Anda dapat menggunakan kembali fungsi systemHooks.readBlobFromHandle jika itu membantu.
systemHooks.writeBlobToHandle(fileHandle, blob)Tentukan fungsi ini untuk memberi tahu JS Paint cara menyimpan file.
Argumen:
fileHandle : Pegangan file, sebagaimana didefinisikan oleh sistem Anda, mewakili file yang akan ditulis.blob : Blob yang mewakili konten file untuk disimpan.Kembali:
Promise yang diselesaikan dengan true jika file tersebut pasti berhasil disimpan, false jika terjadi kesalahan atau pengguna dibatalkan, atau undefined jika tidak diketahui apakah file tersebut berhasil disimpan, seperti halnya dengan file yang diunduh dengan <a href="..." download="..."> . Janji itu tidak boleh ditolak; Kesalahan harus ditangani dengan menampilkan pesan kesalahan dan mengembalikan false . systemHooks.readBlobFromHandle(fileHandle)Tentukan fungsi ini untuk memberi tahu JS Paint cara memuat file.
Argumen:
fileHandle : Pegangan file, sebagaimana didefinisikan oleh sistem Anda, mewakili file yang akan dibaca. systemHooks.setWallpaperTiled(canvas)Tentukan fungsi ini untuk memberi tahu JS Paint cara mengatur wallpaper. Lihat Mengintegrasikan Set Sebagai Wallpaper Sebagai contoh.
Argumen:
canvas : HTMLCanvasElement dengan gambar untuk ditetapkan sebagai wallpaper. systemHooks.setWallpaperCentered(canvas)Tentukan fungsi ini untuk memberi tahu JS Paint cara mengatur wallpaper. Lihat Mengintegrasikan Set Sebagai Wallpaper Sebagai contoh.
Argumen:
canvas : HTMLCanvasElement dengan gambar untuk ditetapkan sebagai wallpaper. undoable({ name, icon }, actionFunction)Gunakan ini untuk membuat tindakan tidak dapat didoakan.
Fungsi ini mengambil snapshot dari kanvas, dan beberapa keadaan lain, dan kemudian memanggil fungsi actionFunction . Ini menciptakan entri dalam sejarah sehingga bisa dibatalkan.
Argumen:
name : Nama untuk tindakan, misalnya "Brush" atau "Rotate Image 270°"icon (Opsional): Image yang akan ditampilkan di jendela Sejarah. Disarankan untuk menjadi 15x11 piksel.actionFunction : Fungsi yang tidak mengambil argumen, dan memodifikasi kanvas. show_error_message(message, [error])Gunakan ini untuk menampilkan kotak dialog pesan kesalahan, secara opsional dengan detail kesalahan yang dapat diperluas.
Argumen:
message : Teks biasa untuk ditampilkan di kotak dialog.error (Opsional): Objek Error untuk ditampilkan di kotak dialog, dikelompokkan secara default di bagian "Detail" yang dapat diperluas. open_from_file(blob, source_file_handle)Gunakan ini untuk memuat file ke dalam aplikasi.
Argumen:
blob : Objek Blob yang mewakili file yang akan dimuat.source_file_handle : Pegangan file yang sesuai untuk file, sebagaimana didefinisikan oleh sistem Anda.Maaf untuk API yang unik. API baru, dan bagiannya belum dirancang sama sekali. Ini hanya peretasan yang saya andalkan, menjangkau ke dalam internal cat JS untuk memuat file. Saya memutuskan untuk mendokumentasikannya sebagai versi pertama dari API, karena saya akan menginginkan changelog saat meningkatkan penggunaannya.
set_theme(theme_file_name)Gunakan ini untuk mengubah tampilan aplikasi.
Argumen:
theme_file_name : Nama file tema yang akan dimuat, salah satu dari:"classic.css" : Tema Windows98."dark.css" : The Dark Theme."modern.css" : Tema Modern."winter.css" : Tema musim dingin yang meriah."occult.css" : tema setan. set_language(language_code)Anda dapat menggunakan ini untuk mengubah bahasa aplikasi. Tetapi sebenarnya itu akan menunjukkan prompt kepada pengguna untuk mengubah bahasa, karena aplikasi perlu dimuat ulang untuk menerapkan perubahan. Dan jika dialog itu tidak dalam bahasa yang tepat, well, mereka mungkin akan bingung.
Argumen:
language_code : Kode bahasa yang akan digunakan, misalnya "en" untuk bahasa Inggris, "zh" untuk bahasa Cina tradisional, "zh-simplified" untuk orang Cina yang disederhanakan, dll. API akan banyak berubah, tetapi perubahan akan didokumentasikan dalam changelog.
Bukan hanya riwayat perubahan, tetapi panduan migrasi/peningkatan.
Untuk Berita Proyek Umum, klik Extra> Project News di aplikasi.
JS Paint adalah perangkat lunak gratis dan open source, dilisensikan di bawah lisensi MIT permisif.
