cg-16-meme-generator

// we create variables to access key HTML elements in the project
//we create them as constants because we won't be assigning other values to them anymore
const choosenPicture = document.querySelector("#select-picture");
const canvas = document.querySelector("#meme");
const textTop = document.querySelector("#text-top");
const textBottom = document.querySelector("#text-bottom");
const downloadButton = document.querySelector('#download-button');
//global variable storing our selected image as a URL
let picture;

//we hide the download button
downloadButton.style.display='none';

// On the button where we select images we set the so-called event observer whose task will be to monitor each change of this element

// what this means for us is that when we select an image, the code for the event will be executed

// the e(event) parameter passes information about the event and the element
choosenPicture.addEventListener("change", function (e) {
  // we create a string (URL) that will represent our image object and this will facilitate its use in the code
  // this method takes a file as a parameter, we use the e parameter to return the first picture we selected
  const pictureUrl = URL.createObjectURL(e.target.files[0]);

  // this constructor creates a new html element for us - <img>.
  picture = new Image();
  // we set the path to the image
  picture.src = pictureUrl;

  // load the image when selected in the canvas
  picture.addEventListener("load", function () {
    // test add information in the console to check if the picture was loaded correctly
    console.log("Loading the image...");
    updateMeme(canvas, picture, textTop.value,textBottom.value);
  });
  downloadButton.style.display='block';
});

//function responsible for loading the canvas picture and adding the top and bottom caption

function updateMeme(canvas, picture, textTop, textBottom) {
  //set the rendering context in the canvas in our case it will be 2D
  const ctx = canvas.getContext("2d");
  //we set the width and height of the canva to the image parameters

  //uploading small images will end up bad quality
  const canvasWidth = picture.width;
  const canvasHeight = picture.height;
  // The font size will depend on the width of the picture if you want to change it, you can edit the value here
  // Math.floor rounds to the smallest or largest integer

  const fontSize = Math.floor(canvasWidth / 20);
  // the spacing of the captions from the top and bottom edges of the image the smaller the value, the closer the captions will be to the center
  const offsetY = canvasHeight / 25;

  //set the width and height of our canvas to the size of the image
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  //this method draws the image in the canvas cord 0 , 0 indicate where to start drawing the left - top corner of the canvas
  ctx.drawImage(picture, 0, 0);

  // text preparation https://www.w3schools.com/tags/ref_canvas.asp

  // color of letter borders
  ctx.strokeStyle = "black";
  // width of the letter border
  ctx.lineWidth = Math.floor(fontSize / 4);
  //the color of the letter fill
  ctx.fillStyle = "white";
  //centering of the text
  ctx.textAlign = "center";
  //rounding of the border
  ctx.lineJoin = "round";
  ctx.font = `${fontSize}px Summer`;

  //setting the top text
  //set the baseline from which we start drawing the text
  ctx.textBaseline = "top";
  //we draw the text without filling
  ctx.strokeText(textTop, canvasWidth / 2, offsetY);
  //we add a fill
  ctx.fillText(textTop, canvasWidth / 2, offsetY);

  // prepare the bottom text
  ctx.textBaseline = "bottom";
  ctx.strokeText(textBottom, canvasWidth / 2, canvasHeight - offsetY);
  ctx.fillText(textBottom, canvasWidth / 2, canvasHeight - offsetY);
}

//for any change in the top text input, we refresh the canvas image
textTop.addEventListener("change", function () {
  updateMeme(canvas, picture, textTop.value, textBottom.value);
});

textBottom.addEventListener("change", function () {
  updateMeme(canvas, picture, textTop.value, textBottom.value);
});

// OPTIONAL button to download image
// We convert the canvas to an image when the download button is clicked
downloadButton.addEventListener("click", function() {


    const dataURL = canvas.toDataURL("image/jpeg");


   // we create a new <a> tag with the path to our image set,
    const a = document.createElement('a');
    a.href = dataURL;
  // we set the download attribute with the name of the downloaded file
    a.download = 'meme.jpeg';
  // we call the click method on the newly created element as a result the photo will download automatically
    a.click();
});