Fast jedes Mal, wenn ein neuer Meme in meinem Twitter-Feed auftaucht, denke ich mir eine witzige Version aus, die ich erstellen könnte. Damit bin ich nicht allein. Memes sind oft eine Möglichkeit, eine gemeinsame Erfahrung oder Idee anzuerkennen. In einer Variation des Memes „Ist das eine Taube?“, das online die Runde macht, scherzte ein Designer Daryl Ginn über die elementare Natur der meisten Anwendungen, die behaupten, künstliche Intelligenz zu verwenden.
https://twitter.com/darylginn/status/996541055192453120
Mehrere Personen antworteten auf seinen Tweet mit etwas wie „ersetze das durch das.“ Daryls Version brachte sie zum Nachdenken über andere mögliche Variationen. Plattformen wie imgFlip existieren, um die Erstellung von Memes schnell und einfach zu machen. Allerdings erlauben sie nur eine begrenzte Anpassung. Für viele Memes können neue Versionen nur von Personen mit Photoshop-Kenntnissen erstellt werden. Aber das muss nicht sein! Für einige Memes, die mehr als nur die Schriftart Impact für den Text auf einem Bild erfordern, kann ein Meme-Generator mit der HTML Canvas API erstellt werden. In diesem Tutorial erstellen wir einen Generator für das #saltbae-Meme.
Aber zuerst...
Schauen wir uns einige lustige interaktive Meme-Beispiele an!
Die Website pablo.life ermöglicht es Ihnen, Ihr eigenes Kanye West TLOP-Albumcover zu erstellen, indem Sie den Text und das Bild ändern.
Das ist einer meiner Favoriten
Die Digitalagentur R/GA hat die Kampagne Straight Outta Somewhere ins Leben gerufen, bei der Benutzer „der Welt zeigen, woher sie kommen, indem sie ihr eigenes Foto hochladen und den Blank nach „Straight Outta ____.“ ausfüllen.“ Benutzer können den Meme herunterladen und teilen.
Der Entwickler Isaac Hepworth hat den Trump Executive Order Generator erstellt.
Spotify hat mit Migos zusammengearbeitet, um eine Reihe von herunterladbaren Valentinstagskarten zu erstellen, die durch Ändern der Namen angepasst werden können.
Lassen Sie uns unseren eigenen Meme-Generator bauen!
Nun zum Tutorial. In einer beliebten Version des #saltbae-Memes streut Salt Bae (dessen Name Nusret Gökçe ist) anstelle von Salz etwas anderes als Salz.
Laden eines Bildes
Das erste, was wir tun müssen, ist das Originalbild auf die Leinwand zu laden. Sie können ein Bild auf zwei Arten laden: von einer URL oder von einem, das im DOM vorhanden ist und ein verstecktes <img>-Tag verwendet.
So machen wir das mit einem versteckten Bild-Tag
<canvas id="canvas" width="1024" height="1024">
Canvas requires a browser that supports HTML5.
</canvas>
<img crossOrigin="Anonymous" id="salt-bae" src="http://res.cloudinary.com/dlwnmz6lr/image/upload/v1520011253/170203-salt-bae-mn-1530_060e5898cdcf7b58f97126d3cfbfdf71.nbcnews-ux-2880-1000_kllh1d.jpg"/>
Ich hoste das Bild auf Cloudinary und habe das Attribut crossOrigin hinzugefügt, damit wir keine CORS-Probleme bekommen.
function drawImage(text) {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
const img = document.getElementById('salt-bae');
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
window.onload = function() {
drawImage();
}Wir verwenden die Canvas-Funktion drawImage, um das Bild auf die Leinwand zu zeichnen. Sie kann auch verwendet werden, um Videos oder Teile eines Bildes zu zeichnen. Die Methode bietet verschiedene Möglichkeiten, dies zu tun. Wir zeichnen das Bild, indem wir die Position sowie die Breite und Höhe des Bildes angeben.
ctx.drawImage(img, x, y, width, height);Alternativ könnten wir das Bild von einer URL laden
function loadAndDrawImage(src) {
// Create an image object. (Not part of the dom)
const image = new Image();
// After the image has loaded, draw it to the canvas
image.onload = () => {
// draw image
};
// Then set the source of the image that we want to load
image.src = src;
}Jetzt laden wir ein Bild, um die Streusel zu ersetzen, die Salt Bae wirft. Zuerst laden wir das Bild mit einer der zuvor erwähnten Techniken, dann zeichnen wir es auf den Bildschirm, wie wir es mit dem Salt Bae-Basisbild gemacht haben.
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}
function drawBackgroundImage(canvas, ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const img = document.getElementById('salt-bae');
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
function getRandomImageSize(min, max, width, height) {
const ratio = width / height; // Used for aspect ratio
width = getRandomInt(min, max);
height = width / ratio;
return { width, height };
}
function drawSalt(src, canvas, ctx) {
// Create an image object. (Not part of the dom)
const image = new Image();
image.src = src;
// After the image has loaded, draw it to the canvas
image.onload = function() {
for (let i = 0; i < 8; i++) {
const randomX = getRandomInt(10, canvas.width/2);
const randomY = getRandomInt(canvas.height-300, canvas.height);
const dimensions = getRandomImageSize(20, 100, image.width, image.height);
ctx.drawImage(image, randomX, randomY, dimensions.width, dimensions.height);
}
}
return image;
}
onload = function() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
drawBackgroundImage(canvas, ctx);
const saltImage = drawSalt('http://res.cloudinary.com/dlwnmz6lr/image/upload/v1526005050/chadwick-boseman-inspired-workout-program-wide_phczey.webp', canvas, ctx);
};Jetzt können wir Benutzern erlauben, etwas anderes als Streusel zu streuen.
Hochladen eines Bildes
Wir werden einen Button hinzufügen, der einen Bild-Upload auslöst und einen Event-Listener enthält, der auf eine Änderung hört.
<input type="file" class="upload-image">`function updateImage(file, img){
img.src = URL.createObjectURL(file);
}
onload = function() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
drawBackgroundImage(canvas, ctx);
const saltImage = drawSalt('http://res.cloudinary.com/dlwnmz6lr/image/upload/v1526005050/chadwick-boseman-inspired-workout-program-wide_phczey.webp', canvas, ctx);
const input = document.querySelector("input[type='file']");
/*
* Add event listener to the input to listen for changes to its selected
* value, i.e when files are selected
*/
input.addEventListener('change', function() {
drawBackgroundImage(canvas, ctx); // clear canvas and re-draw
updateImage(this.files[0], saltImage);
});
};URL.createObjectURL() erstellt eine DOMString, die eine URL darstellt, die sich auf das im Parameter angegebene Objekt bezieht, in diesem Fall die hochgeladene Datei.
Wir können das Ganze sogar noch ein wenig aufpeppen, indem wir zum Beispiel einige Standardoptionen anbieten. Ich habe ein paar Emojis hinzugefügt, mit denen Sie als Ausgangspunkt experimentieren können.
Herunterladen des fertigen Bildes
Sobald der neue Meme generiert ist, möchten wir, dass Benutzer ihn herunterladen und teilen können. Die übliche Methode dafür ist, die Leinwand in einem neuen Tab mit der Methode toDataURL zu öffnen, *aber* der Benutzer müsste mit der rechten Maustaste klicken, um das Bild aus diesem Tab zu speichern, und das ist nicht sehr praktisch.
Stattdessen können wir das download-Attribut, das HTML5-Links hinzugefügt wurde, nutzen. Wir erstellen einen Link, der beim Anklicken das Download-Attribut auf das Ergebnis von canvas.toDataURL setzt. Die Methode toDataURL() „gibt eine Daten-URI zurück, die eine Darstellung des Bildes im angegebenen Format enthält.“
function addLink() {
var link = document.createElement('a');
link.innerHTML = 'Download!';
link.addEventListener('click', function(e) {
link.href = canvas.toDataURL();
link.download = "salt-bae.png";
}, false);
link.className = "instruction";
document.querySelectorAll('section')[1].appendChild(link);
}Das war's! Unser Meme-Generator ist fertig.
Einige coole Links
- Darius Kazemi hat eine Reihe von Twitter-Bots erstellt, die Memes generieren.
- Vox Media hat einen Meme-Generator namens meme, der Open Source ist.
Meme'en Sie los!
Tolle Arbeit