comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

Como crear un meme con html5 y javascript

  • 1 Respuestas
  • 1728 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Conectado graphixx

  • *
  • Moderador
  • Mensajes: 1288
  • Actividad:
    28.33%
  • Reputación 18
  • Científico de BIG DATA
    • Ver Perfil
    • Sistemas y Controles
« en: Enero 27, 2016, 02:00:14 pm »

De manera sencilla vamos a crear los famosos MEME lo cual podría ser "imágenes para que se le agrega un texto para hacer una broma gráfica o joda".

Explicación breve:
Antes de entrar al código y me digan, pero podemos agregar esto y lo otro .. esto es un EJEMPLO señores, el cual la idea es que ustedes lo puedan mejorar.

En que consiste:
Se sube una imagen, se agrega un texto y genera la imagen para luego descargarla dando click derecho.

Ahora si:
Toda nuestra lógica se resume al siguiente script

Código: Javascript
  1. var img, canvas, context;
  2.        
  3.         function SubirImagen()
  4.         {
  5.             canvas = document.getElementById("canvas");
  6.             context = canvas.getContext("2d");
  7.            
  8.             canvas.width = 700;
  9.             canvas.height = 500;
  10.            
  11.             // Cargamos el objeto que nos permite subir imagenes
  12.             var imagen = document.getElementById("imagen");
  13.             if(imagen.files.length == 0)
  14.             {
  15.                 alert('Debe ingresar una imagen');
  16.                 return;
  17.             }
  18.  
  19.             // Creamos la imagen
  20.             img = new Image();
  21.             img.src = URL.createObjectURL(imagen.files[0]);
  22.            
  23.             img.onload = function() {
  24.                 // Dibujamos la imagen
  25.                 context.drawImage(img, 0, 0, canvas.width, canvas.height);
  26.             };
  27.            
  28.             // Mostramos el canvas
  29.             document.getElementById("meme").style.display = 'block';
  30.         }
  31.        
  32.         function AgregarTexto()
  33.         {
  34.             // Cargamos la caja de texto
  35.             var texto = document.getElementById("texto");
  36.            
  37.             img.src = URL.createObjectURL(imagen.files[0]);
  38.             img.onload = function() {
  39.                 // Dibujamos la imagen
  40.                 context.drawImage(img, 0, 0, canvas.width, canvas.height);
  41.                
  42.                 // Agregamos el texto
  43.                 context.lineWidth  = 5;
  44.                 context.font = '30pt sans-serif';
  45.                 context.strokeStyle = 'black';
  46.                 context.fillStyle = 'white';
  47.                 context.textAlign = 'center';
  48.  
  49.                 texto = texto.value.toUpperCase();
  50.                
  51.                 var x = canvas.width/2;
  52.                 var y = canvas.height - 40;
  53.  
  54.                 context.strokeText(texto, x, y);
  55.                 context.fillText(texto, x, y);
  56.             };
  57.         }
  58.  

  • Declaramos 2 variables globales ya que ahí guardaremos al objeto canvas y nuestro contexto a usar.
  • La función SubirImagen() lo que hace es al momento de seleccionar un imagen mediante el input file, este la renderiza en nuestro objeto canvas.
  • La función AgregarTexto() lo que hace es que cuando se escriba algo en nuestra caja de texto vuelva a cargar la imagen más el texto agregado en nuestro objeto canvas.

En la función AgregarTexto() he agregado comentarios para que se entienda mejor:

Código: Javascript
  1. context.lineWidth  = 5; // Grosor del borde
  2. context.font = '30pt sans-serif'; // tamaño de letra y tipo de fuente
  3. context.strokeStyle = 'black'; // color de la sombra
  4. context.fillStyle = 'white'; // color del texto
  5. context.textAlign = 'center'; // alineación del texto
  6.  
  7. texto = texto.value.toUpperCase(); // lo pasamos a mayascula
  8.  
  9. var x = canvas.width/2; // para decirle que el texto comience justo al medio
  10. var y = canvas.height - 40; // le decimos que el texto comience al final menos ¿40px?
  11.  
  12. context.strokeText(texto, x, y); // creamos la sombra
  13. context.fillText(texto, x, y); // creamos el texto
  14.  

Nuestro código html es muy simple

Código: HTML5
  1. <No tienes permisos para ver links. Registrate o Entra con tu cuenta id="subida">
  2.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta id="elija">SELECCIONE UNA IMAGEN A SUBIR</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  3.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta class="form-control">
  4.         <No tienes permisos para ver links. Registrate o Entra con tu cuenta id="imagen" type="file" />
  5.     </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  6.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta class="form-control">
  7.         <No tienes permisos para ver links. Registrate o Entra con tu cuenta id="subir" onclick="SubirImagen();">Renderizar</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  8.     </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  9. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  10. <No tienes permisos para ver links. Registrate o Entra con tu cuenta id="meme" class="none">
  11.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta class="form-control">
  12.         <No tienes permisos para ver links. Registrate o Entra con tu cuenta id="texto" type="text" onkeyup="AgregarTexto();" placeholder="Texto que desea agregar" maxlength="20" autocomplete="off" />
  13.     </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  14.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta id="canvas"></No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  15.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta class="form-control">
  16.         <No tienes permisos para ver links. Registrate o Entra con tu cuenta><No tienes permisos para ver links. Registrate o Entra con tu cuenta>Click derecho</No tienes permisos para ver links. Registrate o Entra con tu cuenta> y <No tienes permisos para ver links. Registrate o Entra con tu cuenta>guardar imagen como</No tienes permisos para ver links. Registrate o Entra con tu cuenta> para descargar</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  17.     </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  18. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  19.  

No tienes permisos para ver links. Registrate o Entra con tu cuenta

Fuente: anexsoft.com
« Última modificación: Enero 27, 2016, 04:19:21 pm por EPSILON »
No tienes permisos para ver links. Registrate o Entra con tu cuenta

Desconectado blackdrake

  • *
  • Co Admin
  • Mensajes: 1914
  • Actividad:
    1.67%
  • Reputación 15
    • Ver Perfil
« Respuesta #1 en: Enero 28, 2016, 09:40:25 am »
Muy bueno!! muchas gracias @No tienes permisos para ver links. Registrate o Entra con tu cuenta :D



 

¿Te gustó el post? COMPARTILO!



[VIDEOTUTORIAL] Aprender Javascript desde cero - incluye hacking con Node.js

Iniciado por graphixx

Respuestas: 2
Vistas: 2654
Último mensaje Agosto 25, 2017, 10:08:45 am
por Gothiquedark
[JavaScript] Contá tu edad real (años con dígitos decimales)

Iniciado por Polsaker

Respuestas: 11
Vistas: 2802
Último mensaje Junio 06, 2015, 09:59:34 pm
por [L]ord [R]NA
[SOURCE] Formulario con validacion javascript de contraseña y email a mysqli

Iniciado por graphixx

Respuestas: 2
Vistas: 1557
Último mensaje Agosto 31, 2014, 03:56:47 pm
por Destructor.cs
[VIDEOTUTORIAL] TypeScript (2014) Programación orientada a objetos en JavaScript

Iniciado por graphixx

Respuestas: 0
Vistas: 1072
Último mensaje Octubre 09, 2015, 08:54:14 am
por graphixx
[VIDEOTUTORIAL] Introducción a Javascript y Node.js GRATIS - Keepcoding

Iniciado por graphixx

Respuestas: 2
Vistas: 2089
Último mensaje Marzo 11, 2017, 03:53:03 am
por graphixx