Dawwara u Flipper tal-Immaġni b'xejn

Kif Taħdem

Ir-rotazzjoni, il-qlib, u l-korrezzjoni tal-angolu hawn jaħdmu kompletament ġewwa l-browser tiegħek bl-użu tal-API HTML Canvas — l-ebda fajl qatt ma jintbagħat lil server. L-għodda tiddisinja l-istampa tiegħek fuq canvas barra l-iskrin bl-angolu magħżul u trasformazzjonijiet tal-iskala, imbagħad tikkodifika r-riżultat għal JPEG, PNG, jew WebP bl-użu tal-codec stess tal-browser.

1. 1
   L-istampa ddekodifikata lokalment

   Il-fajl JPEG, PNG, jew WebP tiegħek jiġi mgħobbi f'HTMLImageElement permezz ta' object URL lokali — referenza tal-memorja tal-browser li qatt ma toħroġ mill-apparat tiegħek. Id-dimensjonijiet naturali tal-pixel jinqraw direttament mill-bitmap iddekodifikat.
2. 2
   It-trasformazzjoni tal-canvas applikata

   Canvas barra l-iskrin jiġi ddimensjonat biex jidħol fil-kaxxa mdawra rotata (wisa'·cos + għoli·sin għal kull ass). Il-kuntest Canvas 2D imbagħad jiġi ttraslat għaċ-ċentru, rotat bl-angolu magħżul f'radjani, u skalat b'-1 fuq l-ass orizzontali jew vertikali għall-qlib — kollha operazzjonijiet standard ctx.rotate / ctx.scale mingħajr l-ebda librerija esterna.
3. 3
   L-awtoqtugħ jaqta' l-kantunieri (mhux obbligatorju)

   Għal rotazzjonijiet mhux ta' angolu dritt, funzjoni ta' ġeometrija miktuba bl-idejn — largestInnerRect — tikkalkula l-ikbar rettangolu allinjat mal-ass tal-proporzjon tal-aspett oriġinali li jidħol ġewwa l-kaxxa mdawra rotata, biex il-kantunieri trijangolari vojta jitneħħew mingħajr ma jgħawġu l-istampa.
4. 4
   Il-codec tal-browser jikkodifika r-riżultat

   canvas.toBlob() jagħti d-data tal-pixel lill-encoder tal-istampi inkorporat tal-browser, jipproduċi Blob JPEG (bil-kwalità u l-kulur tal-mili tal-isfond selettabbli għall-kantunieri trasparenti), PNG, jew WebP li tniżżel direttament.

Għodod Relatati