qr generator by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

minlengthDetermina il numero minimo di caratteri per un elemento input
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
animationDefinisce i parametri dell'animazione di un elemento o selettore
<i>Formatta il testo in corsivo/italico non enfatizzato
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<h2>Titolo di intestazione di secondo livello

Users

Log in to search for users

Explore

Find inspiration

Tracker delle attività 2

Form Raccolta Segnalazioni Immobil

ES01a\\index.html

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<script src="https://codewith.it/qr/qrcode.min.js">
</script>
<style>
  .qritem{
    margin: auto;
    width: 300px;
  }
  .btncustom:hover{
    background:white;
    cursor:pointer;
  }
  .qrcont{
    text-align: center;
    background:#efefef;
    padding:5px;
  }
  .qrcont input{
    text-align:center;
  }
  .qrbase {
    background:white;
    margin:30px;
    padding:25px 15px;
    border-radius:10px;
    box-shadow:inset 2px 2px 15px #0004;
    display:flex;
    flex-direction:row;

  }
  .qrbase div{
    flex:1;
  }
  .qroptions {
    display:flex;
    flex-direction:column;
    margin:auto;
    grid-gap:5px;
  }
  .qroptions button {
    border-radius: 5px;
    border: solid 2px #ccc;
  }   
  .qroptions button:hover {
    background:#ccc;
    cursor:pointer;
    border-radius: 5px;
    border: solid 2px #ccc;
  }
  @media screen and (max-width: 650px) {
    .qrbase {
      flex-direction:column;
    }
    #qrcode img{
      width:200px;
      margin:auto;
    }
  }
</style>
<script>
  var codeType;
  var codeMess = 0;
</script>

<div class="qrcont">
  <div class="qrbase">
    <div>
      <div class="qroptions" style="width:200px;">
        <label>Tipologia</label>
        <button onclick="codeType = ''; genQR()">URL</button>
        <button onclick="codeType = 'email'; genQR()">Email</button>
        <button onclick="codeType = 'sms'; genQR()">SMS</button>
        <button onclick="codeType = 'tel'; genQR()">Telefono (Phone)</button><br>
        <div>
          <label>Usa una frase</label><input type="radio" name="rad" checked>
        </div>
        <input placeholder="Messaggio aggiuntivo" value="Visita il sito" id="txtQR" autocomplete="off" maxlength="22" onkeyup="codeMess=1">
        <br>
        <div>
          <label>Usa un logo</label><input type="radio" name="rad" >
          <input type="file" id="fileQR" onchange="genQR()" >
        </div>
        <hr>
        <button class="" onclick="genQR()">
          Ricarica QR
        </button> 
      </div>

    </div>
    <div>
      <div class="qroptions">
        <input placeholder="URL/testo" id="qrgen" autocomplete="off" maxlength="250">
        <input placeholder="Oggetto" id="qrsub" autocomplete="off" maxlength="250" style=" display:none;">
        <textarea placeholder="Messaggio" id="qrmess" autocomplete="off" style="height:80px; display:none;"></textarea>
        <br>
        <div id="qrcode" class="qritem">
        </div>
        <br>
        <hr>
        <button class="btncustom qritem icn-down-small" onclick="downloadQR()">
          <b>Scarica QR
          </b> come immagine
        </button>  
      </div>
    </div> 
  </div>
</div>


<script>


  var QR_CODE = new QRCode("qrcode", {
    width: 300,
    height: 300,
    colorDark: "#000000",
    colorLight: "#ffffff",

    correctLevel: QRCode.CorrectLevel.L
  }
                          );
  var qrgen = document.getElementById('qrgen');
  var qrsub = document.getElementById('qrsub');
  var pmess = document.getElementById('qrmess');
  var radio = document.getElementsByName('rad');

  var ltimer;

  var txtQR = document.getElementById('txtQR');
  var fileQR = document.getElementById('fileQR');


  qrgen.addEventListener("keyup", function(){
    genQR()
  });     
  qrsub.addEventListener("keyup", function(){
    genQR()
  });   
  pmess.addEventListener("keyup", function(){
    genQR()
  });
  txtQR.addEventListener("keyup", function(){
    genQR()
  });
  function genQR(){
    clearTimeout(ltimer);
    ltimer = setTimeout(function(){
      if (qrgen.value.length <=250) {

        //format SMSTO:+1123456:This is a SMS stored in a QR Code!

        switch (codeType){
          case "email":
            qrgen.placeholder = "Indirizzo email";
            pmess.style.display = "block";
            qrsub.style.display = "block";
            if(codeMess == 0){
              txtQR.value = "Invia un email";
            }
            QR_CODE.makeCode("mailto:"+qrgen.value+ "?subject="+qrsub.value + "&body="+ pmess.value);
            break; 

          case "tel":
            qrgen.placeholder = "Numero di telefono";
            pmess.style.display = "none";
            qrsub.style.display = "none";
            if(codeMess == 0){
              txtQR.value = "Chiamami";
            }
            QR_CODE.makeCode("tel:"+qrgen.value);
            break; 

          case "sms":
            qrgen.placeholder = "Numero di telefono";
            pmess.style.display = "block";
            qrsub.style.display = "none";
            if(codeMess == 0){
              txtQR.value = "Invia un SMS";
            }
            QR_CODE.makeCode("SMSTO:"+qrgen.value+ ":"+ pmess.value);
            break;

          default:
            qrgen.placeholder = "URL/testo";
            pmess.style.display = "none";
            qrsub.style.display = "none";
            if(codeMess == 0){
              txtQR.value = "Visita il sito";
            }
            QR_CODE.makeCode(qrgen.value);
                        }
        let canvass =document.getElementsByTagName('canvas')[0];
        let ctx = canvass.getContext("2d");
        if(txtQR.value.length >0 && radio[0].checked == true){
          ctx.fillStyle = "#fffffff1";
          ctx.font = "bold 20px Ubuntu";
          var mt = ctx.measureText(txtQR.value);
          ctx.fillRect((canvass.width-mt.width-20), (canvass.height-40), mt.width+25, 40);
          ctx.textAlign = 'right';
          ctx.fillStyle = "rgb(38,59,85)";
          ctx.fillText(txtQR.value, 290,290);
          QR_CODE.makeImage();
        }else if(fileQR.value.length >0 && radio[1].checked == true){

          var reader = new FileReader();
          reader.readAsDataURL(fileQR.files[0]);
          reader.onload = function (e) {
            ctx.fillStyle = "#ffffff";
            ctx.fillRect((canvass.width/3)-2, (canvass.height/3)-2,(canvass.width/3)+4, (canvass.height/3)+4);
            var pimage = document.createElement('img');
            pimage.src=e.target.result;
            ctx.drawImage(pimage, canvass.width/3, canvass.height/3,canvass.width/3, canvass.height/3);
            QR_CODE.makeImage();
             if(pimage.width == 0){
               genQR();
             }
          }
        }
      }
      else{
        alert("Caratteri massimi 250 - Max 250 Characters");
      }
    }, 300);
  }


  QR_CODE.makeCode("https://www.byte-post.com");

  function downloadQR(){
    var qrsrc = document.getElementById("qrcode").getElementsByTagName('img')[0].src;
    var a = document.createElement("a");
    a.href = qrsrc;
    a.download = "myQR.png";
    a.click();
  } 


</script>

*{ }