Responsive meme generator con JavaScript y HTML5 Canvas

Vista prévia

Descripción

Un generador de Meme en línea receptivo, rápido y amigable para móviles creado con JavaScript Vanilla, diseño de cuadrícula CSS y lienzo HTML5.

El meme generator le permite crear memes personalizados añadiendo tantas líneas de texto a una imagen.

También proporciona una funcionalidad para exportar el meme y descargarlo como una imagen PNG.

Funcionamiento

Importa el JavaScript y los archivos necesarios en el archivo HTML.

<link rel="stylesheet" href="css/style.css">
<script src="js/meme.js"></script>

Crea el HTML para el generador meme.

<main>

<div>



<section class="gallery grid-container">





<!-- js render -->



</section>




<section class="meme-container hidden">





<button onclick="toggleView()">







<i class="fas fa-times"></i> Back to Gallery





</button>






<div class="meme-control">







<canvas class="memeCanvas">









Your browser does not support the HTML5 canvas tag.







</canvas>








<div class="txts-list">









<!-- js render -->







</div>





</div>






<button onclick="newTxtBtnClicked()">







<i class="fas fa-plus"></i>
Add Line





</button>





<a id="dl" download="meme.png" href="#" onclick="dlCanvas(this)">







<span>









<i class="fas fa-cloud-download-alt"></i> Download







</span>





</a>




</section>




<section class="contact">




</section>

</div>
</main>

Añade tus propias imágenes al generador meme.

'use strict';

var gNextId = 1;
var gImgs;

function init() {

gImgs = createImgs();

renderImgs(gImgs);
}

function createImgs() {

var imgs = [];

 imgs.push(createImage('1.jpg', ['happy']),



createImage('2.jpg', ['fun']),



createImage('3.jpg', ['happy']),



...


return imgs;
}

function createImage(url, keywords) {

return {


id: gNextId++,


url: url,


keywords: keywords

};
}

function renderImgs(imgs) {

var strHtml = imgs.map(function (img, idx) {



return `



<img id='${img.id}' src='${img.url}' onclick="initMemeEditor(${img.id},this)" alt='meme picture'/>



`

})

.join(' ')





document.querySelector('.gallery').innerHTML = strHtml;
}