qr generator by @Codewith.it - Codewith.it

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

Referenze

hreflangConsente di dichiarare la lingua del documento collegato.
<video>Integra e controlla video in una pagina HTML
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<strong>Definisce una parte del testo importante con formattazione in grassetto.
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
<p>Serve a definire paragrafi di testo

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Contatore di click mio

ESERCIZIO FINALE

JS Istruzioni condizionali es1

numeri primi e divisori pro

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<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>

*{ }