නොමිලේ රූප කපන්නා

එය ක්‍රියා කරන්නේ කෙසේද

Cropping HTML5 Canvas API එකෙන් සම්පූර්ණයෙන්ම ඔබේ බ්‍රවුසරයේ සිදු වේ — උඩුගත කිරීමක්, සර්වරයක් නැත. ඔබ canvas element එකක් මතම කෙලින්ම selection ප්‍රදේශයක් drag කරයි, ඔබ crop එක යොදන විට, බ්‍රවුසරයේ අභ්‍යන්තර 2D rendering එන්ජිම තෝරාගත් pixels පමණක් කියවා JPEG, PNG, හෝ WebP වෙත නැවත encode කරයි.

1. 1
   රූපය මතකයට පූරණය කෙරේ

   URL.createObjectURL() මගින් ඔබේ ගොනුව කියවනු ලබන අතර, එය බ්‍රවුසරයට දේශීය blob URL එකක් ලබා දෙයි. HTMLImageElement එකක් ගොනුව සම්පූර්ණයෙන්ම බ්‍රවුසර ටැබයේම decode කරයි — image bytes කිසි විටෙක ඔබේ උපාංගයෙන් පිටතට නොයයි.
2. 2
   Pointer Events crop selection එක ධාවනය කරයි

   බ්‍රවුසරයේ Pointer Events API එක (mouse, touch, සහ pen ආදානය එකට ගෙන එන) canvas overlay එකක drags track කරයි. selection එකෙන් පිටත press කිරීම නව rectangle එකක් ආරම්භ කරයි; ඇතුළත press කිරීම එය move කරයි; bottom-right ලේබලය අසල press කිරීම එය resize කරයි. විකල්ප aspect-ratio presets (1:1, 16:9, 4:3, ආදිය) dragging අතරතුර geometry එක සීමා කරයි.
3. 3
   Canvas සජීවී පෙරදසුන අඳියි

   සෑම crop වෙනසකදීම, Canvas 2D context එක රූපය නැවත අඳින අතර, selection එකෙන් පිටත dark overlay එකක් යොදා, crop ප්‍රදේශය full fidelity සමඟ මුල් රූපය පෙන්වීමට clear කර, rule-of-thirds grid එකක් සහ ටීල් resize handle එකක් overlay කරයි.
4. 4
   toBlob() ප්‍රතිඵලය encode කර ලබා දෙයි

   ඔබ Crop ක්ලික් කරන විට, නිශ්චිත crop මානයන්හි නව off-screen canvas එකක් නිර්මාණය කෙරේ. ctx.drawImage() තෝරාගත් rectangle එක පමණක් copy කරන අතර, canvas.toBlob() ඔබ තෝරාගත් quality සැකසුමේදී බ්‍රවුසරයේ native JPEG, PNG, හෝ WebP encoder එක භාවිතයෙන් ප්‍රතිඵලය encode කරයි. ප්‍රතිදානය බාගැනීම සඳහා දේශීය blob URL එකක් ලෙස ආපසු ලබා දෙනු ලැබේ.

සම්බන්ධ මෙවලම්