index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3
   4 <head>
   5     <meta charset="UTF-8">
   6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7     <script src="dist/circletext.js"></script>
   8     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
   9     <link rel="stylesheet" href="css/styles.css">
  10     <link rel="stylesheet" href="css/forms.css">
  11     <title>Antifa Generator</title>
  12 </head>
  13
  14 <body>
  15     <div class="container">
  16         <form>
  17             <h1>Antifa Generator</h1>
  18             <div class="form-group">
  19                 <input id="antifa-group" type="text" required="required" />
  20                 <label for="input" class="control-label">Grupo</label><i class="bar"></i>
  21             </div>
  22             <div class="form-group">
  23                 <select id='antifa-label'>
  24                     <option>Antifacista</option>
  25                     <option>Antifacistas</option>
  26                 </select>
  27                 <label for="select" class="control-label"></label><i class="bar"></i>
  28             </div>
  29         </form>
  30         <div class="button-container">
  31             <button type="button" class="button" onClick="generateImage()"><span>Gerar imagem</span></button>
  32             <button type="button" class="button" onClick="downloadImage()"><span>Baixar</span></button>
  33             <button type="button" class="button"
  34                 onclick="window.open('https://medium.com/@matheusMmota/antifascismo-n%C3%A3o-%C3%A9-moldura-para-o-seu-perfil-d648c1b3caa8')"><span>Antifacista?</span></button>
  35
  36         </div>
  37
  38
  39         <canvas id="logo" height="500" width="500">
  40             Seu navegador não suporta canvas
  41         </canvas>
  42     </div>
  43     <script>
  44         const button = document.querySelector('.button');
  45         const logoCanvas = document.getElementById('logo')
  46
  47         function generateImage() {
  48             antifaGroup = document.getElementById('antifa-group')
  49             antifaLabel = document.getElementById('antifa-label')
  50
  51             ctx = logoCanvas.getContext("2d");
  52             const background = new Image();
  53             background.src = 'img/antifascist-action.png';
  54             background.onload = function () {
  55                 ctx.drawImage(background, 0, 0, 500, 500);
  56                 writeTopCircle(antifaGroup.value, "logo", 510, "white")
  57                 writeBottomCircle(antifaLabel.value, "logo", 510, "white")
  58                 logoCanvas.style.display = "flex"
  59             }
  60         };
  61
  62         function downloadImage() {
  63             const img = logoCanvas.toDataURL("image/png");
  64             console.log('img :>> ', img);
  65             const link = document.createElement('a');
  66             link.href = img;
  67             link.download = 'Download.jpg';
  68             document.body.appendChild(link);
  69             link.click();
  70             document.body.removeChild(link);
  71         }
  72
  73
  74     </script>
  75
  76 </body>
  77
  78 </html>