Cum se creează o MEME cu HTML5 și JavaScript

într-un mod simplu de a crea celebrul meme care ar putea fi „imagini, astfel încât un text să fie adăugat pentru a face o glumă grafică sau JODA” .

scurtă explicație:
înainte de a intra în cod și spune-mi, dar putem adăuga acest lucru și celălalt. Acesta este un exemplu domnilor, pe care ideea este că o puteți îmbunătăți.

Unde este format:
O imagine este încărcată, se adaugă un text și generează imaginea pentru ao descărca făcând clic dreapta.

Acum, dacă:
Toată logica noastră este Rezumat Scriptul următor

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); };}
  • Noi declarăm 2 variabile globale De când vom păstra obiectul de panza și contextul nostru de utilizare.

    >

  • Funcția UPAGEN () () Ceea ce face este în momentul selectării unei imagini utilizând fișierul de intrare, această face acest lucru în obiectul nostru de panza.

  • Adăugați funcția de top () ceea ce face este că atunci când ceva este scris în caseta noastră Tex Pentru a reîncărca imaginea plus textul adăugat în obiectul nostru de canvas.

în funcția AddTEXT () Am adăugat comentarii astfel încât să se înțeleagă mai bine:

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

Codul nostru HTML este foarte simplu

<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

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *