qr generator by @Codewith.it - Codewith.it

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

References

<title>Definisce il titolo della pagina web.
<map>Inserisce immagini mappa cliccabili in un documento
hreflangConsente di dichiarare la lingua del documento collegato.
srcIndica la provenienza di una risorsa esterna (tramite URL).
<em>Formatta il testo in corsivo/italico enfatizzato
acceptDefinisce e filtra il formato dei file per il tag <input type=file>

Users

Log in to search for users

Explore

Find inspiration

esercitazione numero 1

Primo esercizio

Esercitazione 1

Scheda Tecnica iPhone 15 Pro

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>

*{ }