“generator kode qr online” Kode Jawaban

Detektor Kode QR

    import cv2
    decoder = cv2.QRCodeDetector()
    data, points, _ = decoder.detectAndDecode(img) # size 250 * 250 np.array
    qr_code = data
    print('Decoded data: ' + data)
    if points is not None:
        print('Decoded data: ' + data)
    
        points = points[0]
        for i in range(len(points)):
            pt1 = [int(val) for val in points[i]]
            pt2 = [int(val) for val in points[(i + 1) % 4]]
            cv2.line(img, pt1, pt2, color=(255, 0, 0), thickness=3)
    
        cv2.imshow('Detected QR code', img)
Evil Echidna

KODE QR

let scanner = new Instascan.Scanner({
  video: document.getElementById('preview'),
  mirror: false
});

Instascan.Camera.getCameras().then(function(cameras) {
  if (cameras.length > 0) {
    scanner.start(cameras[0]);
  } else {
    console.error('No cameras found.');
    alert('No cameras found.');
  }
}).catch(function(e) {
  console.error(e);
  alert(e);
});


$(function() {
  const re = /(\d+-\d+)\s+(.*)/;
  scanner.addListener('scan', function(content) {
    console.log(content);
    if (!re.test(content)) {
      console.log("malformed strings")
      return;
    }
    const [_, id, name] = content.match(re);
    $(".idnum").val(id);
    $(".idname").val(name.trim());
  });
})
Annoying Alligator

KODE QR

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
<label id="label">Account ID </label>
<input type="text" name="accId" required="" class="idnum" style="width: 108px;margin-right: 15px;" value="">
<br/>
<label id="label">Customer Name </label>
<br/>
<input type="text" readonly="" name="name" class="idname" required="" value="">
Annoying Alligator

generator kode qr online

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <link rel="shortcut icon" href="QR-CODE.png" type="image/x-icon">
    <meta charset="utf-8">  
    <title>QR Code Generator | Clever Shivanshu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  padding: 0 10px;
  min-height: 100vh;
  align-items: center;
  background: #EFEBFA;
  justify-content: center;
}
.wrapper{
  height: 265px;
  max-width: 410px;
  background: #fff;
  border-radius: 7px;
  padding: 20px 25px 0;
  transition: height 0.2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.wrapper.active{
  height: 530px;
}
header h1{
  font-size: 21px;
  font-weight: 500;
}
header p{
  margin-top: 5px;
  color: #575757;
  font-size: 16px;
}
.wrapper .form{
  margin: 20px 0 25px;
}
.form :where(input, button){
  width: 100%;
  height: 55px;
  border: none;
  outline: none;
  border-radius: 5px;
  transition: 0.1s ease;
}
.form input{
  font-size: 18px;
  padding: 0 17px;
  border: 1px solid #999;
}
.form input:focus{
  box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.form input::placeholder{
  color: #999;
}
.form button{
  color: #fff;
  cursor: pointer;
  margin-top: 20px;
  font-size: 17px;
  background: linear-gradient(135deg, #481CB6 0%, #2D5CFE 100%);
}
.qr-code{
  opacity: 0;
  display: flex;
  padding: 33px 0;
  border-radius: 5px;
  align-items: center;
  pointer-events: none;
  justify-content: center;
  border: 1px solid #ccc;
}
.wrapper.active .qr-code{
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s 0.05s ease;
}
.qr-code img{
  width: 170px;
}

@media (max-width: 430px){
  .wrapper{
    height: 255px;
    padding: 16px 20px;
  }
  .wrapper.active{
    height: 510px;
  }
  header p{
    color: #696969;
  }
  .form :where(input, button){
    height: 52px;
  }
  .qr-code img{
    width: 160px;
  }  
}

   </style>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>QR Code Generator</h1>
        <p>Paste a url or enter text to create QR code</p>
      </header>
      <div class="form">
        <input type="text" spellcheck="false" placeholder="Enter text or url">
        <button>Generate QR Code</button>
      </div>
      <div class="qr-code">
        <img src="" alt="qr-code">
      </div>
    </div>

    <script>
    const wrapper = document.querySelector(".wrapper"),
        qrInput = wrapper.querySelector(".form input"),
        generateBtn = wrapper.querySelector(".form button"),
        qrImg = wrapper.querySelector(".qr-code img");
        let preValue;
        
        generateBtn.addEventListener("click", () => {
            let qrValue = qrInput.value.trim();
            if(!qrValue || preValue === qrValue) return;
            preValue = qrValue;
            generateBtn.innerText = "Generating QR Code...";
            qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`;
            qrImg.addEventListener("load", () => {
                wrapper.classList.add("active");
                generateBtn.innerText = "Generate QR Code";
            });
        });
        
        qrInput.addEventListener("keyup", () => {
            if(!qrInput.value.trim()) {
                wrapper.classList.remove("active");
                preValue = "";
            }
        });
        </script>

  </body>
</html>
Xenophobic Xenomorph

Jawaban yang mirip dengan “generator kode qr online”

Pertanyaan yang mirip dengan “generator kode qr online”

Lebih banyak jawaban terkait untuk “generator kode qr online” di HTML

Jelajahi jawaban kode populer menurut bahasa

Jelajahi bahasa kode lainnya