Soo Saaraha Sawirka Meel-Haye oo Bilaash ah

Sida Ay U Shaqeyso

Wax walba waxay ka dhacaan biraawsarkaaga isagoo isticmaalaya Canvas API-ga HTML iyo markup SVG oo gacan lagu qoray — server, soo shubid, adeeg dhinac saddexaad ah midna ma jiraan. Waxaad dejisaa cabbirrada, midabbada, iyo qoraalka sumadda, qalabkuna wuxuu sawirka si toos ah ku rinjiyeeyaa unug canvas ah waqti dhabta ah, kadibna wuxuu u beddelaa PNG, JPEG, ama SVG marka loo baahdo.

1. 1
   Habeeyaha cabbirrada iyo midabbada

   Qor ballaadh iyo dherer (1–4000 px mid kasta), ama dooro mid ka mid ah kow iyo tobanka daboolaya cabbirrada bulshada iyo naqshadaynta caadiga ah. Dooro midab asal ah iyo qoraal ah mowduucyada dhexdiisa ku jira ama geli qiime hex ah si toos ah; doorayaha midabka dabiiciga ah iyo goobta qoraal la xaqiijiyay ayaa isu waafaqsan.
2. 2
   Canvas API wuxuu isla markiiba ku sawiraa fiiriyaha

   Saameyn React ah ayaa wacda drawPlaceholder() beddel kasta. Function-kani wuxuu isticmaalaa CanvasRenderingContext2D si uu u buuxiyo afar-geesoodka midabka asalka ah, ikhtiyaar ahaan wuxuu sawiraa khadad daldala ah oo mid-doon ah 15% opacity ah, kadibna wuxuu cabbiriyaa oo bar-dhexaadiyaa qoraalka sumaddaada — si toos ah yareeya font-ka ilaa uu ku habboonaado 90% ballaadhka canvas-ka.
3. 3
   Ku soo saar PNG, JPEG, ama SVG ahaan

   Soo-dejinta PNG iyo JPEG waxay wacaan canvas.toDataURL(), waxay natiijada base64 u beddelaan Blob xasuusta ku jira, waxayna bilaabaan soo-dejinta — dhammaantood iyada oo isku mar ka dhacaysa dhaqdhaqaaqa isticmaalaha si xeerarka soo-dejinta iOS Safari loo buuxiyo. Soo-saarka SVG wuxuu dhisaa xarig SVG madax-bannaan oo leh rect ku habboon, khadad daldala ah oo ikhtiyaar ah, iyo unug qoraal ah, kadibna wuxuu u keydiyaa fayl .svg ah.
4. 4
   Soo-saar wadar-wadar ah iyo koobi degdeg ah

   Badhanka 'Soo deji dhammaan cabbirrada' wuxuu si firfircoon u soo shubaa JSZip, wuxuu dib u sawiraa mid kasta oo ka mid ah kow iyo tobanka cabbir canvas bannaan-shaashadeed ah isagoo isticmaalaya isla function sawirka, wuxuuna dhammaan PNGs-ka ku xidhmeeyaa hal ZIP. Badhamada koobiga waxay soo saaraan URL xog PNG ah, calaamad img SVG inline ah, ama bayaan CSS background-image ah oo isla markiiba loogu dhajin karo koodhka.

Qalabka La Xiriira