Gerador de Assinaturas APP Shopbox

shopbox scripts

by thvinic

HTML

<meta name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=0.6, user-scalable=no" />

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<h2 style="color:#003b91;">
Gerador de Assinaturas App Recibo Premium Shopbox Scripts.
</h2>

<h1 contenteditable id='capture' style="font-size:40px;font-family: bellair; width: auto; height: auto; text-align: center;background-color: rgba(0,0,0,0);color:#1600a5;"><br>Insira o seu Nome</h1>

<br><br>
<textarea id="UpdateText" rows="1" cols="30" style="resize: none; text-align: center" placeholder="Escreva aqui o seu nome.."></textarea><br />
    <select id="input-font" onchange="myFont(this)">
      <optgroup>
        <option value="Times New Roman">Times New Roman</option>
        <option style='font-family:Jellmotsy;' value="Jellmotsy">jellmotsy jellmotsy</option>
        <option style='font-family:arial;' value="Arial">Arial</option>
        <option style='font-family:Brasserie;' value="Brasserie">Brasserie</option>

        <option style='font-family:Very Damaged;' value="Very Damaged">Very Damaged</option>
        <option style='font-family:Verdana;' value="Verdana">Verdana</option>
        <option style='font-family:Impact;' value="Impact">Impact</option>
        <option style='font-family:bellair;' value="bellair">bellair</option>
        <option style='font-family: Oriflame Script;' value="Oriflame Script">Oriflame Script</option>
        <option style='font-family:Tequila;' value="Tequila">Tequila Tequila</option>
        <option style='font-family:Goall Shmidtown;' value="Goall Shmidtown">Goall Shmidtown</option>
        <option style='font-family:Plus Jakarta Sans;' value="Plus Jakarta Sans">Plus Jakarta Sans</option>
        <option style='font-family:Qallensen;' value="Qallensen">Qallensen</option>
        <option style='font-family:Marguerite;' value="Marguerite">Marguerite</option>
        <option style='font-family:Orlande;' value="Orlande">Orlande</option>
  ...

CSS

@import url('https://fonts.cdnfonts.com/css/bellair');
@import url('https://fonts.cdnfonts.com/css/oriflame-script');
@import url('https://fonts.cdnfonts.com/css/jellmotsy');
@import url('https://fonts.cdnfonts.com/css/very-damaged-2');
@import url('https://fonts.cdnfonts.com/css/brasserie');
@import url('https://fonts.cdnfonts.com/css/tequila');
@import url('https://fonts.cdnfonts.com/css/goall-shmidtown');
@import url('https://fonts.cdnfonts.com/css/plus-jakarta-sans');
@import url('https://fonts.cdnfonts.com/css/qallensen');
@import url('https://fonts.cdnfonts.com/css/marguerite-2');
@import url('https://fonts.cdnfonts.com/css/orlande');
@import url('https://fonts.cdnfonts.com/css/bella-signature');
@import url('https://fonts.cdnfonts.com/css/aldora');
@import url('https://fonts.cdnfonts.com/css/lavanderia');
@import url('https://fonts.cdnfonts.com/css/gome');
@import url('https://fonts.cdnfonts.com/css/the-samfhang');
@import url('https://fonts.cdnfonts.com/css/farmer');
@import url('https://fonts.cdnfonts.com/css/gondessy');
@import url('https://fonts.cdnfonts.com/css/heru-95244');
@import url('https://fonts.cdnfonts.com/css/uvf-centeria');
@import url('https://fonts.cdnfonts.com/css/brush-lettering-one');
@import url('https://fonts.cdnfonts.com/css/ballet');
@import url('https://fonts.cdnfonts.com/css/kapakana');
@import url('https://fonts.cdnfonts.com/css/angelyn');
@import url('https://fonts.cdnfonts.com/css/kathiega');
@import url('https://fonts.cdnfonts.com/css/hambut');
@import url('https://fonts.cdnfonts.com/css/hello-cherlie');
@import url('https://fonts.cdnfonts.com/css/rousset-bilast');
@import url('https://fonts.cdnfonts.com/css/travel-soulmates-signature');







optgroup { font-size:27px; }


/* Dashed border */
hr.dashed {
  border-top: 3px dashed #bbb;
}

JavaScript

function capture() {
  const captureElement = document.querySelector('#capture')
  html2canvas(captureElement)
    .then(canvas => {
      canvas.style.display = 'none'
      document.body.appendChild(canvas)
      return canvas
    })
    .then(canvas => {
      const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
      const a = document.createElement('a')
      a.setAttribute('download', Math.floor(Math.random() * 1500)+ 'minha-assinatura.png')
      a.setAttribute('href', image)
      a.click()
      canvas.remove()
    })
}

const btn = document.querySelector('#bellair')
btn.addEventListener('click', capture)




/* script de mudar texto input ao digitar*/

$(document).ready(function(){
    $("#UpdateText").keyup(function(){
        // Getting the current value of textarea
        var currentText = $(this).val();

        // Setting the Div content
        $("#capture").text(currentText);
    });
});

/* script para aumentar ou diminuir imagem*/
$('button').on('click', function(){
    var clicked = this;
    $('h1').css('font-size', function (i,size) {
        console.log(parseInt(size, 10), clicked.id);
        return parseInt(size,10) + (clicked.id === 'up' ? 2 : -2) + 'px';
    });
});