قەبارەکەری وێنەی بەخۆڕایی

چۆن کار دەکات

گۆڕینی قەبارە تەواو لە وێبگەڕەکەتدا ڕوودەدات بە بەکارهێنانی APIی Canvas — هەمان ئەنجینی نیگاردان کە لەناو Chrome، Firefox، و Safariدا بنیاتنراوە. وێنەکەت لەسەر canvasیەکی دەرەوەی شاشە بە قەبارەی نوێ دەکێشرێت و بەشێوەیەکی ناوخۆیی دووبارە کۆددەکرێتەوە؛ هیچ شتێک لە ئامێرەکەت دەرناچێت.

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

   کاتێک فایلێک فڕێدەدەیت یان هەڵیدەبژێریت، وێبگەڕ وێنەکە (JPEG، PNG، WebP، AVIF، یان GIF) کۆدلادەبات بۆ داتای پیکسێلی خاو لە ڕێگای HTMLImageElementیەکەوە. قەبارەی پیکسێلی سەرەتایی دەخوێنرێتەوە و بەکاردێت بۆ پڕکردنەوەی پێشوەختی خانەی پان و بەرزی.
2. 2
   Canvas دووبارە دەکێشێت بە قەبارەی نوێ

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

   شێوازی سەرەکی canvas.toBlob()ی وێبگەڕ داتای پیکسێل کۆددەکات بۆ JPEG، PNG، یان WebP لە ئاستی کوالیتیی دانراودا. ئەگەر قەبارەی فایلی ئامانج دیاریکردبیت، گەڕانی دووانیی 7-دووپاتکردنەوە بەخۆکار پارامیتەری کوالیتی ڕێکدەخات تا دەرچوونەکە لەو قەبارەیە یان کەمتر بێت.
4. 4
   ئەنجام بەشێوەیەکی ناوخۆیی پێشبینین و داگیرا دەکرێت

   بلۆبی کۆدکراو دەگۆڕدرێت بۆ لینکی ئۆبجێکت بۆ پانێلی پێشبینین — بەبێ گەشتی سێرڤەر. کرتەکردن لەسەر داگرتن پاشەکەوتکردنێکی ناوخۆیی دەگیرسێنێت بە ناوی فایلێک کە قەبارەی پیکسێلی کۆتایی لەخۆدەگرێت.

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