Punguza picha _

Jinsi upunguzaji picha kwenye kivinjari unavyofanya kazi

Mchakato wa kupunguza unafanyika kabisa ndani ya tabo ya kivinjari chako kwa kutumia Canvas API. Hakuna usindikaji wa seva, hakuna upakiaji, hakuna huduma za watu wengine. Kila hatua inafanyika kwenye kifaa chako.

1. Pakua picha kwenye kipengele cha <img> ili kivinjari kiisimbue ndani. Mfuniko wa canvas unaonyesha picha iliyopimwa kutoshea eneo la kutazama huku mstatili wa uteuzi unaoburutwa ukionyesha eneo la sasa la kupunguza.
2. Buruta mstatili kwa kingo au pembe zake ili kurekebisha eneo la kupunguza. Mstatili unabaki ndani ya mipaka ya picha kwa hivyo huwezi kuchagua eneo nje ya picha. Wakati uwiano maalum wa vipimo unapoamilishwa (1:1, 16:9, 4:3), kubadilisha ukubwa kunahifadhi uwiano huo kiotomatiki.
3. Kiashiria cha pikseli kinasasishwa moja kwa moja unapoburuta, kikionyesha upana, urefu, na nafasi za X na Y za sasa katika viwianishi vya pikseli za picha. Hii inakuruhusu kulenga vipimo sahihi bila kubahatisha.
4. Unapobofya Punguza na Pakua, ukurasa unachora tu eneo lililochaguliwa la picha asili kwenye canvas ya nje ya skrini katika mwonekano asili wa pikseli, kisha unasafirisha matokeo kupitia canvas.toBlob() katika umbizo sawa na faili asili. URL ya Blob inatolewa kwa ajili ya kupakua.

Kwa nini kupunguza picha mtandaoni?

• Upunguzaji huondoa kingo zisizohitajika, nafasi tupu, au fujo la kuona. Mara nyingi kupunguza picha mara moja kunaboresha utunzi wa picha kuliko kichujio chochote au marekebisho ya rangi.
• Udhibiti wa uwiano wa vipimo ni muhimu kwa mifumo ya uchapishaji. Mitandao ya kijamii inatarajia 1:1 kwa profaili, 16:9 kwa picha ndogo za video, na 4:3 kwa upigaji picha wa kawaida. Kupunguza kwa uwiano sahihi huepuka letterboxing au kukatwa kwa kingo unapopakia.
• Upunguzaji upande wa mteja ndiyo chaguo pekee kwenye vifaa vya kampuni vilivyofungwa ambavyo havina kihariri picha. Kwa kuwa hakuna kinachopakiwa kwa seva, hakuna hatari ya uvujaji wa data na hakuna uhakiki wa kufuata sheria unaohitajika kwa picha nyeti.
• Kiashiria cha moja kwa moja cha vipimo kinaondoa kubahatisha. Unaona viwianishi vya pikseli na ukubwa wa uteuzi unapoburuta, kwa hivyo unaweza kupunguza kwa upana na urefu kamili bila kubadilisha zana ya kupima pikseli.

Matumizi ya kawaida ya kupunguza picha

Upunguzaji ni moja ya mabadiliko ya kawaida ya picha katika uchapishaji wavuti, mitandao ya kijamii, na ukuzaji programu. Hapa kuna mifano mitatu ambapo kipungaji picha cha kivinjari kinaokoa muda.

• Kuandaa picha za bidhaa kwa duka la mtandaoni. Punguza kwa uwiano thabiti wa 1:1 au 4:5 ili kila picha ndogo ya orodha ijipange kwenye gridi. Usafirishaji unahifadhi umbizo asili, kwa hivyo picha za JPEG za bidhaa zinabaki JPEG.
• Kukata skrini kwa ajili ya nyaraka au ripoti za hitilafu. Kata upau wa vidhibiti wa kivinjari, upau wa kazi wa Windows, au arifa nyeti kabla ya kuambatisha picha kwenye tiketi au ombi la kuvuta (pull request).
• Kuunda picha ya benera kuu kwa ukurasa wa kutua. Fungasha uwiano wa 16:9, weka sehemu muhimu zaidi ya picha katikati ya mstatili wa kupunguza, na usafirishe kwa mwonekano asili kwa ubora bora kwenye skrini za retina.

Mfano: kupunguza picha 4000×3000 hadi 1200×675 kwa benera kuu

Picha ya pikseli 4000×3000 kutoka kamera ya dijitali ni kubwa sana kwa benera la kawaida la wavuti. Nafasi ya benera inaweza kuwa 1200×675 (sura ya 16:9).

Tupa picha kwenye eneo la upakiaji. Picha inapakia kwa mwonekano kamili lakini inapimwa kutoshea eneo la kutazama kwa urahisi wa kuburuta. Chagua uwiano wa 16:9. Mstatili wa kupunguza unajifungasha mara moja kwa eneo pana zaidi la 16:9 linalofaa picha. Buruta mstatili ili kuweka sehemu muhimu — kilele cha mlima, bidhaa, au uso wa mtu — kwenye sura. Kiashiria cha moja kwa moja kinaonyesha uteuzi wa sasa kama 4000×2250 (dirisha la 16:9 la picha nzima). Shika pembe na buruta ndani hadi upana ufike 1200 px. Urefu unafuata kiotomatiki kwa sababu uwiano umefungashwa. Bofya Punguza na Pakua. Ukurasa unatoa eneo lililochaguliwa 1200×675 kutoka pikseli asili na kutoa faili iliyopunguzwa katika umbizo asili. Mchakato mzima unachukua sekunde moja hadi mbili na hautumii mtandao zaidi ya upakiaji wa awali wa ukurasa.

Ni umbizo gani la picha linalotumika kwa upunguzaji?

Zana inakubali umbizo lolote ambalo kivinjari kinaweza kusimba: PNG, JPEG na WebP zinashughulikia karibu matumizi yote ya ulimwengu halisi. Matokeo yaliyopunguzwa yanahifadhiwa katika umbizo sawa na faili asili. PNG inabaki bila hasara, JPEG inahifadhi kiwango chake cha ubora asili, na WebP inabaki WebP. Umbizo linagunduliwa kutoka kwa aina ya MIME ya faili asili.

Je, kupunguza kunapunguza ukubwa wa faili ya picha?

Upunguzaji unaondoa pikseli, kwa hivyo ukubwa wa faili ya matokeo kwa kawaida ni mdogo kuliko asili, haswa unapokata mpaka mkubwa au eneo tupu. Usafirishaji unatumia umbizo asili la faili na vigezo vyake vya usimbaji — PNG inabaki bila hasara, JPEG inahifadhi mpangilio wake asili wa ubora — kwa hivyo uokoaji unatokana tu na kupungua kwa idadi ya pikseli, si kwa kubana upya.

Je, uwiano wa vipimo uliowekwa awali hufanya nini?

Viwango vilivyowekwa awali (1:1, 16:9, 4:3, 3:2, 9:16) hufungasha uwiano wa upana hadi urefu wa mstatili wa kupunguza. Wakati kiwango kikiwa amilifu, kuburuta pembe au kingo yoyote kunarekebisha ukubwa wa uteuzi huku ukihifadhi uwiano thabiti. Kubadili hali ya Huru kunaondoa kizuio ili urekebishe mstatili kiholela. Uwiano unatekelezwa kwenye viwianishi vya pikseli za picha, kwa hivyo matokeo yaliyosafirishwa yana uwiano kamili uliochaguliwa.

Je, picha inapakiwa kwa seva?

Hapana. Picha haitoki kamwe kwenye kifaa chako. Ukurasa unatumia File API ya kivinjari kusoma picha kwenye kumbukumbu na Canvas API kupunguza na kusafirisha matokeo. Unaweza kuthibitisha hili kwa kufungua paneli ya Network kwenye DevTools za kivinjari chako — ombi pekee linalotoka wakati wa upunguzaji ni upakiaji wa awali wa ukurasa na wito wa matangazo. Hakuna data ya picha inayotumwa.

Naweza kupunguza eneo maalum kwa kuingiza viwianishi kamili vya pikseli?

Toleo la sasa linarekebisha mstatili wa kupunguza kwa kuburuta kwenye onyesho la awali la picha. Unaweza kusoma viwianishi vya moja kwa moja vya pikseli za X, Y, upana na urefu wa uteuzi. Uingizaji wa nambari moja kwa moja kwa mstatili wa kupunguza haupatikani katika v1 lakini ni uboreshaji uliopangwa kwa sasisho la baadaye.

Nini kinatokea kwa picha asili?

Faili asili inabaki kwenye kifaa chako. Ukurasa unaisoma kwenye kumbukumbu ya kivinjari kwa ajili ya kuonyesha na kupunguza, lakini haibadilishi kamwe faili asili kwenye diski. Matokeo yaliyopunguzwa ni faili mpya unayopakua tofauti. Ya asili inabaki bila kuguswa katika eneo lake la awali kwenye kompyuta au simu yako.

Je, kuna kikomo cha ukubwa wa faili kwa upunguzaji?

Zana inaheshimu kikomo cha MB 30 kwa faili katika eneo la upakiaji ili kudhibiti kumbukumbu ya kivinjari kwenye vifaa vya uwezo mdogo. Iwapo picha yako ni kubwa kuliko MB 30, unaweza kuipunguza ukubwa kwanza kwa kutumia zana maalum ya kupunguza ukubwa kabla ya kuipakia hapa kwa ajili ya kupunguza.

Je, upunguzaji unafanya kazi kwenye simu za mkononi na kompyuta za mkononi?

Ndiyo. Vipini vya kupunguza vimeundwa kwa kuzingatia maeneo ya kugusa, na mwingiliano unatumia matukio ya pointer yanayofanya kazi kwa kubofya kwa kipanya na kugusa kwa kidole. Kwenye skrini ya simu, onyesho la awali la picha linabadilika kwa upana unaopatikana, na vidhibiti vinajipanga wima kwa urahisi wa kutumia kwa mkono mmoja.