Cómo construir un creador de memes con React: una guía para principiantes

Programación

Si está en medio de aprender React, probablemente ya haya pasado por muchos tutoriales sobre cómo crear una lista de tareas pendientes. En algún momento, buscará ideas alternativas para probar y aprender, pero seguirá encontrando diferentes versiones del ejemplo predeterminado de la lista de tareas pendientes.

Esta idea alternativa en este artículo es para ustedes, los curiosos. El código base se puede encontrar en mi GitHub y se arranca desde create-react-app. He recopilado plantillas de memes de Google y otras fuentes. La fuente Impact puede convertir cualquier imagen en un meme, por lo que no tenemos más remedio que agregarla.

Este es un buen proyecto de hacer y aprender para empezar. Nos ocuparemos de muchas interacciones de usuarios / oyentes de eventos y mutaciones de estado.

Construyendo la galería

Inicialmente, crearemos una galería de imágenes para permitir a los usuarios seleccionar una plantilla de meme. He almacenado las imágenes que he recopilado como una matriz y estoy construyendo una galería simple a partir de ellas.

En el siguiente código,

  1. Hacemos un mapa a través de la matriz de fotos, mostramos cada plantilla de meme en una etiqueta img y mostramos una galería.
  2. Determinamos la imagen seleccionada actual a través de un onClick en la etiqueta img.
  3. Tenemos un objeto initialState con la configuración inicial de los subtítulos y su posición. La posición, el contenido y el estado de arrastre de los textos superior e inferior se pueden modificar posteriormente activando mutaciones de estado.

Como puede descifrar, cada imagen de la galería tiene su propio evento onClick. Encuentra la imagen seleccionada actualmente, la convierte en URI de datos y abre un modal reactstrap. El modal será la estación de trabajo para crear el meme.

La estación de trabajo Meme-Maker

Usamos etiquetas svg, imagen y texto dentro del modal para contener la imagen y el título del meme. Preferimos SVG porque puedes acercar y alejar tanto como quieras, y nunca perderá claridad. Y convertir SVG a PNG mientras se exporta el meme es una tarea relativamente sencilla.

Cada imagen de la colección tiene diferente altura y ancho. Para evitar estirar y comprimir la imagen, estoy haciendo una pequeña solución para corregir la relación de aspecto. Estoy fijando el ancho en 600 y calculando la altura en función de la relación ancho-alto. Estoy proporcionando la altura y el ancho calculados al SVG.

La estructura general dentro del SVG es bastante sencilla. Contiene la imagen y las leyendas.

   {this.state.toptext}   {this.state.bottomtext}  // And we will have event listeners attached to the  tags to move them around. We'll see it in later part of the article.

Las coordenadas xey de la parte superior e inferiorLas etiquetas /> se mantienen en el estado (consulte el objeto initialState en el componente MemeMaker). A medida que el usuario arrastra y coloca las etiquetas de texto, las coordenadas X e Y cambian.

Nota: el xlinkHref de la etiqueta de imagen será la ruta incrustada (base64). Las URL src sin formato no se pueden convertir a PNG durante la descarga.

Así es como se ve todo el código:

Aparte del SVG, tenemos dos /> ; etiquetas para permitir al usuario ingresar sus títulos superiores e inferiores para el meme. El evento onChange captura el título superior y el título inferior, y los establece en el estado a medida que lo cambiamos.

¡Arrastrando el texto!

Intentemos reposicionar los subtítulos superior e inferior ahora. Las interacciones de arrastrar y soltar de las etiquetas de texto están vinculadas a los oyentes de eventos.

  1. Pulsación del ratón —onMouseDown: busca la etiqueta de texto seleccionada, determina las posiciones X e Y actuales y le asigna el detector de eventos "mousemove".
  2. Mover el mouse: onMouseMove: busca la posición actual (xey) de la etiqueta de texto mientras se sostiene y mueve el mouse.
  3. Liberación del mouse (onMouseUp): busca la posición de caída o liberación. Determina la X y la Y donde se coloca el texto. Elimina el detector de eventos "mousemove" del elemento y finaliza la función de arrastrar y soltar.

Para rastrear el mouse, presione, mantenga presionado y arrastre. Incluimos los siguientes oyentes de eventos en las etiquetas de texto.

onMouseDown={event => this.handleMouseDown(event, ‘top’)}onMouseUp={event => this.handleMouseUp(event, ‘top’)}

Luego adjuntamos el detector de eventos "mousemove" para rastrear los movimientos del mouse en "mousedown". Una vez que se suelta la etiqueta de texto, eliminamos el detector de eventos de movimiento del mouse adjunto en "mouseup".

Así es como el código hace eso:

Ahora que ha terminado de arrastrar y soltar, puede mover el texto y reposicionarlo donde quiera.

Descargando el meme

Cuando un usuario hace clic en el botón de descarga, estamos convirtiendo el SVG en una cadena serializada XML y dibujándolo en un lienzo HTML5. Usamos el método toDataUrl () del lienzo html (genera un URI de imagen base64) para generar una imagen de tipo mime “image / png”.

A medida que aprenda más, podrá hacer mucho más con este pequeño proyecto.

  1. Puede intentar obtener imágenes de las API de código abierto y crear una galería.
  2. Puedes intentar agregar disposiciones para compartirlas en facebook, whatsapp y twitter.
  3. Puede intentar permitir que el usuario cargue su propia imagen, escale y cree un meme.
  4. Puede intentar cambiar el tamaño de la fuente.

Hay mucho más que puede hacer para mejorar el proyecto que, en última instancia, mejorará sus habilidades de codificación. ? ¡Feliz codificación! ?