Kyauta Mai Ƙirƙirar Hoton Wuri (Placeholder)

Yadda Yake Aiki

Komai yana faruwa a burauzarka ta amfani da HTML Canvas API da alamar SVG da aka rubuta da hannu — babu uwar garke, babu lodawa, babu sabis na bangare na uku. Kana saita girma, launuka, da rubutun lakabi, kuma kayan aikin yana zana hoton kai tsaye zuwa wani abu na canvas a lokaci na gaskiya, sannan yana serialize shi zuwa PNG, JPEG, ko SVG bisa buƙata.

1. 1
   Tsara girma da launuka

   Rubuta fadi da tsayi (1–4000 px kowanne), ko zaɓi daya daga cikin saiti goma sha ɗaya da suke rufe girma na yau da kullum na kafofin zamantakewa da ƙira. Zaɓi launin bango da rubutu daga jigogin da aka gina ko shigar da wata ƙimar hex kai tsaye; mai zaɓen launi na asali da wani filin rubutu da aka tabbatar suna zama ɗaya.
2. 2
   Canvas API yana zana dubawa nan take

   Wani sakamakon React yana kiran drawPlaceholder() a kowane canji. Wannan aikin yana amfani da CanvasRenderingContext2D don cika murabba'i da launin bango, na zaɓi yana zana layuka na diagonal marasa ƙarfi a 15% opacity, sannan yana auna da tsaka-daidaita rubutun lakabinka — yana rage font atomatik har sai ya dace da 90% na fadin canvas.
3. 3
   Fitar da shi a matsayin PNG, JPEG, ko SVG

   Saukewar PNG da JPEG suna kiran canvas.toDataURL(), suna canja sakamakon base64 zuwa Blob a ƙwaƙwalwa, kuma suna kunna saukewa — duk lokaci guda a cikin motsin mai amfani don ka'idojin saukewa na iOS Safari su gamsu. Fitarwar SVG tana gina wani harafin SVG mai zaman kansa tare da rect mai dacewa, layuka na diagonal na zaɓi, da wani abu na rubutu, sannan yana ajiye shi a matsayin fayil na .svg.
4. 4
   Fitarwar yawa da hanyoyin kwafi na sauri

   Maɓallin 'Sauke duk saiti' yana shigo da JSZip a hankali, yana sake zana kowanne daga cikin girma goma sha ɗaya na saiti zuwa wani canvas a wajen allo ta amfani da iri ɗayan aikin zanawa, kuma yana haɗa dukkan PNGs zuwa ZIP guda ɗaya. Maɓallan kwafi suna fitar da wani URL na bayanan PNG, wata alamar hoto ta SVG cikin gida, ko wani sanarwa na CSS background-image don manna nan take zuwa lamba.

Kayan Aiki Masu Alaƙa