Erstellen Sie Ihre eigenen meme-generator

0
45

Fast jedes mal, wenn ein neues meme taucht in meinem feed, ich denke, der eine witzige version zu erstellen. Ich bin nicht allein in diesem. Meme sind oft ein Weg, zu erkennen an einer gemeinsamen Erfahrung oder eine Idee. In einer variation von “Ist das eine Taube” meme wurde, macht die Runde online, designer Daryl Ginn scherzte über die Elementare Natur der meisten Anwendungen, die sagen, Sie verwenden die künstliche Intelligenz.

pic..com/nAHki0YFyV

— Daryl Ginn (@darylginn) Mai 16, 2018

Mehrere Leute geantwortet seinem tweet sagen etwas entlang der Linien von “ersetzen mit diesem.” Daryl s version brachte Sie zum nachdenken über andere mögliche Varianten. Plattformen wie imgFlip vorhanden, um meme Generationen schnell und einfach. Jedoch, es ist nur so viel Anpassung erlauben zu können. Für viele meme, die Schaffung neuer Versionen können nur durchgeführt werden von Personen mit Photoshop-Kenntnisse. Aber es muss nicht so sein! Für einige memes, die mehr verlangen als die Auswirkungen für die schriftart einen text über ein Bild, ein meme-generator erstellt werden können mit dem HTML-Canvas-API. In diesem tutorial werden wir einen generator für die #saltbae meme.

Aber zuerst…

Schauen wir uns einige lustige interaktive meme Beispiele!!!

Die website pablo.Leben können Sie erstellen Sie Ihre eigenen Kanye West TLOP album-cover, indem Sie den text ändern und Bild.

Dies ist einer meiner Favoriten:

Die digital-Agentur R/GA angelegt, die Straight Outta Irgendwo Kampagne, wo die Nutzer “der Welt zu zeigen, Woher Sie kommen durch das hochladen Ihrer eigenen Fotos und füllt die leere nach ‘Straight Outta ____.'” Benutzer können herunterladen und teilen Sie die meme.

Entwickler Isaac Hepworth erstellt Trump Executive Order Generator.

Spotify zusammen mit Migos, um eine Reihe von herunterladbaren Valentinstag-Karten kann angepasst werden durch ändern der Namen.

Wir bauen unser eigenes meme generator!

Nun, das tutorial. In einer beliebten version der #saltbae meme, anstelle von Salz, Salz Bae (dessen name Nusret Gökçe) die Streusel etwas anderes als Salz.

Laden Sie ein Bild

Das erste, was wir tun müssen, ist, laden Sie den original-Bild auf die Leinwand. Laden Sie das Bild, das man von zwei Arten: von einer URL oder aus einer, den es in den DOM mit dem <img> – tag, aber ist ausgeblendet.

Hier ist, wie wir es tun, mit einem versteckten Bild-Tags:

<canvas id=”canvas” width=”1024″ height=”1024″>
Leinwand erfordert einen browser, der HTML5 unterstützt.
</canvas>
<img crossOrigin=”Anonymous” id=”Salz-bae” src=”http://res.cloudinary.com/dlwnmz6lr/image/upload/v1520011253/170203-salt-bae-mn-1530_060e5898cdcf7b58f97126d3cfbfdf71.nbcnews-ux-2880-1000_kllh1d.jpg”/>

Ich bin hosting das Bild auf Cloudinary und fügte hinzu, die crossOrigin-Attribut, so dass wir nicht in eine CORS Probleme.

Funktion drawImage(text) {
const canvas = document.getElementById(‘canvas’);
const ctx = canvas.getContext(‘2d’);
ctx.clearRect(0, 0, canvas.width, canvas.Höhe);
const img = document.getElementById(‘Salz-bae’);
ctx.drawImage(img, 0, 0, canvas.width, canvas.Höhe);
}

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

Wir sind mit dem canvas drawImage-Funktion zum zeichnen des Bildes auf die Leinwand. Es kann verwendet werden, um zu zeichnen, videos oder Teile eines Bildes als gut. Die Methode bietet verschiedene Möglichkeiten, dies zu tun. Wir ziehen das Bild unter Angabe der position und die Breite und Höhe des Bildes.

ctx.drawImage(img, x, y, Breite, Höhe);

Alternativ könnten wir laden das Bild von einer URL:

Funktion loadAndDrawImage(src) {
// Erstellen Sie ein Bild-Objekt. (Nicht Teil des dom)
const image = new image();

// Nachdem das Bild geladen ist, ziehen Sie es auf die Leinwand
Bild.onload = () => {
// draw image
};

// Dann die Quelle von dem Bild, das wir laden wollen
Bild.src = src;
}

Jetzt laden wir in einem Bild zu ersetzen, die Streusel Salz Bae wirft. Zuerst laden wir das Bild mit einer der Techniken, die ich erwähnte früher, dann ziehen wir ihn auf dem Bildschirm wie wir es mit dem Salz Bae Basis-image.

Funktion getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.Stock(max.);
return Math.floor(Math.random() * (max – min)) + min; //Das maximum ist exklusiv und das minimum ist inclusive
}

Funktion drawBackgroundImage(Leinwand, ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.Höhe);
const img = document.getElementById(‘Salz-bae’);
ctx.drawImage(img, 0, 0, canvas.width, canvas.Höhe);
}

Funktion getRandomImageSize(min, max, Breite, Höhe) {
const ratio = width / height; // Verwendet für das Seitenverhältnis
Breite = getRandomInt(min, max);
Höhe = / Breite-Verhältnis;
return { width, height };
}

Funktion drawSalt(src, Leinwand, ctx) {
// Erstellen Sie ein Bild-Objekt. (Nicht Teil des dom)
const image = new image();
Bild.src = src;

// Nachdem das Bild geladen ist, ziehen Sie es auf die Leinwand
Bild.onload = function() {
for (let i = 0; i < 8; i++) {
const randomX = getRandomInt(10, Leinwand.Breite/2);
const randomY = getRandomInt(canvas.Höhe-300, Leinwand.Höhe);
const Abmessungen = getRandomImageSize(20, 100, image.width, Bild.Höhe);
ctx.drawImage(Bild, randomX, randomY, Dimensionen.Breite, Dimensionen.Höhe);
}
}
return Bild;
}

onload = function() {
const canvas = document.getElementById(‘canvas’);
const ctx = canvas.getContext(‘2d’);
drawBackgroundImage(Leinwand, ctx);
const saltImage = drawSalt(‘http://res.cloudinary.com/dlwnmz6lr/image/upload/v1526005050/chadwick-boseman-inspired-workout-program-wide_phczey.webp’, Leinwand, ctx);
};

Jetzt können wir Nutzer streuen Sie etwas anderes als Streusel.

Das hochladen eines Bildes

Wir fügen Sie eine Schaltfläche löst ein Bild hochladen und enthält einen Ereignis-listener hört für einen Wechsel.

<input type=”file” class=”upload-image”>`
Funktion updateImage(Datei, img){
img.src = URL.createObjectURL(Datei);
}

onload = function() {
const canvas = document.getElementById(‘canvas’);
const ctx = canvas.getContext(‘2d’);
drawBackgroundImage(Leinwand, ctx);
const saltImage = drawSalt(‘http://res.cloudinary.com/dlwnmz6lr/image/upload/v1526005050/chadwick-boseman-inspired-workout-program-wide_phczey.webp’, Leinwand, ctx);
const Eingabe = document.querySelector(“input[type=’file’]”);
/*
* Fügen Sie Ereignis-listener, um die Eingabe zu hören für änderungen an der ausgewählten
* Wert, ich.e-Mail, wenn Dateien ausgewählt sind
*/
input.addEventListener(‘change’, function() {
drawBackgroundImage(Leinwand, ctx); // clear canvas und re-draw
updateImage(dies.files[0], saltImage);
});
};

URL.createObjectURL() erzeugt ein DOMString enthält eine URL repräsentieren das Objekt in der parameter-in diesem Fall, ist die hochgeladene Datei.

Wir können auch das Spiel ein bisschen wie mit einigen Standard-Optionen. Ich habe noch ein paar emojis können Sie spielen, um mit, als Ausgangspunkt.

Herunterladen das Letzte Bild

Sobald die neue meme erzeugt worden ist, wir möchten, dass Benutzer in der Lage, herunterladen und teilen Sie es. Die typische Art und Weise, dies zu tun ist durch öffnen der Leinwand in einem neuen tab mit der toDataURL-Methode, aber der user müsste rechts klicken Sie auf speichern, um das Bild von diesem tab und das ist nicht sehr bequem.

Anstatt also, wir können die Vorteile der download-Attribut Hinzugefügt, um links in HTML5. Wir erstellen einen link, der auf klicken Sie auf, legt die download-Attribut, um das Ergebnis der Leinwand.toDataURL. Die toDataURL () – Methode “gibt eine data-URI enthält eine Darstellung des Bildes in dem format angegeben.”

function addLink() {
var link = document.createElement(‘a’);
link.innerHTML = ‘Download!’;
link.addEventListener(‘click’, function(e) {
link.href = canvas.toDataURL();
link.download = “Salz-bae.png”;
}, false);
link.className = “Befehl”;
Dokument.querySelectorAll(‘section’)[1].appendChild(link);
}

Nun, das ist es! Unsere meme-generator ist fertig.

Ein paar Coole links

  • Darius Kazemi hat bereits eine Reihe von bots, die meme zu generieren.
  • Vox Media hat einen meme generator, meme genannt, dass open-source.

Meme entfernt!

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!