Sådan bygger du en meme-maker med React: en nybegyndervejledning

Hvis du er midt i at lære React, har du sandsynligvis allerede været igennem masser af tutorials om, hvordan man opbygger en opgaveliste. På et tidspunkt vil du kigge efter alternative ideer til at prøve og lære, men du fortsætter med at støde på forskellige versioner af standardeksemplet til opgaveliste.

Denne alternative idé i denne artikel er for dig, de nysgerrige. Kodebasen kan findes i min GitHub, og den bootstrappes fra create-react-app. Jeg har samlet meme-skabeloner fra google og andre kilder. Impact-skrifttypen kan gøre ethvert billede til et meme, så vi har intet andet valg end at tilføje det.

Dette er et godt gør-og-lær-projekt til at begynde med. Vi vil beskæftige os med mange begivenhedslyttere / brugerinteraktioner og tilstandsmutationer.

Bygning af galleriet

Oprindeligt bygger vi et billedgalleri, så brugerne kan vælge en meme-skabelon. Jeg har gemt de billeder, jeg har samlet som en matrix, og jeg bygger et simpelt galleri ud af det.

I den følgende kode,

  1. Vi kortlægger fotosarrayet, viser hver meme-skabelon i et img-tag og viser et galleri.
  2. Vi bestemmer det aktuelle valgte billede gennem et onKlik på img-koden.
  3. Vi har et initialState-objekt med indledende indstillinger af billedteksterne og deres placering. Positionen, indholdet og trækstatus for de øverste og nederste tekster kan senere ændres ved at udløse tilstandsmutationer.

Som du kan dechifrere, har hvert billede i galleriet sin egen onClick-begivenhed. Det finder det aktuelt valgte billede, konverterer det til data-URI og åbner et reactstrap-modal. Modalet vil være arbejdsstationen til oprettelse af meme.

Meme-Maker-arbejdsstationen

Vi bruger svg, billede og tekst tags inde i modalet til at holde billedet og meme-billedteksten. Vi foretrækker SVG, fordi du kan zoome ind og ud så meget du vil, og det mister aldrig klarheden. Og konvertering af SVG til PNG under eksport af meme er relativt enkel opgave.

Hvert billede i samlingen har forskellig højde og bredde. For at undgå at strække og komprimere billedet laver jeg en lille løsning for at rette billedformatet. Jeg fastsætter bredden til 600 og beregner højden baseret på forholdet bredde-højde. Jeg leverer den beregnede højde og bredde til SVG.

Den overordnede struktur inde i SVG er ret ligetil. Det holder billedet og billedteksterne.


    
      {this.state.toptext} {this.state.bottomtext} // And we will have event listeners attached to the tags to move them around. We'll see it in later part of the article.
    

X- og y-koordinaterne for toppen og bunden /> tags opretholdes i tilstanden (se initialState-objektet i MemeMaker-komponenten). Når brugeren trækker og placerer tekstmærkerne, ændres X- og Y-koordinaterne.

Bemærk: Billedkodets xlinkHref vil være indlejret (base64) sti. Rå src-webadresser kan ikke konverteres til PNG'er under download.

Sådan ser hele koden ud:

Bortset fra SVG har vi to /> ; tags, så brugeren kan indtaste deres øverste og nederste billedtekst til meme. OnChange-begivenheden fanger toptekst og bundtekst og sætter dem i tilstanden, når og når vi ændrer den.

Træk teksten rundt!

Lad os prøve at omplacere de øverste og nederste billedtekster nu. Træk og slip-interaktioner mellem teksttags er bundet til begivenhedslyttere.

  1. Musetryk —onMouseDown - Finder det valgte tekstmærke, bestemmer aktuelle X- og Y-positioner og vedhæfter "mousemove" -begivenhedslytter til det.
  2. Musebevægelse - onMouseMove - Finder den aktuelle position (x og y) for tekstmærket, når musen holdes og flyttes.
  3. Mus frigivelse - onMouseUp - Finder faldposition eller frigørelsesposition. Bestemmer X og Y, hvor teksten slettes. Fjerner "mousemove" -begivenhedslytteren fra elementet og afslutter træk og slip.

For at spore musetryk skal du holde og trække. Vi inkluderer følgende begivenhedslyttere til tekstkoder.

onMouseDown={event => this.handleMouseDown(event, ‘top’)}onMouseUp={event => this.handleMouseUp(event, ‘top’)}

Derefter vedhæfter vi "mousemove" -lytten til at spore musebevægelser på "mousedown". Når tekstmærket er droppet, fjerner vi den vedhæftede musebevægelsesbegivenhedslytter i “mouseup”.

Sådan gør koden det:

Nu hvor træk og slip er færdig, kan du flytte din tekst rundt og placere den igen, hvor som helst du vil.

Downloader meme

Når en bruger klikker på downloadknappen, konverterer vi SVG til en XML-seriestreng og tegner den i et HTML5-lærred. Vi bruger toDataUrl () -metoden til html-lærred (genererer en base64-billed-URI) til at generere et "image / png" -mime-billede!

Når du lærer mere, er der meget mere, du kan gøre med dette lille projekt.

  1. Du kan prøve at hente billeder fra open source API'er og oprette et galleri.
  2. Du kan prøve at tilføje bestemmelser for at dele dem på facebook, whatsapp og twitter.
  3. Du kan prøve at lade brugeren uploade sit eget billede, skalere det og oprette et meme.
  4. Du kan prøve at ændre fontstørrelse.

Der er meget mere, du kan gøre for at forbedre det projekt, der i sidste ende forbedrer dine kodningsfærdigheder. ? God kodning! ?