නොමිලේ රූප ප්‍රතිප්‍රමාණකය

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

Resizing Canvas API — Chrome, Firefox, සහ Safari වලට ගොඩනගා ඇති එකම rendering එන්ජිම — භාවිතයෙන් සම්පූර්ණයෙන්ම ඔබේ බ්‍රවුසරයේ සිදු වේ. ඔබේ රූපය නව මානයන්හි offscreen canvas එකකට අඳින අතර දේශීයව නැවත encode කෙරේ; කිසිවක් ඔබේ උපාංගයෙන් පිටතට නොයයි.

1. 1
   රූපය බ්‍රවුසරය විසින් decode කෙරේ

   ඔබ ගොනුවක් drop කරන හෝ තෝරන විට, බ්‍රවුසරය රූපය (JPEG, PNG, WebP, AVIF, හෝ GIF) HTMLImageElement එකක් හරහා raw pixel දත්තවලට decode කරයි. මුල් pixel මානයන් කියවා width සහ height fields pre-populate කරයි.
2. 2
   Canvas නව ප්‍රමාණයට නැවත අඳියි

   Resize ක්ලික් කිරීම offscreen HTMLCanvasElement එකක් ඔබ තෝරාගත් width සහ height එකට සකසා, පසුව සෑම pixel එකක්ම නව මානයන්ට scale කර paint කිරීමට ctx.drawImage() ඇමතුම් කරයි. JPEG ප්‍රතිදානය සඳහා, විනිවිද පෙනෙන ප්‍රදේශ කළු නොවීමට සුදු පසුබිම් fill එකක් ප්‍රථමයෙන් යොදනු ලැබේ.
3. 3
   canvas.toBlob() ප්‍රතිදානය encode කරයි

   බ්‍රවුසරයේ අභ්‍යන්තර canvas.toBlob() ක්‍රමය ඔබ සකසන quality මට්ටමින් pixel දත්ත JPEG, PNG, හෝ WebP වෙත encode කරයි. ඔබ ඉලක්ක ගොනු ප්‍රමාණයක් නිශ්චිත කර ඇත්නම්, 7-iteration binary search එකක් ප්‍රතිදානය එම ප්‍රමාණයට හෝ ඊට අඩුවෙන් ගැලපෙන තෙක් quality parameter එක ස්වයංක්‍රීයව සකසයි.
4. 4
   ප්‍රතිඵලය දේශීයව පෙරදසුන් කර බාගත කෙරේ

   encode කළ Blob එක preview panel එක සඳහා object URL එකක් බවට හැරෙයි — සර්වර round-trip එකක් නැත. බාගැනීම ක්ලික් කිරීම අවසාන pixel මානයන් ඇතුළත් file name එකක් සමඟ දේශීය save එකක් trigger කරයි.

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