دروستکەری وێنەی جێگرەوەی بەخۆڕایی

چۆن کار دەکات

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

1. 1
   قەبارە و ڕەنگ ڕێکبخە

   پان و بەرزیەک بنووسە (1–4000 پیکسێل هەریەکە)، یان یەکێک لە یازدە پیشوەخت هەڵبژێرە کە قەبارەی باوی میدیای کۆمەڵایەتی و دیزاین دادەپۆشن. پاشبنەما و ڕەنگی دەق لە ڕووکارە بنیاتنراوەکان هەڵبژێرە یان هەر نرخێکی شازدەیی ڕاستەوخۆ بنووسە؛ هەڵبژێری ڕەنگی سەرەکی و خانەیەکی دەقی پشکنراو هاوکات دەمێننەوە.
2. 2
   APIی Canvas پێشبینینی دەستبەجێ دەکێشێت

   کاریگەرییەکی React drawPlaceholder() بانگدەکات لەسەر هەر گۆڕانێک. ئەم فەنکشنە CanvasRenderingContext2D بەکاردێنێت بۆ پڕکردنەوەی چوارگۆشە بە ڕەنگی پاشبنەما، بەبژاردنانە کێشانی هێڵی سووریی لار بە شەفافی %15، پاشان پێواندن و ناوەندی دەقی لەیبڵت — فۆنتی خۆکار بچووک دەکات تا لەناو %90ی پانی canvasدا بگونجێت.
3. 3
   وەک PNG، JPEG، یان SVG دەریبهێنە

   داگرتنی PNG و JPEG canvas.toDataURL() بانگدەکات، ئەنجامی base64 دەگۆڕێت بۆ Blobیەک لە بیرگەدا، و داگرتنەکە دەگیرسێنێت — هەموو هاوکات لەناو کارلێکی بەکارهێنەردا بۆ ئەوەی یاسای داگرتنی Safariی iOS دابین بکرێت. دەرهێنانی SVG ڕیزبەندییەکی SVGی سەربەخۆ بنیاتدەنێت لەگەڵ rectی هاوتا، هێڵی لاری ئارەزوومەندانە، و توخمێکی دەق، پاشان وەک فایلێکی .svg پاشەکەوت دەکات.
4. 4
   دەرهێنانی کۆمەڵ و کورتبڕی کۆپیکردن

   دوگمەی 'داگرتنی هەموو پیشوەختەکان' JSZip بەشێوەیەکی داینامیک هاوردە دەکات، هەریەکێک لە یازدە قەبارەی پیشوەخت دووبارە دەکێشێتەوە لەسەر canvasیەکی دەرەوەی شاشە بە بەکارهێنانی هەمان فەنکشنی کێشان، و هەموو PNGەکان دەکات بۆ یەک ZIP. دوگمەی کۆپی لینکی داتای PNG، تاگی imgی SVGی ناوخۆیی، یان ڕاگەیاندنی background-imageی CSS بۆ لکاندنی دەستبەجێ لەناو کۆددا دەردەخات.

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