Mamoonifier

by wio_dude

HTML

<label for="file">Select and image:</label>
<input id="file" type="file" accept="image/*" /><br />
<canvas id="canvas"></canvas>

JavaScript

const $el = {};
const ids = [
	'file',
  'canvas',
];

for (const id of ids) {
	$el[id] = document.getElementById(id);
}

const FOOTER_WIDTH = 750;
const FOOTER_HEIGHT = 125;
const LOGO_URL = 'https://i.imgur.com/DmKwOSl.jpg';
const logo = new Image();
logo.src = LOGO_URL;

$el.file.addEventListener('input', () => {
	console.log('new file');
  for (const file of $el.file.files) {
  	console.log(file.name);
    const imageUrl = URL.createObjectURL(file);
    console.log(imageUrl);
    const image = new Image();
    image.src = imageUrl;
    image.onload = () => {
    	let scale = 1;
      $el.canvas.width = image.width;
      $el.canvas.height = image.height + FOOTER_HEIGHT;
      if (image.width < FOOTER_WIDTH) {
      	scale = FOOTER_WIDTH / image.width;
      	$el.canvas.width = FOOTER_WIDTH;
        $el.canvas.height = image.height * scale + FOOTER_HEIGHT;
      } else {
        $el.canvas.width = image.width;
        $el.canvas.height = image.height + FOOTER_HEIGHT;
      }
      
      const logoX = (image.width * scale - logo.width) / 2;
      const logoY = image.height * scale + (FOOTER_HEIGHT - logo.height) / 2;
      const ctx = $el.canvas.getContext('2d');
      ctx.drawImage(image, 0, 0, image.width * scale, image.height * scale);
      ctx.fillStyle = 'rgb(13, 3, 55)';
      ctx.beginPath();
      ctx.rect(0, image.height * scale, image.width * scale, FOOTER_HEIGHT);
      ctx.fill();
      ctx.drawImage(logo, logoX, logoY);
      console.log('image loaded');
    };
  }
});