Responsive Meme Generator With JavaScript And HTML5 Canvas

Preview:

Description:

A responsive, fast, mobile-friendly online meme generator created with vanilla JavaScript, CSS grid layout, and HTML5 canvas.

The Meme Generator allows you to create custom memes by adding as many text lines to an image.

Also provides a functionality to export the meme and download it as a PNG image.

How to use it:

Import the necessary JavaScript and files into the html file.

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

Create the HTML for the meme generator.

<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>

Add your own images to the meme generator.

'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;
}