Come creare un meme con HTML5 e JavaScript

In modo semplice creeremo il famoso meme che potrebbe essere “immagini in modo che un testo venga aggiunto per creare uno scherzo grafico o Joda” .

Breve spiegazione:
Prima di entrare nel codice e dirmi, ma possiamo aggiungere questo e l’altro .. Questo è un esempio Gentlemen, che l’idea è che puoi migliorarlo.

Dove consiste:
Un’immagine viene caricata, un testo viene aggiunto e genera l’immagine per scaricala quindi facendo clic su DESTRA.

Ora se:
Tutte le nostre logiche Script successivo riassunto

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); };}
  • Dichiariamo 2 variabili globali poiché ci terremo l’oggetto tela e il nostro contesto da utilizzare.

  • la funzione UPAGEN () () Cosa fa è al momento della selezione di un’immagine utilizzando il file di input, questo renderlo nel nostro oggetto tela.

  • La funzione Aggiungi top () Che cosa fa è quando qualcosa è scritto nella nostra casella tex Per ricaricare l’immagine più il testo aggiunto nel nostro oggetto tela.

Nella funzione AddTtext () ho aggiunto commenti in modo che sia compreso meglio:

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

Il nostro codice HTML è molto semplice

<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

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *