仅使用 HTML 生成简单的 QR 码

2024-04-08

我遇到了这个APIserver生成 QRCode 但我想知道是否可以只使用 HTML 生成 QRcode 例如这就是我的想法

<input id="text" type="text" value="Please Enter Your NRIC or Work Permit" style="Width:20%"/> 
         
<img src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&amp;size=100x100" alt="" title="HELLO" />

在“标题”中,我相信您将在其中编写文本并生成二维码,我想知道如何创建一个文本框,以便我直接在网站上键入值。


你有想过这样的事情吗?https://jsfiddle.net/v7d6d1ps/ https://jsfiddle.net/v7d6d1ps/

您的 HTML 可以与您所拥有的类似,但添加了 onblur 事件。只有 HTML 无法做到这一点,所以我添加了 jQuery/JavaScript 组合。

<html>
    <head>
        <title>Testing QR code</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript">
            function generateBarCode()
            {
                var nric = $('#text').val();
                var url = 'https://api.qrserver.com/v1/create-qr-code/?data=' + nric + '&amp;size=50x50';
                $('#barcode').attr('src', url);
            }
        </script>
    </head>
    <body>
        <input id="text" type="text" 
            value="NRIC or Work Permit" style="Width:20%"
            onblur='generateBarCode();' /> 

      <img id='barcode' 
            src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&amp;size=100x100" 
            alt="" 
            title="HELLO" 
            width="50" 
            height="50" />
    </body>
</html>

将其复制并粘贴到桌面上的 HTML 文件中。在文本框中输入 12345 并按 Tab 键。请注意,二维码将会更新。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

仅使用 HTML 生成简单的 QR 码 的相关文章

  • 一个PHP的QRcode类,与大家分享

    类的代码 View Code lt php eval gzinflate base64 decode 39 7X1td9s2svDn3nP2PzBZNZJiKRb1ZtmxvY 43 bOE3u2o5rp9u7N5v1oSTaZqO3UHQ
  • 二维码 ThoughtWorks.QRCode 之 index was outside bounds of the array

    最近在使用ThoughtWorks QRCode过程中 单独生成一个二维码没有出现过问题 在重复利用QRCodeEncoder生成二维码的过程中 会出现index was outside bounds of the array错误 经过调试
  • Vue引入qrcode.js实现生成二维码

    最近Vue音视频项目应用层中有JavaScript生成二维码的需求 所以记录下整个二维码生成的步骤 1 vue qr是基于qrcode js封装的vue库 可以动态生成二维码 并且可以自定义样式 npm install vue qr sav
  • phpqrcode固定二维码大小

    我们都知道一个二维码PHP API接口使用phpqrcode php文件编写很容易就可以写出一个API接口 网页所出现的二维码图像一般都是随内容的增加而增加 我想要一个固定的png图像尺寸大小 怎么办 一般网上都会给出答案说确定img的尺寸
  • 如何在Python中的qrcode中心插入标志?

    我在 python 中使用 pyqrcode 模块并用它生成 QR 码 如何将徽标放在二维码的中央 代码看起来像这样 import pyqrcode data Hello World number pyqrcode create data
  • 如何在 Zxing 扫描仪相机视图中添加按钮?

    我当前的 Zxing 扫描仪屏幕如下所示 我想在上面添加一个文本视图和几个按钮 我尝试了很多程序 但没有任何效果 任何人都可以指导我 我将虚心期待您的帮助 这是代码 Java文件 private ZXingScannerView mScan
  • Laravel 中的二维码

    我想制作qr码 在那里我可以制作它 但是当我想将qr码的格式更改为png文件时遇到麻烦 但它唯一的显示符号 这是我的观点 我使用这个二维码 simplesoftwareio simple qrcode 1 这是我的参考 https www
  • 如何为 Android 应用程序生成二维码? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 我需要在 Android 应用程序中创建二维码 并且需要一个库或源代码来让我在 Android 应用程序中创建二维码 我需要的库必须 不留下水印 例
  • 在ios中对简单字符串进行QRCode编码

    我已经从下载了示例代码github https github com myang git QR Code Encoder for Objective C用于 QRCode 编码 它工作正常 并为我指定的字符串生成带有 QRCode 的图像
  • 使用新的createbitmap方法时如何设置QR码的纠错级别

    这个问题参考API文档链接 http www blackberry com developers docs 7 0 0api net rim device api barcodelib BarcodeBitmap html http www
  • 如何将Zxing库包含到android项目中?

    我在 stackoverflow 上读过这个问题的一些答案 但它对我不起作用 我已经有一个项目 现在我想将二维码和条形码阅读器集成到我的项目中 我从以下位置下载了 zip 文件 core 2 2 zip https code google
  • 用python从左到右解码二维码

    我有一个带有几个二维码的 png 基本上看起来像这样 解码我使用的二维码zbarlight from PIL import Image import zbarlight file path tests qr codes png with o
  • 使用Python OpenCV将QR码旋转到正确的位置

    我是Python的初学者 目前正在研究二维码检测和解码 我很难将检测到的二维码旋转到正确的位置 我已经用过minAreaRect 旋转我的二维码 但它不起作用 有没有解决方法或正确的方法来做到这一点 谢谢 ROI2 cv2 imread R
  • 如何从zbar获取条码类型?

    在我的应用程序中 Zbar 可以完美解码 但问题是Zbar既可以解码二维码也可以解码条形码 那么解码后 如何获取Encoding Style的类型呢 ZBarSymbol 中的类型有返回码 您将寻找 ZBAR QRCODE 来获取 QR 码
  • 瑞典 BankID 使用 hmac 生成 Python 动画 QR 代码

    我正在开发一个 Django 项目 它将使用 BankID 进行授权和数字签名 我在用pybankid https github com hbldh pybankid 关于这个项目 我除了好话之外没有什么可说的 我的问题在于尝试使用bank
  • 我们可以在二维码中保存/存储多少数据/信息?

    我想使用这个脚本https github com jeromeetienne jquery qrcode https github com jeromeetienne jquery qrcode 或者有更好的解决方案吗 我喜欢做的是将一些小
  • 在 iPhone 和 Android 上生成 2D 条形码(例如 QR 码、Data Matrix、PDF417)

    我需要一个图书馆generateiPhone 和 Android 上的 2D 条形码 最好是 WM7 也可能是 j2me 其想法是将信息传输到具有相应扫描仪 解码器 的另一台设备 有哪些好的选择 ZXing http code google
  • 集成ZXing二维码扫描器,无需安装BarCode Scanner

    我正在尝试将 ZXing QR 码集成到我的 Android 应用程序中 而不安装条形码扫描仪应用程序 我已按照以下步骤操作 1 首先我下载了 ZXing zip文件并解压它 2 将ZXing项目作为android现有项目打开 然后转到an
  • 如何更改 CIFilter CIQRCodeGenerator 过滤器的背景色和前景色

    我正在尝试为 OS X 制作一个 QR 码生成器 但我还没有成功制作一个比黑白 QR 码更丰富多彩的 QR 码我正在使用 CIImage 过滤器的 CIQRCodeGenerator 我将如何制作这个工作我有一个示例代码 已在我的应用程序中
  • AVCaptureMetadataOutputObjectsDelegate 在 swift 4 中未针对 QR 扫描仪调用

    我正在 iOS 上开发 QR 码扫描仪应用程序 我正在获取输出AVCaptureOutput在委托方法上captureOutput didOutputMetadataObjects fromConnection 它在 swift 3 上完美

随机推荐