Canza girman hotuna _

Yadda canza girman hoto da ke gefen mai binciken ke aiki

Kowane canza girma layin matakai gajere ne da ke aiki gaba ɗaya a JavaScript. Ba a sauke ɗakin laburare na codec kuma babu uwar garken da ya shiga. Canvas API na mai binciken kansa yana buɗe ɓoye fayil, yana zana shi a girman da ake so, kuma yana sake-ɓoyewa a cikin ƙwaƙwalwa, sannan yana ba ku Blob da shafin zai iya nuna a cikin kallon farko ko zip ɗin. Saboda kowane matakin yana zaune a cikin sandbox na tab, fayilolin asali ba sa taɓa cibiyar sadarwa.

1. Karanta kowane fayil da aka loda a matsayin Blob kuma ƙirƙiri object URL don mai binciken ya iya buɗe ɓoyewa gida, ba tare da kwafa bytes zuwa uwar garken ko ajiye su zuwa faifai ba.
2. Ƙididdiga girman da ake so daga hali da kuka zaɓa — iyakar mafi tsayin gefe, faɗi da tsawo daidai, ko kiwango na kashi. Kullen rabo yana kiyaye ƙididdigar lokacin da kuka gyara sehemu ɗaya.
3. Ƙirƙiri Canvas marasa allon a girman da ake so kuma kira ctx.drawImage(source, 0, 0, width, height) don zana pixels da aka buɗe ɓoye. Mai binciken yana sarrafa interpolation da ke sawa sakamakon da aka auna.
4. Kira canvas.toBlob don sake-ɓoyewa zuwa tsarin chanzo. PNG yana kasancewa ba tare da asara ba, JPEG da WebP ana sake-ɓoyewa a inganci mai girma. Sannan shafin yana nuna katin kafin/bayan kuma yana ba da sauke na hoto ɗaya ko ZIP guda ɗaya da aka gina a cikin ƙwaƙwalwa da fflate.

Me ya sa canza girman hotuna?

• Hotuna masu girma fiye da kima sune sanadin da ya fi yawa na shafuka masu jinkiri. Hoto 4000×3000 daga wayar hannu da aka saka kai tsaye a cikin tsarin faɗi 600-pixel yana ɗaukar pixels kusan sau 40 fiye da yadda skrini ke buƙata. Iyakance mafi tsayin gefe zuwa 1600 px kafin loda yana yanke nauyin shafi sosai kuma yana inganta LCP na Core Web Vitals.
• Fomu na loda suna aiwatar da girma daidai. Makunkunan avatar, tashohin hotunan ID, jerin kasuwanci, da kadin OG duk suna son saizin pixels maalum: 1200×630 don kallon farko na Open Graph, 512×512 don ikoni na app, 150×150 don hoton ɗan yaro. Daidaita lambar a daidai yana kaucewa madauki na ladar loda da aka ƙi.
• Kayan aikin imel da tattaunawa suna sake-matsa duk abin da ya girma a natse, wanda zai iya lalata screenshot mai tsabta. Canza girman ku kanku yana kiyaye sakamakon da ake iya hango maimakon a bar shi ga layin mtu ɗaya mai asara.
• Daidaituwa ta batch tana da muhimmanci ga gidajen hotuna da kataogi. Gudanar da folder na hotuna masu saizi daban-daban ta hanyar manufa guda ɗaya ta 800×800 yana nufin kowane kati yana layi a kan tsarin murabba'i, ba tare da hoton giant da ya warwatse yana karya tsarin ba.

Amfani na yau da kullun

Canza girma yana bayyana ko'ina girman chanzo da sa ran marubuci ba su daidaita ba. Tsaruka uku ana gani akai-akai.

• Shirya hotuna na kayan aiki don kantin Shopify ko WooCommerce. Folder na asali na kamera na pixels 4000 ana iyakance ta zuwa mafi tsayin gefe na pixels 1600 don kantin ya loda da sauri, yayin da rabo yana kasancewa ba a shafa ba don komai ya zama mai kumbura.
• Haɓaka kayan zamantakewa da app daga fayil guda ɗaya na jagora. Saita 1200×630 daidai don katin Open Graph, sannan 512×512 don ikoni na app, yana fitar da kowannen su cikin mibofyo kaɗan ba tare da bude editan mai nauyi ba.
• Rage batch na screenshots na QA ko tallafi kafin a haɗe su zuwa tikiti. Auna folder na photos 50 zuwa 50% yawanci yana sauke girman archive da kimanin kashi uku cikin huɗu kafin ya shiga mai bin diddigin kuskure.

Misali da aka yi aiki: hoto na pixels 4000 zuwa hoto na yanar gizo na pixels 1600

Hoto 4000×3000 kai tsaye daga waya abu ne na yau da kullun da ya fi girma fiye da yadda kowane tsarin yanar gizo ke buƙata. Shi ne ma'auni mai kyau don abin da canza girma ke adanawa.

Saka hoto a yankin loda, bar hali a kan Iyakance mafi tsayin gefe, kuma saita ƙima zuwa 1600. Layin Canvas yana zana hoton a 1600×1200 tare da rabo an kiyaye shi, sannan yana sake-ɓoyewa a tsarin asali. Katin fitowar yana nuna girma sabon da girman fayil, wanda ga JPEG na yau da kullun yana faɗuwa daga megabytes kaɗan zuwa ƙananan kilobytes ɗari. Danna Sauke a kan katin don dauki fayil guda ɗaya, ko danna Sauke .zip idan kun canza girman hotuna da yawa a cikin wucewa guda ɗaya. Duk zagayowar, daga saka zuwa sauke, tana aiki a cikin ƙaramin sehemen dakika kuma tana cinye bandwidth sifili bayan shafin kansa ya gama loda.

Wanne halaye na canza girma suna samuwa?

Uku. Iyakance mafi tsayin gefe yana iyakance mafi tsawo na faɗi ko tsawo zuwa ƙimar pixel kuma yana auna gefen ɗayan don dacewa, wanda shine zaɓi mai aminci na tsoho saboda ba ya naushi. Faɗi × tsawo daidai yana baka rubutawa lambobi biyu, tare da kullen rabo da ke sake-ƙididdiga sehemu na biyu daga rabo na chanzo lokacin da kuka gyara na farko — kashe kulle lokacin da fomu ke buƙatar saizin daidai mara rabo. Kiwango ta kashi yana ninka girma biyu ta faɗo ɗaya, mai amfani don rarrabe rabin ko ninki biyu na duk batch lokaci ɗaya. Preseti shida da mibofyo guda ɗaya (daga 1920×1080 zuwa hoton ɗan yaro 150×150) suna rufe manufofin da ake so da yawa.

Shin wannan yana faruwa a kan na'urata?

Eh, gaba ɗaya. Shafin yana amfani da Canvas API na asali na mai binciken da Web File API don buɗe ɓoye, zana upya, da sake-ɓoye kowane hoto a cikin ƙwaƙwalwa. Babu bayanan hoto da aka aika zuwa uwar garken, babu loda na wucin gadi, babu zagayowar girgije. Kuna iya tabbatar da shi: buɗe DevTools, canza zuwa panel na Cibiyar Sadarwa, kuma gudanar da canza girma. Buƙatun fitarwa kawai da za ku gani sune loda shafi na farko da kiran talla. Babu kome mai siffar hoto da ke barin tab, wanda shine abin da ke mai da wannan amintaccen ga sikanin ID, hotunan likita, da sauran kayan da ba za ka so a loda su ba.

Shin canza girma zai rage inganci?

Rage hoto (downscaling) yana kallo da kyau — mai binciken yana daidaita pixels na chanzo zuwa pixels kaɗan, don haka bayanai suna kasancewa a bayyane kuma fayil yana ƙanƙanta sosai. Ƙara fiye da ƙudurin chanzo (upscaling) ba zai iya ƙirƙira bayanai da ba a taɓa kama su ba, don haka hoto ɗan yaro da aka girma zai yi laushi; wannan shi ne iyakar mai canza girma kowannensu, ba wannan maalum ba. Fitowar tana kiyaye tsarin chanzo: PNG yana kasancewa ba tare da asara ba, yayin da JPEG da WebP ana sake-ɓoyewa a mipangilio mai inganci mai girma don bambancin mai ganuwa daga asalin ya zama da wahalar lura da shi.

Wanne tsarukan fayil ana goyan baya?

A gefen shigarwa, kowane tsari da mai binciken zai iya buɗe ɓoyewa ana karɓar: PNG, JPEG, WebP, GIF, da BMP suna rufe kusan kowane fayil da waya, kamera, ko kayan aikin screenshot ke samarwa. Fitowar tana kiyaye tsarin chanzo inda encoder na Canvas ya goyan bayan sa — PNG, JPEG, da WebP suna zagayawa kai tsaye. GIF da BMP, waɗanda Canvas API za ta iya buɗe ɓoyewa amma ba za ta iya sake-ɓoyewa ba, ana ajiye su a matsayin PNG ba tare da asara ba a maimakon. Sunan fayil da aka canza girman sa ya haɗa da girman sabon (misali, photo-1600x1200.jpg) don batch ya zama mai sauƙin tsarawa.

Saka hotunanka, zaɓi girma, canza. Komai yana aiki a tab ɗinka. Babu loda, babu asusun, babu jiran layin uwar garken.