【PHP】二维码在线生成与解码附源码+Api|不死鸟资源网

PHP 运行环境，附上源代吗，也是利用开源库自己搭建写的 api, 当前可 api 引用，

Api 源代码内提取一下就行，暂时未做限制，后期如流量过大将关闭跨站访问！

源代码直接上传在自己网站任意目录下即可使用无其它限制，无需修改代码配置！

如需自己搭建可以参考以下开源库：

1l php-qrcode

2. qr-reader

使用以下源代码可以直接使用库中功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code Reader</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            position: relative;
            background-image: linear-gradient(to right, #fed6e3, #c0efec);
 }
a {
    text-decoration: none;
    color: inherit; /* 保持链接与文本的颜色一致 */
}
a:hover {
    text-decoration: none; /* 悬停时显示下划线 */
    color: #ff6a6a; /* 悬停时改变颜色 */
 /* font-size:  1.02em;设置正文字体大小 */
}

input[type="text"] {
    width: 300px; /* 输入框宽度 */
    height: 30px; /* 输入框高度 */
    padding: 4px; /* 内边距，增加文本与边框的距离 */
    border: 2px solid #ff6aaa; /* 边框颜色和样式 */
    border-radius: 5px; /* 圆角边框 */
    font-size: 18px; /* 字体大小 */
    font-family: Arial, sans-serif; /* 字体样式 */
    color: #333; /* 文本颜色 */
    background-color: #fff; /* 背景颜色 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
}

/* 当输入框获得焦点时 */
input[type="text"]:focus {
    border-color: #ff3b8a; /* 聚焦时边框颜色 */
    box-shadow: 0 0 8px rgba(255, 59, 138, 0.5); /* 聚焦时阴影效果 */
    outline: none; /* 去掉默认的焦点轮廓 */
}

/* 提示文本样式 */
input[type="text"]::placeholder {
    color: #bbb; /* 占位符文本颜色 */
    font-style: italic; /* 占位符文本样式 */
}
button {
    padding: 10px 20px; /* 内边距 */
    font-size: 16px; /* 字体大小 */
    color: white; /* 字体颜色 */
    background-color: #ff6aaa; /* 背景颜色 */
    border: none; /* 去掉默认边框 */
    border-radius: 5px; /* 圆角边框 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    transition: background-color 0.3s ease, transform 0.2s; /* 添加过渡效果 */
}

/* 鼠标悬停效果 */
button:hover {
    background-color: #ff3b8a; /* 悬停时更改背景颜色 */
    transform: translateY(-2px); /* 悬停时上移 */
}

/* 鼠标按下时效果 */
button:active {
    transform: translateY(0); /* 恢复到原始位置 */
}

        .qrimg {
            width: 350px;
            height: 350px;
            background-color: #ff6aaa;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            padding: 5px;
            box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
        z-index: 1000;
 }
        .qrimg img {
            width: 100%;
            height: 100%;
        }
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
        }
        .phone {
            width: 100%;
            height: 40px;
            position: fixed;
            text-align: center;
            background-image: linear-gradient(to right, #fed6e3, #c0efec);
        }
        .dropzone {
            width: 330px;
            height: 200px;
            border: 3px dashed #ff6a6a;
            border-radius: 8px;
            text-align: center;
            line-height: 200px;
            color: #999;
            margin: 20px auto;
            cursor: pointer;
            position: relative;
        }
        .dropzone input[type="file"] {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
        }

        /* 确保页脚始终在底部 */
        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            text-align: center;
            background-color: #f9f9f9;
            border-top: 1px solid #e7e7e7;
            padding: 6px 0;
        }
    </style>
</head>
<body>
<br><br>
    <div class="phone">
        <input type="text" id="textInput" placeholder="请输入文本" /> 
        <button id="generateButton">生成二维码</button>

    </div>

    <!-- 遮罩层 -->
    <div class="overlay" onclick="hideQRCode()"></div>

    <!-- 二维码区域 -->
    <div class="qrimg">
        <img id="qrcodeImage" alt="二维码" />
    </div>

    <br><br>    <br><br>

<div style="color: #ff6a6a;text-align: center;"><h2>选择或拖放二维码图像</h2></div>


    <!-- Combined input and drop zone -->
    <div id="dropzone" class="dropzone">
        将图像拖放到此处或单击以选择
        <input type="file" id="fileInput" accept="image/*">
    </div>

    <br>

    <!-- Area to display the decoded QR code text -->
    <div id="result" style="text-align: center;"></div>

    <script>
        // File input change event
        document.getElementById('fileInput').addEventListener('change', function(event) {
            processFile(event.target.files[0]);
        });

        // Drop zone handling drag-and-drop functionality
        const dropzone = document.getElementById('dropzone');
        dropzone.addEventListener('dragover', function(e) {
            e.preventDefault();
            dropzone.style.borderColor = 'green';
        });

        dropzone.addEventListener('dragleave', function() {
            dropzone.style.borderColor = '#ccc';
        });

        dropzone.addEventListener('drop', function(e) {
            e.preventDefault();
            dropzone.style.borderColor = '#ccc';
            const file = e.dataTransfer.files[0];
            if (file) {
                processFile(file);
            }
        });

        // Function to send the file to the server and display the decoded QR text
        function processFile(file) {
            const formData = new FormData();
            formData.append('qrcode_image', file);

            fetch('https://www.ximi.me/themes/book/readqr/upload.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.text())
            .then(text => {
                document.getElementById('result').innerText = '解码后的二维码文本:   ' + text;
            })
            .catch(error => {
                document.getElementById('result').innerText = 'Error: ' + error;
            });
        }

        // 点击生成二维码按钮的处理函数
        document.getElementById('generateButton').onclick = function() {
            var textInput = document.getElementById('textInput').value;
            var currentPageUrl = encodeURIComponent(window.location.href);
            var qrCodeImage = document.getElementById('qrcodeImage');
            
            if (textInput) {
                // 拼接文本和当前页面的 URL// + " | 当前页面URL: " + currentPageUrl
                var combinedText = textInput;
                // 创建二维码链接
                var qrCodeUrl = 'https://www.ximi.me/themes/book/ximi.php?page_url=' + encodeURIComponent(combinedText);
                qrCodeImage.src = qrCodeUrl;

                // 显示二维码和遮罩层
                showQRCode();
            } else {
                alert('请输入文本生成二维码');
            }
        };

        // 显示二维码和遮罩层
        function showQRCode() {
            document.querySelector(".qrimg").style.display = "block";
            document.querySelector(".overlay").style.display = "block";
        }

        // 隐藏二维码和遮罩层
        function hideQRCode() {
            document.querySelector(".qrimg").style.display = "none";
            document.querySelector(".overlay").style.display = "none";
        }
    </script>
<script>

function mailText(event) {
  // 阻止默认的链接行为
  event.preventDefault();

  // 弹出文本消息B
alert('Email: admin@ximi.me');
}
</script>
<div class="footer">
<p>本站服务器无任何缓存，仅提供学习交流所用，请勿用于非法用途，！</p>
<p>© 2024 「 <a href="https://www.ximi.me/" target="_blank" rel="noopener noreferrer">ximi</a>  」All Rights Reserved</p>
<p>
<a href="#" onclick="mailText(event)">联系我</a> | 
<a href="https://www.ximi.me/about.html" target="_blank" rel="noopener noreferrer">关于我</a> | 
<a href="https://ere.cc/" target="_blank" rel="noopener noreferrer">域名出售</a>  
</p>
</div>  
<script src="https://sing.ge/read/Read_address.js" defer></script>
</body>
</html>

本站资源均为作者提供和网友推荐收集整理而来，仅供学习和研究使用，请在下载后24小时内删除，谢谢合作!