ඩිවෙලොපර්ලාට වාර්තා, KPI පැනලයන් හෝ චාට් එකක් සලකුණු කර සලකුණු කර සලකුණු කර පවත්වන්න අවශ්යතාවය නිතරම එනවා. ඒ සඳහා බොහොමයක් වෙලාවට පරිශීලකයා ස්ක්රීන්ශොට් එකක් ගන්නා අතර, එය කට්ටලයෙන් ඉවත් කර ගන්නා ගැටළුවක් වේ. මේ ලිපියෙන් ඩැෂ්බෝඩ් එකකට “Export as Image” බොත්තමක් එක් කර, එය සර්වර්‑පාර්ශ්වයෙන් PNG රූපයක් ලෙස ලබා දෙන ක්රමය පැහැදිලි කරයි.
මෙම විශේෂාංගය එක් කිරීමේදී බ්රවුසරයේ DOM එක රේස්ටරයිස් කරන client‑side ක්රමය (html2canvas වැනි) භාවිතා නොකරන බව ලේඛකයා අවධාරණය කරයි. වෙබ් ෆොන්ට්, cross‑origin රූප, SVG චාට්, තනි CSS වැනි අංගයන් අඩංගු ඩැෂ්බෝඩ් වලදී එම ක්රමය අඩු ගුණාත්මක ප්රතිඵල ලබා දේ.
එහි පරිහරණය සර්වර්‑පාර්ශ්වයේ සැබෑ Chromium එන්ජින් එක භාවිතා කර HTML → PNG පරිවර්තනය කිරීමයි. අපි Node.js පසුබිමක්, HTML to Image API (app.html2img.com) එකක් භාවිතා කර, පැනලය සඳහා ස්වයංක්රීය HTML ලේඛනයක් සාදලා එය PNG ලෙස ලබා ගන්නෙමු.
කේත උදාහරණය අනුව, front‑end එකේ export බොත්තමක් ක්ලික් කළ විට API එකට POST ඉල්ලීමක් යවා PNG බ්ලොබ් එක ලබා ගනී. පසුපස Express සේවාදායකය panelId අනුව දත්ත පූරණය කර, panelHtml() ෆංක්ෂන් එකෙන් ස්වයංක්රීය HTML සකස් කර, එය HTML2IMG API එකට යවා PNG URL එක ලබා ගනී. අවසානයේ PNG බෆර් එක response ලෙස පාරිභෝගිකයාට යවයි.
මෙම සර්වර්‑පාර්ශ්ව ක්රමය නිශ්චිත ප්රතිඵල ලබා දෙයි. පරිශීලකයා ඕනෑම උපාංගයක් (මොබයිල්, 4K මොනටරය) භාවිතා කළත් එකම රූපය ලැබෙන බැවින්, සලකුණු කිරීමේ ගැටළුවක් නැත.
ශ්රී ලංකාවට ඇති වැදගත්කම
- සිසුන් – තාක්ෂණ පාඨමාලා හෝ ව්යාපෘති තුළ රූප නිර්යාත කිරීමේ ක්රමය අධ්යයනය කර, real‑world API එකක් භාවිතා කිරීමේ පළපුරුද්ද ගන්න පුළුවන්.
- ඩිවෙලොපර්ලා – තමන්ගේ web application වලට පළපුරුදු export feature එකක් එක් කිරීමේදී client‑side ගැටළුවක් නොමැතිව, සරල Node.js කේතයක් මගින් සාර්ථකව ඉදිරියට ගෙන යා හැක.
- ව්යාපාර – KPI පැනල, sales chart වැනි දත්ත රූපවලට නිශ්චිත PNG ලබා ගැනීමෙන්, presentations, reports, Slack messages ආදී වලට උසස් ගුණාත්මක රූප භාවිතා කළ හැකිය.
සාරාංශයෙන්, “Export as Image” බොත්තමක් එක් කිරීමේ ක්රියාවලිය බ්රවුසරයේ අඩුකමක් නැතිව, සර්වර්‑පාර්ශ්වයෙන් නිරවද්ය PNG ලබා දීමේ විධිමත් පියවරක් වේ. ඔබේ ඩැෂ්බෝඩ් එකට මේ විශේෂාංගය එක් කර, වැඩි ඵලදායීතාවක් අත්විඳින්න.
