بڕینەوەی وێنەی بەخۆڕایی

چۆن کار دەکات

بڕین تەواو لە وێبگەڕەکەتدا ڕوودەدات بە بەکارهێنانی APIی Canvasی HTML5 — بەبێ بارکردن، سێرڤەر. ناوچەیەکی هەڵبژاردن ڕاستەوخۆ لەسەر توخمێکی canvas ڕادەکێشیت، و کاتێک بڕینەکە جێبەجێ دەکەیت، ئەنجینی نیگاردانی 2Dی سەرەکی وێبگەڕ تەنها پیکسێلی هەڵبژێردراو دەخوێنێتەوە و دووبارەیان کۆددەکاتەوە بۆ JPEG، PNG، یان WebP.

1. 1
   وێنە بارکراوە بۆ بیرگە

   فایلەکەت بە URL.createObjectURL() دەخوێنرێتەوە، کە بلۆب URLیەکی ناوخۆیی بۆ وێبگەڕ دەبەخشێت. HTMLImageElementیەک فایلەکە تەواو لەناو تابی وێبگەڕدا کۆدلادەبات — بایتی وێنە هەرگیز لە ئامێرەکەت دەرناچن.
2. 2
   ڕووداوەکانی Pointer هەڵبژاردنی بڕین بەڕێوەدەبات

   APIی Pointer Eventsی وێبگەڕ (کە داخڵی مووسکە، دەستلێدان، و قەڵەم یەکدەخات) ڕاکێشان لەسەر ڕووپۆشێکی canvas شوێن دەکەوێت. گرتن لە دەرەوەی هەڵبژاردنەکە چوارگۆشەیەکی نوێ دەستپێدەکات؛ گرتن لەناوی دەیجوڵێنێت؛ گرتن لە نزیک گۆشەی خوارەوە-ڕاست قەبارەی دەگۆڕێت. پیشاندانی ئارەزوومەندانەی ڕێژەی ڕوانگە (1:1، 16:9، 4:3، هتد) شێوازکاری سنووردار دەکات لەکاتی ڕاکێشاندا.
3. 3
   Canvas پێشبینینی زیندووەکە دەکێشێت

   لەسەر هەر گۆڕانی بڕینێک، context ی Canvas 2D وێنەکە دووبارە دەکێشێتەوە، ڕووپۆشێکی تاریک لە دەرەوەی هەڵبژاردنەکە جێبەجێدەکات، ناوچەی بڕینەکە خاوی دەکاتەوە بۆ نیشاندانی وێنەی سەرەتایی بە تەواوی وردی، و خشتەیەکی یاسای سێیانی و دەستەگیرەیەکی تیلی گۆڕینی قەبارە دادەنێت.
4. 4
   toBlob() ئەنجامەکە کۆددەکات و دەیگەیەنێت

   کاتێک کرتە لەسەر بڕین دەکەیت، canvasیەکی نوێی دەرەوەی شاشە لە قەبارەی وردی بڕیندا دروستدەکرێت. ctx.drawImage() تەنها چوارگۆشەی هەڵبژێردراو کۆپی دەکات، و canvas.toBlob() ئەنجامەکە کۆددەکات بە بەکارهێنانی کۆدکەری سەرەکی JPEG، PNG، یان WebPی وێبگەڕ لە ڕێکخستنی کوالیتیی هەڵبژێردراوت. دەرچوونەکە وەک لینکی بلۆبی ناوخۆیی بۆ داگرتن دەگەڕێندرێتەوە.

ئامرازە پەیوەندیدارەکان