Պատկերի պտտիչ ու շուռ տվող անվճար

Ինչպես է այն աշխատում

Պտտումը, շրջումը և անկյան ուղղումն այստեղ ամբողջովին տեղի են ունենում ձեր դիտարկիչում՝ HTML Canvas API-ով — ֆայլը երբեք չի ուղարկվում սերվեր։ Գործիքը ձեր պատկերը գծում է էկրանից-դուրս canvas-ի վրա ընտրված անկյան և մասշտաբի ձևափոխումներով, ապա արդյունքը կոդավորում է JPEG, PNG կամ WebP՝ դիտարկիչի սեփական կոդեկով։

1. 1
   Պատկերը վերծանվում է տեղում

   Ձեր JPEG, PNG կամ WebP ֆայլը բեռնվում է HTMLImageElement-ի մեջ տեղական object URL-ով — դիտարկիչի հիշողության հղում, որը երբեք չի հեռանում ձեր սարքից։ Բնական պիքսելային չափերը ուղղակիորեն կարդացվում են վերծանված բիթմեփից։
2. 2
   Canvas ձևափոխում է կիրառված

   Էկրանից-դուրս canvas-ը չափվում է՝ տեղավորելու պտտված սահմանային տուփը (width·cos + height·sin յուրաքանչյուր առանցքի համար)։ Canvas 2D համատեքստն ապա տեղափոխվում է կենտրոն, պտտվում ընտրված անկյունով ռադիաններով, և մասշտաբավորվում -1-ով հորիզոնական կամ ուղղահայաց առանցքում՝ շրջումների համար — բոլորը ստանդարտ ctx.rotate / ctx.scale գործողություններ, առանց արտաքին գրադարանի։
3. 3
   Ինքնաշխատ-կտրումը հեռացնում է անկյունները (ընտրովի)

   Ոչ-ուղիղ-անկյան պտտումների համար ձեռագիր երկրաչափական ֆունկցիան — largestInnerRect — հաշվարկում է սկզբնական հարաբերակցության ամենամեծ առանցք-հավասարեցված ուղղանկյունը, որ տեղավորվում է պտտված սահմանային տուփի ներսում, ուստի եռանկյունաձև դատարկ անկյունները հեռացվում են՝ առանց պատկերը խեղաթյուրելու։
4. 4
   Դիտարկիչի կոդեկը կոդավորում է արդյունքը

   canvas.toBlob()-ը պիքսելային տվյալները հանձնում է դիտարկիչի ներկառուցված պատկերի կոդավորիչին, արտադրելով JPEG (ընտրովի որակով և ֆոնային լցման գույնով թափանցիկ անկյունների համար), PNG կամ WebP Blob, որը դուք ուղղակիորեն ներբեռնում եք։

Առնչվող գործիքներ