گۆڕەری جۆری وێنەی بەخۆڕایی

چۆن کار دەکات

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

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

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

   کاتێک بۆ JPEG دەگۆڕیت (کە کەناڵی ئەلفای نییە)، canvasـەکە سەرەتا بە پاشبنەمایەکی سپی پڕدەکرێتەوە پێش کێشانی وێنەکە، ڕێگری لە کێشانی ناوچە شەفافەکان وەک ڕەش لە فایلی دەرچووندا دەکات.
3. 3
   canvas.toBlob() پیکسێلەکان دووبارە کۆددەکاتەوە

   canvas.toBlob(mime, quality)ی سەرەکی وێبگەڕ canvasـەکە دەکاتەوە بۆ فۆرماتی هەڵبژێردراو (JPG، PNG، WebP، یان AVIF) لە ئاستی کوالیتیی داواکراو. ئەگەر وێبگەڕ کۆدکردنی فۆرماتێک پشتگیری نەکات، پشکنینێکی تایبەتمەندی لە دەستپێکدا دوگمەکە ناچالاک دەکات لەبری ئەوەی بێدەنگانە فایلێکی هەڵە-ناوکراو دروستبکات.
4. 4
   دەرچوون وەک بلۆبی ناوخۆیی گەیشتووە

   بلۆبی کۆدکراو لەناو لینکی ئۆبجێکتی ناوخۆییدا دەپێچرێتەوە بۆ پێشبینین و داگرتنی دەستبەجێ. بۆ چەند فایلێک، JSZip کۆیان دەکاتەوە بۆ ZIPـیک لەناو وێبگەڕدا پێش گیرسانی داگرتنەکە.

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