Gjenerues Imazhesh Zëvendësuese Falas

Si funksionon

Gjithçka ndodh në shfletuesin tënd duke përdorur API-në HTML Canvas dhe markup SVG të shkruar me dorë — pa server, pa ngarkim, pa shërbim të palës së tretë. Vendos përmasa, ngjyra, dhe tekst etikete, dhe mjeti e boj imazhin direkt mbi një element canvas në kohë reale, pastaj e serializon në PNG, JPEG, ose SVG me kërkesë.

1. 1
   Konfiguro përmasat dhe ngjyrat

   Shkruaj një gjerësi dhe lartësi (1–4000 px secila), ose zgjidh një nga njëmbëdhjetë paracaktimet që mbulojnë madhësi të zakonshme mediash sociale dhe dizajni. Zgjidh një ngjyrë sfondi dhe teksti nga temat e integruara ose vendos direkt çdo vlerë heksadecimale; një zgjedhës vendas ngjyrash dhe një fushë teksti e validuar mbeten të sinkronizuara.
2. 2
   API-ja Canvas vizaton parashikimin menjëherë

   Një efekt React thërret drawPlaceholder() në çdo ndryshim. Ky funksion përdor CanvasRenderingContext2D për të mbushur drejtkëndëshin me ngjyrën e sfondit, opsionalisht vizaton vija të holla diagonale kryqi me 15% tejdukshmëri, pastaj mat dhe qendërzon tekstin tënd të etiketës — duke zvogëluar automatikisht fontin derisa të përshtatet brenda 90% të gjerësisë së canvas-it.
3. 3
   Eksporto si PNG, JPEG, ose SVG

   Shkarkimet PNG dhe JPEG thërrasin canvas.toDataURL(), konvertojnë rezultatin base64 në një Blob në memorie, dhe aktivizojnë shkarkimin — të gjitha në mënyrë sinkrone brenda gjestit të përdoruesit kështu që rregullat e shkarkimit të iOS Safari plotësohen. Eksporti SVG ndërton një varg SVG të vetëpërmbajtur me një rect përputhës, vija diagonale opsionale, dhe një element teksti, pastaj e ruan si skedar .svg.
4. 4
   Eksport në masë dhe shkurtore kopjimi

   Butoni 'Shkarko të gjitha paracaktimet' importon dinamikisht JSZip, rivizaton secilën nga njëmbëdhjetë madhësitë e paracaktuara mbi një canvas jashtë-ekranit duke përdorur të njëjtën funksion vizatimi, dhe i paketon të gjitha PNG-të në një ZIP të vetëm. Butonat e kopjimit lëshojnë një data URL PNG, një etiketë img SVG brendazi, ose një deklaratë CSS background-image për ngjitje të menjëhershme në kod.

Mjete të ngjashme