Jinsi Teknolojia ya Kuzungusha Pembe za Picha Kwenye Kivinjari Inavyofanya Kazi
Unapotumia kihariri cha picha cha mtandaoni cha jadi, utaratibu wa kawaida unahusisha kupakia faili yako kwenye server ya mbali ambapo programu za nyuma (mara nyingi zikitumia maktaba kama ImageMagick au FFmpeg) zinachakata picha na kuirudisha kwako. Njia hii ni ya polepole, inatumia rasilimali nyingi, na inahatarisha faragha yako. Zana yetu ya Round Corners inabadilisha mfumo huu kabisa kwa kutumia uwezo mkubwa wa vivinjari vya kisasa vya mtandao kufanya hesabu zote za picha hapo hapo kwenye kifaa chako.
Msingi wa teknolojia yetu unategemea HTML5 Canvas API, kipengele chenye nguvu kinachoruhusu uchoraji wa maumbo ya 2D na picha za bitmap kwa kutumia kodi. Unapoburuta na kudondosha picha kwenye zana wetu, tunatumia File API ya asili na URL.createObjectURL() kupakia picha yako moja kwa moja kwenye kumbukumbu ya kivinjari bila kutuma hata byte moja kwenye mtandao. Hii inatimiza ahadi wetu ya kutopazia kitu chochote kwenye server.
Picha ikishapakiwa kwenye kumbukumbu, tunaanzisha HTML5 Canvas ya nyuma inayolingana kikamilifu na vipimo vya faili yako ya asili. Ili kuunda pembe zilizozungushwa, injini yetu ya JavaScript inatengeneza njia ya kukata picha. Kwa kutumia mbinu za canvas za arcTo na bezierCurveTo, tunakokotoa kipenyo halisi cha pembe ulichochagua kupitia kitelezi cha UI. Eneo la canvas kisha linakatwa kulingana na umbo hili, na picha ya asili inachorwa kwenye canvas kwa kutumia mbinu ya drawImage. Pixel zote zinazoangukia nje ya eneo hili lililokatwa zinaondolewa, na kuacha pembe laini zilizopinda. Mwishowe, data ya canvas inabadilishwa kuwa kitu cha Blob, kwa kawaida ikitumia umbizo la PNG ili kuhifadhi uwazi wa pembe mpya, na kuwekwa tayari kwako kupakua. Mchakato mzima unachukua milisekunde chache, ukifanyika kikamilifu kwenye kivinjari, kuhakikisha kazi yako haikatizwi, ni ya haraka sana, na ina faragha ya 100%.