Com crear un meme amb html5 i javascript

De manera senzilla anem a crear els famosos MEME la qual cosa podria ser “imatges perquè se li afegeix un text per fer una broma gràfica o foti”.

Explicació breu: amor Abans d’entrar a el codi i em diguin, però podem afegir això i allò altre .. això és un EXEMPLE senyors, el qual la idea és que vostès el puguin millorar.

En què consisteix: a es puja una imatge, s’agrega un text i genera la imatge per després descarregar-donant click dret.

Ara si: a Tota la nostra lògica es resumeix a l’ següent script

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); };}
  • Declarem 2 variables globals ja que aquí guardarem a l’objecte canvas i el nostre context a utilitzar.

  • la funció SubirImagen () el que fa és a l’hora de seleccionar un imatge mitjançant l’input file, aquest la renderitza en el nostre objecte canvas.

  • la funció AgregarTexto () el que fa és que quan s’escrigui alguna cosa en la nostra caixa de tex to torni a carregar la imatge més el text agregat al nostre objecte canvas.

En la funció AgregarTexto () he afegit comentaris perquè s’entengui millor:

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

El nostre codi html és molt 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

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *