qr generator by @Codewith.it - Codewith.it

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

References

idIdentifica univocamente un elemento HTML
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
langSpecifica la lingua del contenuto di un elemento
downloadConsente di scaricare file al click di collegamento ipertestuale.
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
forSpecifica a quale id è associato l'elemento in cui è dichiarato.

Users

Log in to search for users

Explore

Find inspiration

altro esercizio tabella

VERIFICA.BONETTI

programma di x,y,z

Test Gaming HTML MEME

Esercizi 05/03/2024 es5

esercitazione n1

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>

*{ }