Meme generator + Tutorial — Vincent's Weblog

ik heb een meme generator gemaakt: meme generator

Tutorial

1. Maak de webpagina

Open een nieuw tekstdocument en sla het op als .html . De html code hieronder geeft je document de basisstructuur.

<html>
<head>
  <title>Cat meme generator</title>
</head>
<body>
  <h1>Het werkt!</h1>
</body>
</html>

Als je dit opent in een webbrowser zoals google chrome dan zou je "het werkt!" in het groot moeten zien

2. De foto en de tekst verkrijgen

Een meme bestaat meestal uit 2 onderdelen, een foto en tekst. Om deze te verzamelen gebruiken we een form.

In het form kun je Het volgende zetten:

<form>
Kies een foto: <input type="file" id="user_picture"><p>
Meme tekst: <input type="text" id="user_text" maxlength="70"><p>
</form>

3. De meme maken

We moeten een gebied maken waar de meme komt te staan waneer een afbeelding en tekst is opgegeven. De eerste voor de tekst, en de 2e voor de afbeelding. Hiervoor gebruiken we een <div> tag, deze zijn voor niet tekst elementen.

<div id="meme_text">Voorbeeldtekst</div>

En voeg er nu nog een aan toe voor de afbeelding, met een <img> tag erin.

<div id="meme_picture"><img src="" height="500" width="600"></div>

Sla op en open het document in een browser, nu zou je een wit kader moeten zien, met daarboven de "kies bestand" en "meme tekst" velden en dan "voorbeeldtekst", maar zoals je ziet is die tekst nog niet het lettertype voor een meme

Tussen de <head> tags vanboven in je document zet daar

<style type="text/css">
</style>

Dat is om bepaalde elementen een uiterlijk te geven. Zet volgende code tussen de <style> en </style> tags om aanteduiden dat de code binnen deze tags css is. Deze zorgt dat het element met id ( aangeduid met een #) meme_text. Volgende specificaties krijgen

#meme_text {
    background-color: transparent;
    font-size: 40px;
    font-family: "Impact";
    color: white;
    text-shadow: black 0px 0px 10px;
    width: 600px;
    position: absolute;
    left: 15px;
    top: 400px;
}

de left: 15px; en top: 400px; elementen bepalen hoever de tekst van links en de bovenkant van de pagina is.

Vernieuw de pagina en je zult zien dat de voorbeeld tekst er nu beter uitziet.

4. De tekst weergeven

Tot nu hebben we de html code geschreven die zorgt hoe de pagina eruit ziet, nu moeten we zorgen dat de ingevoegde tekst word weergegeven dat gaan we doen met Javascript. Maak onder de <div> tags volgende code aan. Dat is om weer te geven dat de code binnen deze tags Javascript is.

<script type="text/javascript">
</script>

Binnen deze tags moeten we een eerste functie maken die zorgt dat de tekst word geupdate.

function update_text(){

}

Deze code zorgt ervoor dat alles tussen de { } haakjes word uitevoerd wanneer update_text(); word uitevoerd. Nu moeten we nog zorgen dat er werkelijk iets word uitgevoerd.

var user_text = document.getElementById("user_text");

Dit zorgt dat de variable user_text gelijk komt met de ingevoegde tekst

var meme_text = document.getElementById("memetext");
meme_text.innerHTML = user_text.value;

Dit zorgt ervoor dat de tekst word weergegeven. Nu moet je het tekst invoegveld aanpassen door er oninput="update_text()" aan toe te voegen. Dat zorgt dat de functie word uitgevoerd zodra je er iets intypt, waardoor het ook direct aangepast word.

<p>meme tekst: <input type="text" id="user_text" maxlength="70" oninput="update_text()"><p>

Sla op en ververs de pagina. Nu zou je de tekst moeten zien veranderen zodra je er iets in begint te typen.

5. de afbeelding weergeven

Maak nu een nieuwe functie aan tussen de script tags genaamd update_image Net zoals in het vorige voorbeeld. In de functies, maak opnieuw twee variables

function update_image(){
  var img = document.querySelector('img');
  var file = document.querySelector('input[type=file]').files[0];
}

De eerste variable selecteert de eerste (en eenige) <img> tag. De tweede verwijst naar die afbeelding. Om te zorgen dat de afbeelding word weergegeven voeg volgende code toe aan de functie.

img.src = window.URL.createObjectURL(file);

Het totale script:

// Update image onto the screen
function update_image(){
    var img = document.querySelector('img'); // Returns the first img element
    var file = document.querySelector('input[type=file]').files[0]; // Returns the first file element found
    img.src =  window.URL.createObjectURL(file);

}

// Write the text onto the meme
function update_text(){
  var user_text = document.getElementById("user_text");
    var meme_text = document.getElementById("meme_text");
    meme_text.innerHTML = user_text.value;
}

Sla het nu op en herlaad de pagina. Nu zou alles moeten werken. en kan je memes maken.