qr二维码

jq实现二维码

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="referrer" content="always" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit" />
    <meta name="keywords" content="JS 生成二维码" />
    <meta name="description" content="JS 生成二维码" />
    <title>JS 生成二维码  -by wgscd</title>
</head>

<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<div id="output"></div>
<script>
    // 转中文内容UTF-8
    function toUtf8(str) {
        var out, i, len, c;
        out = "";
        len = str.length;
        for (i = 0; i < len; i++) {
            c = str.charCodeAt(i);
            if ((c >= 0x0001) && (c <= 0x007F)) {
                out += str.charAt(i);
            } else if (c > 0x07FF) {
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            } else {
                out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            }
        }
        return out;
    }
    // 设置二维码参数
    function make() {
        $('#output').qrcode({
            render: "table", // 设置渲染方式(有两种方式 table和canvas，默认是canvas）
            width: 200, // 宽度
            height: 200, // 高度
            background: "#FFFFFF", // 背景颜色
            foreground: "#000000", // 前景颜色
            correctLevel: 0, // 纠错等级
            src: 'images/logo4.png',
            // text: 'https://blog.share888.top/nav/'
            text: toUtf8("二维码生成前端插件：jquery.qrcode.min.js") // 任意内容
        });
    }
    make();
</script>

<p>JS 生成二维码</p>
</body>
</html>

qrcode框架实现

shell

npm install qrcode

vue

<script setup>
import {onBeforeMount, onMounted} from 'vue'

import QRCode from 'qrcode';

const qrCodeText = 'https://blog.share888.top/nav/';

onMounted(() => {
  QRCode.toDataURL(qrCodeText, {errorCorrectionLevel: 'H'}).then((url) => {
    const qrCodeImage = document.getElementById('qrcode');
    qrCodeImage.src = url;
  });
})

</script>

<template>
  <img id="qrcode" alt="QR Code"/>
</template>

<style scoped>

</style>

qr二维码 ​

jq实现二维码 ​

qrcode框架实现 ​

qr二维码

jq实现二维码

qrcode框架实现