jspaint
1.0.0
JS 페인트픽셀-완벽한 웹 기반 MS 페인트 리메이크 등 ... 시도해보십시오! 그런 다음 Discord Server에 가입하여 예술을 공유하십시오!
JS 페인트는 MS 페인트의 모든 도구와 메뉴와 거의 알려지지 않은 기능을 높은 수준의 충실도로 재현합니다.
주제, 추가 파일 유형 및 눈 시선 모드 및 음성 인식과 같은 접근성 기능을 지원합니다.
아 예, 좋은 오래된 페인트. 리본이나 새로운 Skeuomorphic이있는 사람은 화면의 거의 절반을 차지할 수있는 인터페이스가 없습니다. (그리고 새로운 페인트 3d가 아닙니다.)
Windows 95, 98 및 XP는 황금 시대의 페인트였습니다. 도구 상자와 컬러 박스, 전경 색상 및 배경색이 있었으며 그게 필요한 전부였습니다.
상황은 간단했습니다.
그러나 우리는 세 가지 이상의 행동을 취소하고 싶습니다. 투명한 이미지를 편집하고 싶습니다. 우리는 오래된 페인트를 계속 사용할 수 없습니다.
그래서 제가 JS 페인트를 만드는 이유입니다. 현대 시대에 좋은 오래된 페인트를 가져오고 싶습니다.
anypalette.js.)편집 기능 :
기타 개선 :
도구가 포함 된 몇 가지 작업은 아직 완료되지 않았습니다. todo.md를 참조하십시오
웹 앱의 전체 클립 보드 지원에는 이미지가있는 비동기 클립 보드 API를 지원하는 브라우저, 즉 작성시 Chrome 76+가 필요합니다.
다른 브라우저에서는 Ctrl+C 로 복사하고 Ctrl+X 로 자르고 Ctrl+V 로 붙여 넣을 수 있지만 JS 페인트에서 복사 한 데이터는 JS 페인트의 다른 인스턴스에만 붙여 넣을 수 있습니다. 외부 이미지를 붙여 넣을 수 있습니다.
MS Paint와 달리 편집> 실행 취소를 사용하여 색상 또는 품질 감소를 저장할 수 있습니다. 파일 저장을 취소하지는 않지만 파일> 저장으로 AS를 사용하여 더 높은 품질로 다른 형식으로 저장할 수 있습니다.
PNG로 저장하는 것은 전체 품질을 유지하면서 작은 파일 크기를 제공하므로 권장됩니다.
| 파일 확장 | 이름 | 읽다 | 쓰다 | 팔레트를 읽으십시오 | 팔레트를 작성하십시오 |
|---|---|---|---|---|---|
| .png | PNG | ✅ | ✅ | ||
| .BMP, .dib | 단색 비트 맵 | ✅ | ✅ | ✅ | |
| .BMP, .dib | 16 컬러 비트 맵 | ✅ | ✅ | ✅ | |
| .BMP, .dib | 256 컬러 비트 맵 | ✅ | ✅ | ✅ | |
| .BMP, .dib | 24 비트 비트 맵 | ✅ | ✅ | N/A | N/A |
| .tif, .tiff, .dng, .cr2, .nef | tiff (첫 페이지로드) | ✅ | ✅ | ||
| PDF (Loads First Page) | ✅ | ||||
| .webp | 웹 | ||||
| .gif | gif | ||||
| .jpeg, .jpg | JPEG | N/A | N/A | ||
| .SVG | SVG (기본 크기 만) | ||||
| .ICO | ICO (기본 크기 만) |
포함 된 기능은 현재 브라우저에 맡겨져 있습니다. "쓰기"가 표시되면 형식은 파일 유형 드롭 다운에 표시되지만 저장하려고 할 때는 작동하지 않을 수 있습니다. 파일을 여는 것은 Wikipedia의 브라우저 이미지 형식 지원 테이블을 참조하십시오.
표시된 기능은 곧 출시 될 수 있으며 N/A는 적용 할 수 없습니다.
"판독 팔레트"는 색상을 색상 상자에 자동으로로드하는 것을 나타냅니다 (색인화 된 색상 이미지에서). "쓰기 팔레트"는 색인화 된 색상 이미지를 쓰는 것을 나타냅니다.
색상> 색상 및 색상 저장 > 색상을 얻으십시오. 색상을 얻을 수 있습니다. 다양한 형식으로 색상을 저장하고로드 할 수 있습니다.
다른 응용 프로그램에 광범위한 팔레트 지원을 추가하려면이 기능을 라이브러리로 사용할 수있게했습니다. anypalette.js
| 파일 확장 | 이름 | 프로그램 | 읽다 | 쓰다 |
|---|---|---|---|---|
| .단짝 | 리프 팔레트 | Windows 95 및 Windows NT 4.0 용 MS 페인트 | ✅ | ✅ |
| .gpl | 김프 팔레트 | Gimp, Inkscape, Krita, Kolourpaint, Scribus, Cinepaint, Mypaint | ✅ | ✅ |
| .Aco | Adobe Color Swatch | Adobe Photoshop | ✅ | ✅ |
| .ase | Adobe Swatch 교환 | Adobe Photoshop, Indesign 및 Illustrator | ✅ | ✅ |
| .txt | Paint.net 팔레트 | Paint.net | ✅ | ✅ |
| .행동 | 어도비 컬러 테이블 | Adobe Photoshop 및 Illustrator | ✅ | ✅ |
| .pal, .psppalette | 페인트 샵 프로 팔레트 | Paint Shop Pro (JASC 소프트웨어 / Corel) | ✅ | ✅ |
| .hpl | 홈 사이트 팔레트 | Allaire Homesite / Macromedia Coldfusion | ✅ | ✅ |
| .CS | Colorschemer | Colorschemer Studio | ✅ | |
| .단짝 | 스타 크래프트 팔레트 | 스타 크래프트 | ✅ | ✅ |
| .wpe | 스타 크래프트 지형 팔레트 | 스타 크래프트 | ✅ | ✅ |
| .SketchPalette | 스케치 팔레트 | 스케치 | ✅ | ✅ |
| .SPL | 스키 실 팔레트 | Skencil (이전 스케치라고 불림) | ✅ | ✅ |
| .soc | StarOffice 색상 | StarOffice, OpenOffice, Libreoffice | ✅ | ✅ |
| .그림 물감 | Kolourpaint 컬러 컬렉션 | Kolourpaint | ✅ | ✅ |
| .그림 물감 | 플라즈마 데스크탑 색 구성표 | KDE 플라즈마 데스크탑 | ✅ | |
| .주제 | Windows 테마 | Windows 데스크탑 | ✅ | |
| .TheMepack | Windows 테마 | Windows 데스크탑 | ✅ | |
| .CSS, .Scss, .Styl | 계단식 스타일 시트 | 웹 브라우저 / 웹 페이지 | ✅ | ✅ |
| .html, .svg, .js | CSS 색상의 텍스트 파일 | 웹 브라우저 / 웹 페이지 | ✅ |
팔레트의 색상 대신 패턴이 있는 흑백 모드가있어 이미지> 속성에서 얻을 수 있습니다 ...
올바른 장소로 잡으면 색상 상자와 도구 상자를 드래그 할 수 있습니다. 당신은 그것들을 작은 창으로 끌어 낼 수도 있습니다. 제목 표시 줄을 두 번 클릭하여 Windows를 측면으로 다시 도킹 할 수 있습니다.
왼쪽 클릭 포 그라운드 색상과 마우스 오른쪽 버튼 클릭 배경 외에도 CTRL을 그릴 때 액세스 할 수있는 세 번째 색상이 있습니다. 색상없이 시작하므로 CTRL을 누르고 먼저 색상을 선택해야합니다. 이 컬러 슬롯의 멋진 점은 CTRL을 눌러 색상을 그리는 동안 색상을 눌러 릴리스 할 수 있다는 것입니다.
플립/회전, 스트레치/스 태우 또는 반전 (이미지 메뉴)과 같은 이미지 변환을 전체 이미지 또는 선택에 적용 할 수 있습니다. 자유형 선택 도구를 사용하여 Scribbling을 시도한 다음 이미지> 반전을 수행하십시오.
MS Paint 튜토리얼의 이러한 팁과 요령은 JS Paint에서도 작동합니다.
JS 페인트는 아직 오프라인으로 작동하지 않지만 PWA (Progressive Web App)로 설치할 수 있습니다. 주소 표시 줄에서 설치 프롬프트를 찾으십시오.
PWA 기능 :
누락 된 기능 :
또한 전자 및 전자 포지가있는 데스크탑 앱에 구축했습니다. 릴리스 페이지에서 다운로드 할 수 있습니다.
전자 앱 기능 :
jspaint path/to/file.png 입력하십시오editor_window.on("close") 에 따라 preventDefault 호출하고 기능 일 수 있지만 창을 보여 주거나 집중해야합니다.레포를 복제하십시오.
Node.js를 설치하지 않은 경우 Project Directory에서 명령 프롬프트 / 터미널을 엽니 다.
npm run lint 실행하여 철자 오류, 유형 오류, 코드 스타일 문제 및 기타 문제를 확인하십시오.
npm run format 실행하여 포맷 문제 또는 npx eslint --fix 자동으로 수정하여 모든 자동 고정 문제를 해결하십시오.
서식 규칙은 VS Code의 내장 Formatter와의 호환성을 위해 구성됩니다.
npm test 실행하여 Cypress로 브라우저 기반 테스트를 실행하십시오. (불행히도 시동 및 실행이 느리다.)
실행 npm run accept . 불행히도 이것은 이전 테스트의 결과를 수락하지 않고 모든 테스트를 다시 실행하므로 이전 테스트와 다른 결과를 얻을 수 있습니다. GitHub 데스크탑을 사용하는 경우 4 가지 모드로 이미지의 차이를 볼 수 있습니다.
Cypress UI를 열고 첫 번째 실행 npm run test:start-server , 동시에 npm run cy:open
Travis CI와의 지속적인 통합에서도 테스트가 실행됩니다.
npm i 에 종속성을 설치 한 후 npm run dev 사용하여 라이브로드 서버를 시작하십시오.
레이아웃 중요한 스타일이 layout.css 으로 들어가도록하십시오. layout.css 업데이트 할 때 RTLCSS를 사용하여 스타일 시트의 오른쪽 버전이 생성됩니다.
언어를 아랍어 또는 히브리어로 변경하여 RTL 레이아웃을 테스트해야합니다. extras> language> العريي러운 또는 עבר 응사 로 이동하십시오.
RTL 레이아웃을 제어하는 방법은 제어 지시문을 참조하십시오.
디버깅을 위해 Chrome에 연결하기위한 VS 코드 런칭 작업이 있습니다. 사용 지침은 .vscode/launch.json 참조하십시오.
npm inpm run electron:start 으로 전자 앱을 시작하십시오Electron-Debug가 포함되어 있으므로 F5 / Ctrl+R을 사용하여 다시로드하고 F12 / CTRL+IS+I을 사용하여 DevTools를 열 수 있습니다.
npm run electron:make 로 생산을 위해 구축 할 수 있습니다
전자 메인 프로세스를 디버깅하기위한 VS 코드 런칭 작업이 있습니다. 렌더러 프로세스의 경우 내장 된 Chrome Devtools를 사용할 수 있습니다.
JS 페인트는 일반 웹 서버를 사용하여 배포 할 수 있습니다.
편집 할 필요가 없습니다.
선택적으로, 웹에서 이미지를로드하거나 JS 페인트에 URL을 붙여 넣거나 동일한 도메인에 있지 않은 이미지가있는 #load:<URL> 기능을 사용하는 경우 CORS NEADERE SERVER를 설정할 수 있습니다.
기본적으로 Jspaint.app와 함께 작동하도록 설정된 CORS Whenows 인스턴스를 사용합니다.
Heroku에서 무료로 호스팅되며 자신의 인스턴스를 설정하여 자신의 도메인과 함께 작동하도록 구성 할 수 있습니다.
https://jspaint-cors-proxy.herokuapp.com 자신의 인스턴스 URL로 찾아 교체해야합니다.
멀티 플레이어 지원은 현재 오픈 소스 소프트웨어가 아닌 Firebase에 의존합니다.
Firebase Realtime 데이터베이스 인스턴스를 생성하고 JS Paint sessions.js 를 편집하여 웹 앱을 설정할 때 Firebase 콘솔의 구성으로 initializeApp 구성으로 전달 된 config 대체 할 수 있습니다.
그러나 멀티 플레이어 모드는 지금까지 매우 칙칙합니다. 오픈 소스,보다 안전하고 효율적이며 강력한 것으로 대체되어야합니다.
html에 이것을 추가하십시오.
< iframe src =" https://jspaint.app " width =" 100% " height =" 100% " > </ iframe > #load:<URL> URL에 추가하여 URL에서 이미지를로드 할 수 있습니다.
< iframe src =" https://jspaint.app#load:https://jspaint.app/favicon.ico " width =" 100% " height =" 100% " > </ iframe >JS 페인트를 제어하려면 파일을 저장/로드하거나 캔버스에 직접 액세스하는 방법에 대해 불안정한 API가 있습니다.
먼저 Repo를 복제해야하므로 iframe 로컬 사본에 가리킬 수 있습니다.
JS Paint의 로컬 사본은 포함 된 페이지와 동일한 웹 서버에서 호스팅되어야합니다. 또는 더 구체적으로는 동일한 원점을 공유해야합니다.
로컬 사본을 가지고 있으면 API가 변경 될 때마다 상황이 파손되지 않습니다.
JS Paint가 jspaint 라는 폴더로 복제되는 경우, 포함하려는 페이지와 동일한 폴더에 남아 있으면 다음을 사용할 수 있습니다.
< iframe src =" jspaint/index.html " id =" jspaint-iframe " width =" 100% " height =" 100% " > </ iframe > 다른 곳에 살면, 당신은 경로의 시작 부분에, 레벨을 올리려면 ../ 해야 할 수도 있습니다. 예를 들어, src="../../apps/jspaint/index.html" . src="https://example.com/cool-apps/jspaint/index.html" 과 같은 절대 URL을 사용할 수도 있습니다.
JS Paint의 systemHooks API를 사용하여 파일 저장 및 열기 대화를 무시할 수 있습니다.
< 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 >블로브는 메모리에서 파일의 내용을 나타냅니다.
파일 핸들은 파일을 식별 할 수있는 것입니다. 이 개념을 소유하고 파일을 식별하는 방법을 정의합니다. 인덱스에서 배열, Dropbox 파일 ID, IPFS URL, 파일 경로, 파일 경로로의 모든 것일 수 있습니다. 그것은 어떤 유형이든, 아마도 문자열이어야 할 수도 있습니다.
파일 핸들 개념이 있으면 시스템 후크를 사용하여 파일 선택기를 구현할 수 있으며 파일을 읽고 쓰는 기능을 수행 할 수 있습니다.
| 명령 | 사용 된 후크 |
|---|---|
| 파일> 저장 | systemHooks.showSaveFileDialog , 파일을 선택하면 systemHooks.writeBlobToHandle |
| 파일> 열기 | systemHooks.showOpenFileDialog , 파일을 선택하면 systemHooks.readBlobFromHandle |
| 파일> 저장 | systemHooks.writeBlobToHandle (또는 파일과 동일> 아직 파일이 열리지 않은 것처럼 저장 ) |
| 편집> 복사 | systemHooks.showSaveFileDialog , 파일을 선택하면 systemHooks.writeBlobToHandle |
| 편집> 붙여 넣기 | systemHooks.showOpenFileDialog , 파일을 선택하면 systemHooks.readBlobFromHandle |
| 파일> 벽지로 설정 (타일) | systemHooks.setWallpaperTiled 정의 된 경우 systemHooks.setWallpaperCentered 정의 된 경우 파일과 동일합니다> 저장 |
| 파일> 벽지로 설정 (중앙) | systemHooks.setWallpaperCentered 정의 된 경우 파일과 동일합니다> 저장 |
| extras> render history를 GIF로 렌더링하십시오 | 파일 과 동일합니다 |
| 색상> 색상 저장 | 파일 과 동일합니다 |
| 색상> 색상을 얻습니다 | 파일> 열기 와 동일합니다 |
편집을 위해로드 된 파일로 앱을 시작하려면 앱이로드 될 때까지 기다린 다음 systemHooks.readBlobFromHandle 파일 핸들로 호출 한 다음 해당 파일 블로브를로드하도록 앱에 알리십시오.
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 ) ;
} ) ;이것은 서투른 일이며, 앞으로는 핸들로 초기 파일을로드하기위한 쿼리 문자열 매개 변수가있을 수 있습니다. (자기 주석 : 시스템 후크가 등록 될 때까지 기다려야합니다.)
URL에서로드 할 쿼리 문자열 매개 변수가 이미 있습니다.
< iframe src =" https://jspaint.app?load:SOME_URL_HERE " > </ iframe >그러나 이것은 저장을위한 파일 핸들을 설정하지 않습니다.
파일> 세트로 벽지 (TILED) 및 파일> 세트로 세트하여 벽지 (중앙)로 사용하는 배경 화면을 설정하기 위해 두 가지 함수를 정의 할 수 있습니다.
systemHooks.setWallpaperTiled = (canvas) => { ... };systemHooks.setWallpaperCentered = (canvas) => { ... }; systemHooks.setWallpaperCentered 만 정의하면 JS Paint는 화면의 크기를 추측하고 이미지를 타일로, systemHooks.setWallpaperCentered 함수를 호출하여 적용합니다.
systemHooks.setWallpaperCentered 지정하지 않으면 JS Paint는 systemHooks.showSaveFileDialog 및 systemHooks.writeBlobToHandle 사용하여 파일 ( <original file name> wallpaper.png )을 저장하는 데 기본값을받습니다.
다음은 포함 된 페이지의 배경으로 지속적인 사용자 정의 벽지를 지원하는 전체 예입니다.
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 ) ;
}약간 재귀 적입니다. 죄송합니다. 아마도 더 간단 할 수 있습니다. 데이터 URL을 사용하는 것과 같습니다. (실제로, 나는 Blob URL을 사용하고 싶다고 생각하여 DOM Inspector에 슈퍼 긴 URL이 부풀어 오르지 않도록합니다. 실제로 DevTools UX 버그입니다. 아마도 그들은 이것을 개선했을 것입니까?)
원하는 치수가있는 파일을로드 할 수 있습니다. 현재이 문제에 대한 특별한 API는 없습니다.
처음에는 파일로드를 참조하십시오.
프로그래밍 방식으로 테마를 변경할 수 있습니다.
var iframe = document . getElementById ( "jspaint-iframe" ) ;
var jspaint = iframe . contentWindow ;
jspaint . set_theme ( "modern.css" ) ;그러나 이것은 사용자 선호도를 깨뜨릴 것입니다.
Extras> 테마 메뉴는 여전히 작동하지만 페이지를 다시로드 할 때 선호도는 지속되지 않습니다.
앞으로 기본 테마를 지정하기위한 쿼리 문자열 매개 변수가있을 수 있습니다. 기본 테마를 변경하기 위해 jspaint를 포크 할 수도 있습니다.
테마와 마찬가지로 프로그래밍 방식으로 언어를 변경하려고 시도 할 수 있습니다.
var iframe = document . getElementById ( "jspaint-iframe" ) ;
var jspaint = iframe . contentWindow ;
jspaint . set_language ( "ar" ) ;그러나 이것은 실제로 사용자에게 응용 프로그램을 다시로드하여 언어를 변경하도록 요청할 것입니다.
엑스트라> 언어 메뉴는 여전히 작동하지만 사용자는 페이지를 다시로드 할 때마다 언어를 변경하는 것이 좋습니다.
앞으로 기본 언어를 지정하기위한 쿼리 문자열 매개 변수가있을 수 있습니다. 기본 언어를 변경하기 위해 jspaint를 포크 할 수도 있습니다.
아직 지원되지 않습니다. Jspaint를 포크하고 자신의 메뉴를 추가 할 수 있습니다.
캔버스에 액세스하면 드로잉의 실시간 미리보기 (예 : 게임 엔진의 텍스처 업데이트)를 실시간으로 구현할 수 있습니다.
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" ) ; 문서 제목을 변경하지 않거나 홀로 된 히스토리를 재설정하지 않으므로 문서를로드하는 데 사용 하지 않는 것이 좋습니다. 대신 open_from_file 사용하십시오.
문서에 대한 작업을 수행하기 위해 버튼이나 다른 UI를 만들려면 (아마도) 정보를 취소 할 수 없도록해야합니다. 매우 쉬운 일입니다. 행동을 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 })기본 저장 대화 상자를 무시하려면이 기능을 정의하십시오. 이것은 이미지 저장, 팔레트 파일 및 애니메이션 저장에 사용됩니다.
논쟁 :
formats : 다음 속성이있는 파일 유형을 나타내는 객체 배열 :formatID : 형식을 고유하게 식별하는 문자열 ( mimeType 과 동일 할 수 있음).mimeType (선택 사항) : 파일 형식의 지정된 미디어 유형 (예 : "image/png" (팔레트 형식은이 속성이 없습니다)name : 파일 형식의 이름, 예를 들어 "WebP"nameWithExtensions : 파일 형식의 이름과 확장 목록 (예 "TIFF (*.tif;*.tiff)" 뒤 따릅니다.extensions : DOT를 제외한 파일 확장 배열, 우선 확장이 우선적으로 ["bmp", "dib"]defaultFileName (선택 사항) : 제안 된 파일 이름 (예 : "Untitled.png" 또는 열린 문서 이름.defaultPath (선택 사항) : 열린 문서의 파일 핸들이므로 동일한 폴더에 쉽게 저장할 수 있습니다. MISNOMER : 이것은 경로가 아닐 수 있으며 파일 핸들을 정의하는 방법에 따라 다릅니다.defaultFileFormatID (선택 사항) : 기본적으로 선택할 파일 형식의 formatID .async function getBlob(formatID) : 지원되는 형식 중 하나로 파일을 가져 오려면 호출합니다. formatID 필요하고 저장하기 위해 파일 내용을 나타내는 Blob 해결하는 Promise 반환합니다.function savedCallbackUnreliable({ newFileName, newFileFormatID, newFileHandle, newBlob }) (선택 사항) : 사용자가 파일을 저장했을 때 호출하는 함수. newBlob 은 getBlob(newFileFormatID) 에서 나와야합니다.dialogTitle (선택 사항) : 저장 대화 상자에 대한 제목. 여기서 제어의 역전을 참고하십시오. JS Paint는 systemHooks.showSaveFileDialog 함수를 호출 한 다음 JS Paint의 getBlob 기능을 호출합니다. getBlob 해결되면 JS Paint에 의해 정의되는 savedCallbackUnreliable 기능을 호출 할 수 있습니다. (미래에 이것을 명확히 할 수 있기를 바랍니다.)
또한이 기능은 저장 위치를 선택하는 것이 아니라 파일 저장을 담당합니다. 도움이되면 systemHooks.writeBlobToHandle 기능을 재사용 할 수 있습니다.
systemHooks.showOpenFileDialog({ formats })기본 열기 대화 상자를 무시하려면이 기능을 정의하십시오. 이것은 이미지와 팔레트를 여는 데 사용됩니다.
논쟁 :
formats : systemHooks.showSaveFileDialog 와 동일합니다 이 기능은 파일을 선택하는 것이 아니라 파일의 내용을로드하는 데 도움이됩니다. 도움이되면 systemHooks.readBlobFromHandle 기능을 재사용 할 수 있습니다.
systemHooks.writeBlobToHandle(fileHandle, blob)이 기능을 정의하여 JS에게 파일을 저장하는 방법을 페인트하십시오.
논쟁 :
fileHandle : 시스템에서 정의한 파일 핸들은 쓸 파일을 나타냅니다.blob : 저장할 파일 내용을 나타내는 Blob .보고:
true 로 해결 Promise 오류 false 발생하거나 사용자가 취소되거나 파일이 성공적으로 저장되었는지 여부를 알 수없는 경우 undefined 경우 <a href="..." download="..."> . 약속은 거부해서는 안됩니다. 오류 메시지를 표시하고 false 반환하여 오류를 처리해야합니다. systemHooks.readBlobFromHandle(fileHandle)이 기능을 정의하여 JS에게 파일을로드하는 방법을 페인트하십시오.
논쟁 :
fileHandle : 시스템에서 정의한 파일 핸들은 읽을 파일을 나타냅니다. systemHooks.setWallpaperTiled(canvas)이 기능을 정의하여 JS 페인트에 벽지를 설정하는 방법을 알려줍니다. 예를 들어 벽지로 세트를 통합하십시오.
논쟁 :
canvas : 월페이퍼로 설정할 이미지가있는 HTMLCanvasElement . systemHooks.setWallpaperCentered(canvas)이 기능을 정의하여 JS 페인트에 벽지를 설정하는 방법을 알려줍니다. 예를 들어 벽지로 세트를 통합하십시오.
논쟁 :
canvas : 월페이퍼로 설정할 이미지가있는 HTMLCanvasElement . undoable({ name, icon }, actionFunction)이것을 사용하여 동작을 분리 할 수 있도록하십시오.
이 함수는 캔버스와 다른 상태의 스냅 샷을 가져온 다음 actionFunction 기능을 호출합니다. 그것은 역사에 항목을 만들어 취소 할 수 있습니다.
논쟁 :
name : 행동의 이름, 예를 들어 "Brush" 또는 "Rotate Image 270°"icon (선택 사항) : 기록 창에 표시 할 Image . 15x11 픽셀 인 것이 좋습니다.actionFunction : 인수가 취하지 않고 캔버스를 수정하는 함수. show_error_message(message, [error])이를 사용하여 오류 메시지 대화 상자를 표시하십시오. 선택적으로 확장 가능한 오류 세부 정보가 포함되어 있습니다.
논쟁 :
message : 대화 상자에 표시 할 일반 텍스트.error (선택 사항) : 대화 상자에 표시 할 Error 객체는 기본적으로 "세부 사항"확장 가능한 섹션에서 붕괴됩니다. open_from_file(blob, source_file_handle)이것을 사용하여 파일을 앱에로드하십시오.
논쟁 :
blob :로드 할 파일을 나타내는 Blob 객체.source_file_handle : 시스템에서 정의한 파일의 해당 파일 핸들.기발한 API에 대해 죄송합니다. API는 새롭고 그 일부는 전혀 설계되지 않았습니다. 이것은 내가 의존하게 된 해킹 일뿐입니다. 파일을로드하기 위해 JS 페인트 내부에 도달했습니다. 어쨌든 사용량을 업그레이드 할 때 Changelog를 원하기 때문에 API의 첫 번째 버전으로 문서화하기로 결정했습니다.
set_theme(theme_file_name)이것을 사용하여 응용 프로그램의 모양을 변경하십시오.
논쟁 :
theme_file_name :로드 할 테마 파일의 이름, 다음 중 하나입니다."classic.css" : Windows98 테마."dark.css" : 어두운 테마."modern.css" : 현대 테마."winter.css" : 축제 겨울 테마."occult.css" : 사탄 테마. set_language(language_code)응용 프로그램의 언어를 변경하기 위해 이것을 사용할 수 있습니다. 그러나 실제로 응용 프로그램이 변경 사항을 적용하기 위해 다시로드해야하므로 사용자가 언어를 변경하라는 프롬프트가 표시됩니다. 그리고 그 대화가 올바른 언어가 아니라면 아마 혼란 스러울 것입니다.
논쟁 :
language_code : 사용해야 할 언어 코드, 예를 들어 영어의 "en" "zh" , "zh-simplified" Simplified 등 API는 많이 변경되지만 변경 사항은 Changelog에 문서화됩니다.
변화의 역사뿐만 아니라 마이그레이션/업그레이드 가이드.
일반 프로젝트 뉴스를 보려면 앱에서 엑스트라> 프로젝트 뉴스를 클릭하십시오.
JS Paint는 무료 및 오픈 소스 소프트웨어이며 허용 MIT 라이센스에 따라 라이센스가 부여됩니다.
