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

چۆن کار دەکات

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

1. 1
   وێنە بەشێوەیەکی ناوخۆیی کۆدلادراوە

   فایلی JPEG، PNG، یان WebPـت بار دەکرێت بۆ HTMLImageElementیەک لە ڕێگای لینکی ئۆبجێکتی ناوخۆییەوە — سەرچاوەیەکی بیرگەی وێبگەڕ کە هەرگیز لە ئامێرەکەت دەرناچێت. قەبارەی پیکسێلی سروشتی ڕاستەوخۆ لە بیتمابی کۆدلادراوەوە دەخوێنرێتەوە.
2. 2
   گۆڕینی canvas جێبەجێکراوە

   canvasیەکی دەرەوەی شاشە قەبارەی دەدرێت بۆ گونجان لەگەڵ سنووری خولاوی خولانراو (پان·cos + بەرزی·sin بۆ هەر تەوەرێک). context ی Canvas 2D پاشان بۆ ناوەند دەگوازرێتەوە، بە گۆشەی هەڵبژێردراو بە ڕادیان دەخولێتەوە، و بە -1 پیوان دەکرێت لەسەر تەوەری ئاسۆیی یان عەمودی بۆ سووڕاندنەوە — هەموو کارلێکی ستانداردی ctx.rotate / ctx.scale بەبێ کتێبخانەی دەرەکی.
3. 3
   بڕینی خۆکار گۆشەکان کورت دەکاتەوە (ئارەزوومەندانە)

   بۆ خولانەوەی نا-گۆشە-ڕاست، فەنکشنێکی جیۆمەتری دەستنووس — largestInnerRect — گەورەترین چوارگۆشەی تەوەر-ڕێکخراوی ڕێژەی ڕوانگەی سەرەکی ژمێردەکات کە لەناو سنووری خولاودا دەگونجێت، بۆیە گۆشە بەتاڵە سێگۆشەییەکان لادەبردرێن بەبێ خراپکردنی وێنەکە.
4. 4
   کۆدکەری وێبگەڕ ئەنجامەکە کۆددەکات

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

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