Construiți un editor de canvas cu panza

Apoi vom inițializa încă două variabile, dar le vom stabili valorile nul pentru moment. Acestea vor fi folosite pentru a stoca lățimea și înălțimea pe care se poate schimba redimensionabil la redimensionare. Aceste variabile vor fi populate și utilizate mai târziu în funcție. xpos și ypos variabilele sunt folosite pentru a poziționa un sfat util pe care îl vom crea într-un moment. Ele poziționează vârful instrumentului la 5 pixeli de la marginea din stânga și de la marginea superioară a pânzei.

Apoi inițializăm resizable folosind jQuery UI resizable () metodă. Configurați dimensiunea redimensionabilă pentru a avea raportul de aspect blocat; imaginea noastră este pătrată, așa că dorim ca ea să rămână pătată, indiferent de mărimea acesteia. De asemenea, asigurăm că imaginea nu poate fi mărită în așa fel încât să se păstreze calitatea imaginii. Dacă imaginea ar fi fost mărită în loc să fie mărită, ar deveni blocată. lățimea maximă și maxHeight opțiunile de configurare asigură faptul că imaginea poate fi micșorată. Ambele sunt setate la lățimea și înălțimea curentă a panzei, respectiv.

Componenta redimensionabilă are unele handlers de evenimente personalizate pe care le putem atribui funcții care vor fi executate atunci când aceste evenimente personalizate sunt declanșate. Utilizăm două dintre acești agenți de procesare a evenimentelor pentru acest exemplu; redimensiona, care va fi concediat de fiecare dată când dimensiunea redimensionabilă este redimensionată și Stop care este declanșată odată ce dimensiunea redimensionabilă a fost redimensionată.

Funcția de redimensionare poate primi două argumente; primul este un obiect de eveniment, pe care nu trebuie să îl folosim în acest exemplu, dar care trebuie declarat pentru a putea folosi al doilea argument, de care avem nevoie. Al doilea argument este un obiect care conține informații utile despre dimensiunea redusă, inclusiv mărimea la care a fost modificată. Primul lucru pe care îl facem în această funcție este să alocăm noua dimensiune a dimensiunilor reduse resizeWidth și resizeHeight variabilele care utilizează proprietățile ui obiecte pe care le primește funcția.

Ultimul lucru pe care această funcție îl face este să creeze sfatul de instrucțiuni care îi spune utilizatorului cât de mare este în prezent redimensionabil. Dacă există deja această indicație, nu este nevoie să o recreăm și să putem seta textul interior într-un șir care să indice mărimea curentă a dimensiunilor reduse. Dacă simbolul degetului nu există deja, cum ar fi prima dată când dimensiunea redimensionabilă este redimensionată, o creăm de la zero. Bara de instrumente este poziționată utilizând xpos și ypos pe care am creat-o mai devreme. Șirul este construit de la zero la fiecare schimbare a dimensiunilor redimensionabile. Bara de instrumente va apărea astfel:

Funcția stop, care se execută o dată când se termină interacțiunea de redimensionare, creează mai întâi un nou element de dialog care verifică dacă vizitatorul dorește să aplice noua dimensiune panzei. Din nou, dialogul este configurat astfel încât să nu poată fi redus în sine și astfel încât să fie modal. De asemenea, adăugăm câteva butoane în acest dialog. Primul este a Anulare care permite vizitatorului să renunțe la operația de redimensionare fără a aplica noua dimensiune. Tot ce facem aici este o menajare, eliminând dialogul, dimensiunea redusă și bara de instrumente.

De asemenea, creăm un da butonul care aplică noua dimensiune. De asemenea, facem aceleași sarcini de întreținere aici, dar apoi, pentru a aplica noua dimensiune, creăm o nouă imagine încă o dată, în același mod pe care l-am făcut deja de mai multe ori. Stabilirea unei noi dimensiuni a pânzei este extrem de ușoară; noi furnizam doar valorile la care a fost schimbat capacul la lățimea și înălțimea elementului de panza. Aici este dialogul, care apare la fel ca dialogul de salvare de mai devreme, cu conținut diferit:

Schimbarea valorilor rgb ale pixelilor individuali

Am spus mai devreme că avem un control complet la nivelul pixelilor asupra conținutului elementului de panza, astfel încât ultimele două funcții ale butonului din bara de instrumente vor face exact acest lucru. Prima funcție este utilizată pentru a converti imaginea în tonuri de gri, cea de-a doua schimbă imaginea în ton de sepia. Ne vom uita mai întâi la funcția de tonuri de gri:

tonuri de gri: functie () // obtine date de imagine var imgData = context.getImageData (0, 0, editor.width, editor.height), pxData = imgData.data, lungime = pxData.length; pentru (var x = 0; x < length; x+=4)  //convert to grayscale var r = pxData[x], g = pxData[x + 1], b = pxData[x + 2], grey = r * .3 + g * .59 + b * .11; pxData[x] = grey; pxData[x + 1] = grey; pxData[x + 2] = grey;  //paint grayscale image back context.putImageData(imgData, 0, 0); ,

Primul lucru pe care trebuie să-l facă această funcție este să obțină datele pixelului actual al pânzei. Noi folosim getImageData () metodă de a face acest lucru. Această metodă acceptă patru argumente, care sunt aceleași ca și clearRect () metoda pe care am privit mai devreme - primele două argumente sunt X și y pozițiile pentru a începe colectarea de date de la și a treia și a patra sunt lățimea și înălțimea zonei pentru a obține. Vrem întreaga pânză, astfel încât să începem la 0,0 (sus-stânga) și să continuăm pentru lățimea și înălțimea pânzei. Obiectul rezultat returnat prin metoda este stocat în imgData variabil.

Obiectul stocat în această variabilă are o proprietate numită date; în această proprietate este o matrice care conține r g b și valorile alfa pentru fiecare pixel din panza, astfel încât primul element din matrice să conțină r valoarea primului pixel, al doilea element conține g valoarea primului pixel, al treilea conține b valoarea primului pixel și cel de-al patrulea element conține valoarea alfa a primului pixel. Această matrice este incredibil de mare; o imagine de 480 × 480 pixeli conține 230400 pixeli și avem patru elemente pentru fiecare pixel. Aceasta face ca matricea să aibă un total de 921600 de elemente în lungime! Această lungime este, de asemenea, stocată pentru utilizarea în pentru buclă pe care o definim în continuare.

Ciclul pentru este puțin diferit de obicei pentru bucle. Amintiți-vă că matricea poate fi organizată în blocuri discrete de 4 elemente, în care fiecare element dintr-un singur bloc se referă la componentele individuale rgba, astfel încât să conectăm patru elemente simultan prin matrice. La fiecare iterație obținem fiecare componentă pixel și apoi folosim formula r * .3 + g * .59 + b * .11 pentru a converti fiecare în gri. Apoi salvăm componenta pixel convertită înapoi la elementul original al matricei.

Odată ce am făcut buclă peste întreaga matrice, putem scrie conținutul matricei înapoi la panza, înlocuind fiecare pixel original cu noua sa corespondență în nuanțe de gri folosind putImageData () metoda, care pur și simplu face opusul getImageData ().

Funcția ton sepia este identică cu funcția de tonuri de gri, cu excepția faptului că folosim o formulă diferită pentru a converti fiecare r g b componenta la ton sepia:

sepia: funcția () // obține datele de imagine var imgData = context.getImageData (0, 0, editor.width, editor.height), pxData = imgData.data, length = pxData.length; pentru (var x = 0; x < length; x+=4)  //convert to grayscale var r = pxData[x], g = pxData[x + 1], b = pxData[x + 2], sepiaR = r * .393 + g * .769 + b * .189, sepiaG = r * .349 + g * .686 + b * .168, sepiaB = r * .272 + g * .534 + b * .131; pxData[x] = sepiaR; pxData[x + 1] = sepiaG; pxData[x + 2] = sepiaB;  //paint sepia image back context.putImageData(imgData, 0, 0); 

Iată o fotografie a imaginii odată ce a fost transformată în ton sepia:

Concluzie

În acest tutorial am văzut cum poate fi transformată panza într-un editor de imagini puternic care ne oferă o parte din funcționalitatea editorilor de imagine de bază, bazați pe aplicații, cu care suntem familiarizați. Acest exemplu ar putea fi extins cu ușurință pentru a adăuga alte caracteristici, precum trunchierea și desenarea cu un instrument creion, deși voi lăsa adăugarea acestei funcționalități pentru dvs. Vă mulțumim pentru lectură.