Comment créer un meme avec HTML5 et JavaScript

de manière simple, nous allons créer le célèbre meme qui pourrait être « des images pour qu’un texte soit ajouté pour créer une blague graphique ou une joda » .

brève explication:
Avant d’entrer dans le code et dites-moi, mais nous pouvons ajouter cela et l’autre. Ceci est un exemple de messieurs, que l’idée est que vous pouvez l’améliorer.

où il se compose:
Une image est téléchargée, un texte est ajouté et génère l’image pour ensuite le télécharger en cliquant sur la droite.

Si:
Toutes nos logiques sont Sommarisé Script Suivant

var img, canvas, context;function SubirImagen(){ canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); canvas.width = 700; canvas.height = 500; // Cargamos el objeto que nos permite subir imagenes var imagen = document.getElementById("imagen"); if(imagen.files.length == 0) { alert('Debe ingresar una imagen'); return; } // Creamos la imagen img = new Image(); img.src = URL.createObjectURL(imagen.files); img.onload = function() { // Dibujamos la imagen context.drawImage(img, 0, 0, canvas.width, canvas.height); }; // Mostramos el canvas document.getElementById("meme").style.display = 'block';}function AgregarTexto(){ // Cargamos la caja de texto var texto = document.getElementById("texto"); img.src = URL.createObjectURL(imagen.files); img.onload = function() { // Dibujamos la imagen context.drawImage(img, 0, 0, canvas.width, canvas.height); // Agregamos el texto context.lineWidth = 5; context.font = '30pt sans-serif'; context.strokeStyle = 'black'; context.fillStyle = 'white'; context.textAlign = 'center'; texto = texto.value.toUpperCase(); var x = canvas.width/2; var y = canvas.height - 40; context.strokeText(texto, x, y); context.fillText(texto, x, y); };}
  • Nous déclarons 2 variables globales, car nous garderons l’objet Canvas et notre contexte à utiliser.

  • la fonction uplagen () () Ce qu’il fait est au moment de la sélection d’une image à l’aide du fichier d’entrée, cela le rendant dans notre objet en toile.

  • la fonction complémentaire ajout () Qu’est-ce que c’est que lorsque quelque chose est écrit dans notre boîte Tex Pour recharger l’image plus le texte ajouté de notre objet toile.

dans la fonction addtext () J’ai ajouté des commentaires afin qu’il soit mieux compris:

context.lineWidth = 5; // Grosor del bordecontext.font = '30pt sans-serif'; // tamaño de letra y tipo de fuentecontext.strokeStyle = 'black'; // color de la sombracontext.fillStyle = 'white'; // color del textocontext.textAlign = 'center'; // alineación del textotexto = texto.value.toUpperCase(); // lo pasamos a mayasculavar x = canvas.width/2; // para decirle que el texto comience justo al mediovar y = canvas.height - 40; // le decimos que el texto comience al final menos ¿40px?context.strokeText(texto, x, y); // creamos la sombracontext.fillText(texto, x, y); // creamos el texto

Notre code HTML est très simple

<div> <p>SELECCIONE UNA IMAGEN A SUBIR</p> <div class="form-control"> <input type="file" /> </div> <div class="form-control"> <button onclick="SubirImagen();">Renderizar</button> </div></div><div class="none"> <div class="form-control"> <input type="text" onkeyup="AgregarTexto();" placeholder="Texto que desea agregar" maxlength="20" autocomplete="off" /> </div> <canvas></canvas> <div class="form-control"> <p><b>Click derecho</b> y <b>guardar imagen como</b> para descargar</p> </div></div>

Leave a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *