ነፃ ምስል ቆራጭ

እንዴት እንደሚሠራ

መከርከም ሙሉ በሙሉ በአሳሽዎ ውስጥ HTML5 Canvas APIን በመጠቀም ይከናወናል — ምንም ስቀላ፣ ምንም አገልጋይ የለም። የምርጫ ቦታን በቀጥታ በሸራ አካል ላይ ይጎትታሉ፤ መከርከሙን ሲተገብሩ የአሳሹ አብሮገነብ 2D የማሳያ ሞተር የተመረጡትን ፒክሰሎች ብቻ ያነባል እና ወደ JPEG፣ PNG ወይም WebP እንደገና ኮድ ያደርጋቸዋል።

1. 1
   ምስሉ ወደ ማህደረ ትውስታ ይጫናል

   ፋይልዎ በURL.createObjectURL() ይነበባል፤ ይህም ለአሳሹ አካባቢያዊ የblob URL ይሰጣል። HTMLImageElement ፋይሉን ሙሉ በሙሉ በአሳሹ ትር ውስጥ ይፈታል — የምስሉ ባይቶች መሣሪያዎን በጭራሽ አይለቁም።
2. 2
   Pointer Events የመከርከሚያ ምርጫውን ይቆጣጠራሉ

   የአሳሹ Pointer Events API (የመዳፊት፣ የንክኪ እና የብዕር ግቤትን የሚያዋህድ) በሸራ ሽፋን ላይ ያሉ መጎተቶችን ይከታተላል። ከምርጫው ውጭ መጫን አዲስ አራት ማዕዘን ይጀምራል፤ ከውስጥ መጫን ያንቀሳቅሰዋል፤ ከታችኛው ቀኝ ጥግ አጠገብ መጫን መጠኑን ይቀይረዋል። አማራጭ የገጽታ ጥምርታ ቅድመ-ቅንብሮች (1:1፣ 16:9፣ 4:3 ወዘተ.) በመጎተት ጊዜ ቅርጹን ይገድባሉ።
3. 3
   Canvas የቀጥታ ቅድመ-እይታውን ይስላል

   በእያንዳንዱ የመከርከሚያ ለውጥ፣ የCanvas 2D አውድ ምስሉን እንደገና ይስላል፣ ከምርጫው ውጭ ጨለማ ሽፋን ይተገብራል፣ የመጀመሪያውን ምስል በሙሉ ጥራት ለማሳየት የመከርከሚያ ቦታውን ያጸዳል፣ እና የሦስተኛ ሕግ ፍርግርግ እና አረንጓዴ-ሰማያዊ የመጠን መቀየሪያ መያዣ ይደርባል።
4. 4
   toBlob() ውጤቱን ኮድ ያደርጋል እና ያቀርባል

   ከርክምን ሲጫኑ፣ በትክክለኛዎቹ የመከርከሚያ ልኬቶች አዲስ ከማያ ገጽ ውጭ ያለ ሸራ ይፈጠራል። ctx.drawImage() የተመረጠውን አራት ማዕዘን ብቻ ይቀዳል፤ canvas.toBlob() ደግሞ ውጤቱን በመረጡት የጥራት ቅንብር የአሳሹን አብሮገነብ JPEG፣ PNG ወይም WebP ኢንኮደር በመጠቀም ኮድ ያደርጋል። ውጤቱ ለማውረድ እንደ አካባቢያዊ የblob URL ይመለሳል።

ተዛማጅ መሳሪያዎች