Het creëren van je eigen meme generator

0
39

Bijna elke keer een nieuwe meme opduikt in mijn feed, ik denk van een geestige versie te maken. Ik ben niet alleen in deze. Memen zijn vaak een manier om te erkennen van een gedeelde ervaring of idee. In een variatie op de “Is dit een duif” meme, dat is het maken van de rondes online, een ontwerper Daryl Ginn grapte over het elementaire karakter van de meeste toepassingen die zeggen dat ze gebruik maken van kunstmatige intelligentie.

pic..com/nAHki0YFyV

— Daryl Ginn (@darylginn) 16 Mei 2018

Meerdere mensen beantwoord zijn tweet te zeggen iets in de trant van “deze vervangen met deze.” Daryl ‘ s versie heb ze na te denken over andere mogelijke variaties. Platforms als imgFlip bestaan om meme generaties snel en gemakkelijk. Echter, er is alleen zo veel maatwerk ze kunnen toestaan. Voor veel memes, het creëren van nieuwe versies kunnen alleen worden gedaan door mensen met Photoshop kennis. Maar het hoeft niet zo te zijn! Voor sommige memen die meer nodig hebben dan Gevolgen voor het lettertype van een tekst, een meme generator kan worden gemaakt met behulp van de HTML-Canvas-API. In deze tutorial gaan we een generator voor de #saltbae meme.

Maar eerst…

Laten we eens enkele leuke interactieve meme voorbeelden!

De website van pablo.het leven kun je je eigen Kanye West TLOP album cover door het veranderen van de tekst en het beeld.

Dit is een van mijn favorieten:

Het digitale agentschap R/GA gemaakt van de Straight Outta Ergens campagne waar gebruikers “de wereld laten zien waar ze vandaan komen door het uploaden van hun eigen foto en het invullen van de spatie na ‘Straight Outta ____.'” Gebruikers kunnen downloaden en delen van de meme.

Ontwikkelaar Isaac Hepworth gemaakt en de Bazuin Executive Order Generator.

Spotify samen met Migos maken van een downloadbare Valentijnsdag kaarten die kunnen worden aangepast door het wijzigen van namen.

We bouwen onze eigen meme generator!

Nu, de tutorial. In een populaire versie van de #saltbae meme, in plaats van zout, Zout Bae (waarvan de naam is Nusret Gökçe) hagelslag iets anders dan zout.

Laden van een afbeelding

Het eerste wat we moeten doen, is het laden van de originele afbeelding op het doek. U kunt het laden van een afbeelding een van de volgende twee manieren: via een URL of van die voorkomt in de DOM met de <img> – tag, maar is verborgen.

Hier is hoe we het doen met een verborgen image-tag:

<canvas id=”canvas” width=”1024″ height=”1024″>
Canvas vereist een browser die ondersteuning biedt voor HTML5.
</canvas>
<img crossOrigin=”Anonymous” id=”zout-bae” src=”http://res.cloudinary.com/dlwnmz6lr/image/upload/v1520011253/170203-salt-bae-mn-1530_060e5898cdcf7b58f97126d3cfbfdf71.nbcnews-ux-2880-1000_kllh1d.jpg”/>

Ik ben het hosten van het beeld op Cloudinary en voegde de crossOrigin kenmerk, zodat we niet in de CORS problemen.

functie drawImage(tekst) {
const canvas = document.getElementById(‘canvas’);
const ctx = canvas.getContext(‘2d’);
ctx.clearRect(0, 0, canvas.de breedte van het canvas.hoogte);
const img = document.getElementById(‘zout-bae’);
ctx.drawImage(img, 0, 0, canvas.de breedte van het canvas.hoogte);
}

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

We gebruiken het doek drawImage functie voor het tekenen van de afbeelding op het doek. Het kan worden gebruikt voor het trekken van video ‘ s of delen van een afbeelding. De methode biedt verschillende manieren om dit te doen. We zijn het tekenen van de afbeelding door het aangeven van de positie en de breedte en hoogte van de afbeelding.

ctx.drawImage(img, x, y, width, height);

Als alternatief, we zouden het laden van de afbeelding van een URL:

functie loadAndDrawImage(src) {
// Maak een object afbeelding. (Geen onderdeel van de dom)
const afbeelding = new Image();

// Nadat de afbeelding is geladen, het vestigen van het doek
afbeelding.onload = () => {
// teken afbeelding
};

// Stel de bron van de afbeelding die we willen laden
afbeelding.src = src;
}

Nu laden we in een afbeelding te vervangen door de hagelslag Zout Bae gooien. Eerst laden we de afbeelding met behulp van een van de technieken die ik eerder noemde, dan trekken wij naar het scherm zoals we dat deden met het Zout Bae basis afbeelding.

functie getRandomInt(min, max) {
min = Wiskunde.ceil(min);
max = Wiskunde.vloer(max);
terug Math.verdieping(Math.random() * (max – min)) + min; //De maximale is exclusief en de minimale is inclusief
}

functie drawBackgroundImage(canvas, ctx) {
ctx.clearRect(0, 0, canvas.de breedte van het canvas.hoogte);
const img = document.getElementById(‘zout-bae’);
ctx.drawImage(img, 0, 0, canvas.de breedte van het canvas.hoogte);
}

functie getRandomImageSize(min, max, breedte, hoogte) {
const ratio = breedte / hoogte; // Gebruikt voor de aspect ratio
breedte = getRandomInt(min, max);
hoogte = breedte / hoogteverhouding;
terug { width, height };
}

functie drawSalt(src, canvas, ctx) {
// Maak een object afbeelding. (Geen onderdeel van de dom)
const afbeelding = new Image();
afbeelding.src = src;

// Nadat de afbeelding is geladen, het vestigen van het doek
afbeelding.onload = function() {
voor (i = 0; i < 8; i++) {
const randomX = getRandomInt(10, canvas.breedte/2);
const randomY = getRandomInt(canvas.hoogte 300, canvas.hoogte);
const afmetingen = getRandomImageSize(20, 100, beeld.breedte afbeelding.hoogte);
ctx.drawImage(beeld, randomX, randomY, afmetingen.breedte afmetingen.hoogte);
}
}
terug 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);
};

Nu kunnen we laten gebruikers bestrooi iets anders dan hagelslag.

Met het uploaden van een afbeelding

We gaan het toevoegen van een knop voor het activeren van een afbeelding te uploaden en voorzien van een event-listener te luisteren voor een verandering.

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

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 aan de ingang om te luisteren voor wijzigingen aan in de geselecteerde
* waarde, ik.e wanneer de bestanden zijn geselecteerd
*/
input.addEventListener(‘change’, function() {
drawBackgroundImage(canvas, ctx); // clear canvas en re-draw
updateImage(deze.bestanden[0], saltImage);
});
};

URL.createObjectURL() maakt een DOMString met een URL die het object vertegenwoordigt gegeven in de parameter, in dit geval, is het te uploaden bestand.

We kunnen zelfs tot het spel een beetje, zoals het verstrekken van een aantal standaard opties. Ik heb nog een paar emojis die je kunt spelen rond met als uitgangspunt.

Het downloaden van de uiteindelijke afbeelding

Zodra de nieuwe meme is gegenereerd, we willen dat gebruikers kunnen downloaden en delen. De typische manier om dit te doen is door het openen van het doek in een nieuwe tab met de toDataURL methode, maar de gebruiker zou hebben recht op slaat u de afbeelding van dat tabblad en dat is niet erg handig.

Dus, in plaats daarvan kunnen we gebruik maken van de download-attribuut toegevoegd aan de links in HTML5. We maken een koppeling die, op klikt, wordt het downloaden kenmerk van het resultaat van canvas.toDataURL. De toDataURL() methode “geeft een data-URI-met een vertegenwoordiging van de afbeelding in de notatie die gespecificeerd is.”

functie addLink() {
var link = document.createElement(‘a’);
de link.innerHTML = ‘Downloaden’;
de link.addEventListener(‘click’, function(e) {
de link.href = canvas.toDataURL();
de link.downloaden = “zout-bae.png”;
}, false);
de link.className = “instructie”;
document.querySelectorAll(‘section’)[1].appendChild(link);
}

Nou dat is het! Onze meme generator is gedaan.

Sommige koele links

  • Darius Kazemi is het maken van een bos van bots die het genereren van memen.
  • Vox Media heeft een meme generator genoemd meme, dat is open source.

Meme weg!

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!