Como criar um meme com html5 e javascript

de uma maneira simples, vamos criar o famoso meme que poderia ser “imagens para que um texto seja adicionado para fazer uma piada gráfica ou JODA” .

Breve explicação:
antes de entrar no código e me dizer, mas podemos adicionar isso e o outro .. Este é um exemplo senhores, que a ideia é que você pode melhorá-lo.

onde consiste:
Uma imagem é carregada, um texto é adicionado e gera a imagem para baixá-lo clicando em correto.

Agora, se:
toda a nossa lógica é Resumiu o próximo 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); };}
  • Nós declaramos 2 variáveis globais, já que manteremos o objeto de tela e nosso contexto usar.

  • a função upagen () () O que ele faz é no momento da seleção de uma imagem usando o arquivo de entrada, este renderizando em nosso objeto de tela.

  • a função add top () o que faz é que quando algo é escrito em nossa caixa de tex Para recarregar a imagem, além do texto adicionado em nosso objeto de lona.

  • na função AddText () adicionei comentários para que seja entendido melhor:

    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

    Nosso código HTML é muito simples

    <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 seu endereço de email não será publicado. Campos obrigatórios marcados com *