Continuând tema citirea fișierelor locale Această secțiune vorbește despre păstrarea locală a fișierelor mici folosind un depozit web.
Notă Pentru a efectua codul de probă propus necesită utilizarea unui browser care acceptă API-ul de fișiere, și magazin web. cum ar fi Internet Explorer 10 sau mai mare.
Aplicația pentru desen pe panza
Pentru a aduce următorul cod de probă cu realitatea, în primul exemplu, o aplicație de desen luat simplu bazat pe HTML5 panza. Este clar că astfel de aplicații necesită fișiere de stocare locale. În viitor, vom extinde acest exemplu pentru a salva local imaginea creată.
Munca în această aplicație este foarte ușor - trebuie doar pentru a conduce mouse-ul pe suprafața pătrată a benzii. Pentru a șterge o trase, trebuie doar să apăsați pe butonul Erase (Ștergere).
Poate cel mai provocator aspect al acestui cod sunt cele două variabile „statice“, pânză și context. declarate ca fiind locale init. Pentru ca să le aibă acces la funcții locale (paintCanvas și eraseCanvas), variabile sunt disponibile după finalizarea init. Prin aceasta nu se aglomerează spațiul de nume la nivel mondial. Vă rugăm să rețineți că această aplicație funcționează pe dispozitive tactile, cum ar fi tablete.
Stocarea fișierelor utilizând stocarea pe web
Așa cum sa menționat mai sus, browserele moderne (inclusiv Windows Internet Explorer 9 și mai târziu) de stocare de suport web. Există două tipuri de stocare pe web. stocare locală și magazin de sesiune. După cum sugerează și numele, stochează sesiunea este valabilă numai pentru acest browser sesiune. stocare locală este valabilă pentru o perioadă nedeterminată.
Pentru a salva un utilizator pentru a desena o imagine, vom folosi de stocare locală. Acest lucru este destul de o sarcină obișnuită, după cum se poate vedea în exemplul următor.
În esență, Exemplul 2 - este un exemplu detaliat 1.
Mai întâi definim toate caracteristicile necesare, care sunt utilizate cu requiredFeaturesAvailable funcția. În orice caz, vom folosi un dublu obiecte negativ de interes pentru a „conduce“ obiect la o valoare boolean.
Apoi vom adăuga două noi de tratare a evenimentului, saveCanvas și eraseCanvas. care sunt cauzate de apăsarea Save (salvare) și încărcare (descărcare), respectiv. Funcția saveCanvas constă dintr-o singură linie:
Se convertește utilizator imagine într-o formă adecvată pentru afișarea pe o pagină Web, și apoi stocate în magazia locală pentru proprietățile nume de utilizator canvasImage (orice nume valid în funcție de preferințe).
Pentru a se asigura că imaginea este cu adevărat salvată, creați un desen, faceți clic pe Salvare. reporniți computerul, reporniți exemplul 2, și apoi (fii atent: nu vopsea accidental pe o pânză albă), faceți clic pe butonul Load - și imaginea salvată „magic“ apar în fața ta.
Este clar că, de exemplu, să ia o aplicație simplă de desen. Cel puțin o puteți îmbunătăți prin asigurarea că utilizatorul trebuie mai întâi să faceți clic pe panza pentru a începe de desen și să înlocuiască patrulatere în unghi, care sunt sensibile la viteza mouse-ului (indicatorul), în zona adiacentă liniilor de curent.
subiecte conexe
Rezultate: Moștenit protejate
A fost utilă această pagină? Da Nu
1500 caractere rămase
Vă mulțumim! Vă mulțumim pentru examinare. Opinia ta este foarte importanta pentru noi.