Å lage din egen meme generator

0
41

Nesten hver gang et nytt meme dukker opp i min mate, jeg tenker på en vittig versjon for å skape. Jeg er ikke alene i dette. Memer er ofte en måte å anerkjenne en felles erfaring eller idé. I en variant av “Er dette en due” meme som har vært å lage runder på nettet, designer Daryl Ginn spøkte om de elementære arten av de fleste programmer som sier de bruker kunstig intelligens.

pic..com/nAHki0YFyV

— Daryl Ginn (@darylginn) Mai 16, 2018

Flere personer har svart til sin tweet sier noe langs linjene av “erstatte denne med dette.” Daryl ‘ s versjon fikk dem til å tenke om andre mulige varianter. Plattformer som imgFlip eksisterer for å gjøre meme generasjoner raskt og enkelt. Men, det er bare så mye tilpasning de kan tillate. For mange idéer, og skaper nye versjoner kan kun gjøres av personer med Photoshop kunnskap. Men det trenger ikke å være slik! For noen memer som krever mer enn Virkningen for skrift tekst på et bilde, et meme generator kan opprettes ved hjelp av HTML-Lerret API. I denne opplæringen, vi kommer til å lage en generator for #saltbae meme.

Men først…

La oss se på noen morsomme interaktive meme eksempler!

Nettstedet pablo.livet lar deg lage dine egne Kanye West TLOP album cover ved å endre tekst og bilde.

Dette er en av mine favoritter:

Den digitale byrået R/GA opprettet Straight Outta et Sted campaign der brukere “vise verden hvor de kommer fra ved å laste opp sitt eget bilde og fylle ut de tomme etter” Straight Outta ____.'” Brukere kan laste ned og dele meme.

Utvikler Isak Hepworth opprettet Trump Executive Order Generator.

Spotify samarbeidet med Migos å opprette en rekke nedlastbare valentinsdag-kort som kan tilpasses ved å endre navn.

La oss bygge vår egen meme generator!

Nå, opplæringen. I en populær versjon av #saltbae meme, i stedet for salt, Salt Bae (hvis navn er Nusret Gökçe) sprinkles noe annet enn salt.

Legge et bilde

Det første vi må gjøre er å legge det opprinnelige bildet på lerretet. Du kan legge et bilde på én av to måter: fra en URL eller fra en som eksisterer i DOM ved å bruke <img> – tag-en, men det er skjult.

Her er hvordan vi gjør det med et skjult bilde-koden:

<lerret id=”lerret” bredde=”1024″ høyde=”1024″>
Lerret krever en nettleser som støtter HTML5.
</lerret>
<img crossOrigin=”Anonym” id=”salt-bae” src=”http://res.cloudinary.com/dlwnmz6lr/image/upload/v1520011253/170203-salt-bae-mn-1530_060e5898cdcf7b58f97126d3cfbfdf71.nbcnews-ux-2880-1000_kllh1d.jpg”/>

Jeg hosting bildet på Cloudinary og lagt crossOrigin-attributtet slik at vi ikke går inn i noen corso buenos problemer.

funksjonen drawImage(tekst) {
const lerret = – dokument.bürgerliches(‘lerret’);
const ctx = lerret.getContext(‘2d’);
ctx.clearRect(0, 0, lerret.bredde, lerret.høyde);
const img = – dokument.bürgerliches(‘salt-bae’);
ctx.drawImage(img, 0, 0, lerret.bredde, lerret.høyde);
}

vinduet.onload = function() {
drawImage();
}

Vi bruker lerretet drawImage-funksjonen for å tegne bildet på lerretet. Den kan brukes til å trekke videoer eller deler av et bilde som godt. Metoden gir forskjellige måter å gjøre dette på. Vi tegner bildet av angir posisjon og bredden og høyden på bildet.

ctx.drawImage(img, x, y, bredde, høyde);

Alternativt kan vi laste bildet fra en URL-adresse:

funksjonen loadAndDrawImage(src) {
// Lager et bilde objekt. (Ikke en del av dom)
const bilde = new Image();

// Når bildet er ferdig lastet, tegner det til lerretet
bilde.onload = () => {
// tegne bildet
};

// Klikk angi kilden for bildet som vi ønsker å legge
bilde.src = src;
}

Nå er vi legg til et bilde for å erstatte sprinkles Salt Bae er å kaste. For det første, vi legg bilde ved å bruke en av de teknikkene jeg har nevnt tidligere, så trekker vi den til skjermen som vi gjorde med Salt Bae base bilde.

funksjonen getRandomInt(min, maks) {
min = Matematikk.ceil(min);
maks = Matematikk.gulv(max);
tilbake Matematikk.gulv(Matematikk.tilfeldig() * (max – min)) + min; //maksimum er eksklusive og minimum er inclusive
}

funksjonen drawBackgroundImage(lerret, ctx) {
ctx.clearRect(0, 0, lerret.bredde, lerret.høyde);
const img = – dokument.bürgerliches(‘salt-bae’);
ctx.drawImage(img, 0, 0, lerret.bredde, lerret.høyde);
}

funksjonen getRandomImageSize(min, maks, bredde, høyde) {
const ratio = bredde / høyde; // Brukes for størrelsesforholdet
bredde = getRandomInt(min, maks);
høyde = bredde / ratio;
tilbake { bredde, høyde };
}

funksjonen drawSalt(src, lerret, ctx) {
// Lager et bilde objekt. (Ikke en del av dom)
const bilde = new Image();
bilde.src = src;

// Når bildet er ferdig lastet, tegner det til lerretet
bilde.onload = function() {
for (la i = 0; i < 8; i++) {
const randomX = getRandomInt(10, lerret.bredde/2);
const randomY = getRandomInt(lerret.høyde-300, lerret.høyde);
const mål = getRandomImageSize(20, 100, som bilde.bredde, som bilde.høyde);
ctx.drawImage(bilde, randomX, randomY, dimensjoner.bredde, dimensjoner.høyde);
}
}
return bilde;
}

onload = function() {
const lerret = – dokument.bürgerliches(‘lerret’);
const ctx = lerret.getContext(‘2d’);
drawBackgroundImage(lerret, ctx);
const saltImage = drawSalt(‘http://res.cloudinary.com/dlwnmz6lr/image/upload/v1526005050/chadwick-boseman-inspired-workout-program-wide_phczey.webp’, lerret, ctx);
};

Nå kan vi la brukere dryss noe annet enn sprinkles.

Laste opp et bilde

Vi kommer til å legge til en knapp som utløser et bilde opplasting og inkluderer en hendelse lytteren til å lytte til en forandring.

<input type=”fil” class=”last opp bilde”>`
funksjonen updateImage(fil, img){
img.src = URL.createObjectURL(fil);
}

onload = function() {
const lerret = – dokument.bürgerliches(‘lerret’);
const ctx = lerret.getContext(‘2d’);
drawBackgroundImage(lerret, ctx);
const saltImage = drawSalt(‘http://res.cloudinary.com/dlwnmz6lr/image/upload/v1526005050/chadwick-boseman-inspired-workout-program-wide_phczey.webp’, lerret, ctx);
const input = – dokument.querySelector(“input[type= “fil”]”);
/*
* Legg til hendelse som lytter til innspill for å lytte til endringer til valgt
* verdien er, jeg.e når filene er valgt
*/
input.addEventListener(‘endre’, function() {
drawBackgroundImage(lerret, ctx); // fjern lerret og re-draw
updateImage(denne.filer[0], saltImage);
});
};

URL-en.createObjectURL() oppretter en DOMString som inneholder en URL som representerer objekt gitt i parameteren som i dette tilfellet, er den opplastede filen.

Vi kan til og med opp spillet litt, som å gi noen standard valg. Jeg har lagt til et par emojis du kan spille rundt med som utgangspunkt.

Å laste ned den endelige bildet

Når den nye meme har blitt generert, vi vil at brukerne skal være i stand til å laste ned og dele det. Den typiske måten å gjøre dette på er ved å åpne lerretet i en ny fane ved å bruke toDataURL metoden, men brukeren høyreklikk for å lagre bildet fra denne kategorien og det er ikke veldig praktisk.

Så, i stedet kan vi dra nytte av last ned-attributtet lagt til linker i HTML5. Vi opprette en kobling som, på klikk, setter laste ned attributtet til resultatet av lerretet.toDataURL. Den toDataURL () – metoden “gir en data URI inneholder en representasjon av bildet i det formatet som er angitt.”

funksjonen addLink() {
var link = – dokument.createElement(‘a’);
link.innerHTML = ‘Last ned!’;
link.addEventListener(‘click’, function(e) {
link.href = lerret.toDataURL();
link.last ned = “salt-bae.png”;
}, false);
link.className = “instruksjon”;
dokumentet.querySelectorAll(‘seksjon’)[1].appendChild(link);
}

Vel det er det! Våre meme generator er gjort.

Noen kule linker

  • Darius Kazemi har vært å lage en haug av roboter som genererer memer.
  • Vox Media har et meme generator heter meme som er åpen kildekode.

Meme unna!

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men sikkerhet og sikkerhetskopiering, Markdown-støtte, søk nettstedet, kommentar form, sosiale nettverk-tilkoblinger, og mer!