Como crear un meme con HTML5 e JavaScript

dun xeito sinxelo, imos crear o famoso meme que podería ser “imaxes para que se engada un texto para facer unha broma gráfica ou joda” .

Breve explicación:
Antes de entrar no código e dicirme, pero podemos engadir isto e outro … Este é un exemplo señores, que a idea é que pode melloralo.

Onde está composto:
Cargada unha imaxe, engádese un texto e xera a imaxe para descargalo premendo correctamente.

Agora se:
Toda a nosa lóxica é Resumo seguinte 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); };}
  • Declaramos 2 variables globais xa que imos manter o obxecto de lona eo noso contexto para usar.

  • a función Usagen () () O que fai é no momento de seleccionar unha imaxe usando o ficheiro de entrada, isto o rendeu no noso obxecto de lona.

  • A función superior () O que fai é que cando algo está escrito na nosa caixa Tex Para recargar a imaxe máis o texto engadido no noso obxecto de lona.

Na función Addtext () engadín comentarios para que se entenda mellor:

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

O noso código HTML é moi sinxelo

<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

O teu enderezo electrónico non se publicará Os campos obrigatorios están marcados con *