一个可以生成二维码的免费API接口

1、前言
生成二维码接口,能实现生成单一二维码和生成带logo的二维码功能。这个接口的主要特点是,可返回二维码的svg图片代码。

2、接口明细
注意:appKey 访问秘钥。
2.1 生成单一二维码
接口地址: https://api.i8n.com/api/qr
返回格式: JSON
请求方式: GET
请求示例: https://api.i8n.com/api/qr?appKey=你的appKey&text=内容
接口备注: 根据传入的内容生成二维码,可以选择获取二维码下载链接,也可以直接获取 svg 图片。

2.2 生成带logo二维码
接口地址: https://api.i8n.com/api/qr?appKey=你的appKey&text=logo
返回格式: JSON
请求方式: POST
请求示例:
https://api.i8n.com/api/qr?appKey=你的appKey&text=

接口备注: 根据传入的内容生成带logo的二维码,可以选择获取二维码下载链接,也可以直接获取 svg 图片。
返回示例:

{
    "code": 0,
    "data": {
        "value": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"162\" height=\"162\" viewBox=\"0 0 27 27\"><path d=\"M1 1h7v7h-7zM9 1h7v1h-1v2h2v1h-1v3h1v-1h1v3h2v-1h1v2h-1v1h-4v-2h1v-1h-2v-2h-1v-1h1v-1h-1v-1h-1v1h1v1h-1v1h-1v1h-1v-2h-1v-2h1v1h1v-1h-1v-1h1v-1h-1v1h-1v-1h-1zM19 1h7v7h-7zM2 2v5h5v-5zM13 2v1h1v-1zM20 2v5h5v-5zM3 3h3v3h-3zM9 3h1v1h-1zM21 3h3v3h-3zM17 5h1v1h-1zM9 6h1v2h-1zM13 7h1v3h-1v1h-1v1h1v1h1v1h1v1h-1v2h-2v1h-1v-2h-1v-1h1v-1h1v2h1v-2h-1v-1h-1v-1h-1v-2h2v-2h1zM10 8h1v1h-1zM1 9h1v1h-1zM3 9h1v1h3v1h-2v1h1v1h3v1h1v1h-2v-1h-1v1h-1v-1h-2v-1h-1v1h-1v-2h1v-1h-1v-1h1zM7 9h2v1h-2zM23 9h1v1h-1zM25 9h1v3h-1v-1h-1v-1h1zM14 10h1v2h-1zM22 10h1v1h1v1h-1v1h-2v2h-1v1h-1v-3h1v-1h2zM7 11h1v1h-1zM9 12h1v1h-1zM15 12h1v2h-1zM10 13h1v1h-1zM25 13h1v3h-1v-1h-1v-1h1zM16 14h1v2h-1zM1 15h3v1h-3zM5 15h1v3h-2v-1h1zM7 15h1v1h-1zM22 15h2v1h-1v1h-1v6h1v1h-1v1h-3v1h-5v-1h1v-1h-1v1h-2v-1h1v-2h-1v-1h2v-1h1v2h-1v1h2v2h1v-1h1v-1h-1v-1h-1v-2h1v-3h1v-1h1v1h1v-1h2zM8 16h2v3h1v7h-2v-1h1v-1h-1v-1h1v-3h-1v-3h-1zM15 16h1v2h-1v1h-1v-2h1zM1 17h2v1h-2zM7 17h1v1h-1zM24 17h1v1h-1zM18 18v3h3v-3zM25 18h1v2h-1zM1 19h7v7h-7zM12 19h1v1h-1zM19 19h1v1h-1zM2 20v5h5v-5zM24 20h1v1h-1zM3 21h3v3h-3zM25 21h1v1h-1zM19 22v2h1v-1h1v-1zM23 22h2v1h1v1h-2v-1h-1zM22 25h1v1h-1zM25 25h1v1h-1z\"/></svg>"
    },
    "message": "ok"
}
### 如何通过后端实现生成二维码API接口 要实现在后端生成二维码的功能,可以采用多种方法和技术栈。以下是基于Node.js构建一个简单的二维码生成API的过程。 #### 使用Node.js创建二维码生成API 为了完成这一目标,可以选择使用`qrcode`这样的NPM包来处理二维码生成逻辑[^1]。该模块支持将字符串转换为二维码图像,并提供灵活的配置选项以便自定义样式。 ```javascript const express = require('express'); const QRCode = require('qrcode'); // 创建Express应用实例 const app = express(); app.use(express.json()); // 定义路由用于接收请求参数并返回二维码图片 app.get('/generateQR', async (req, res) => { const { text } = req.query; // 获取查询参数中的文本数据 try { if (!text || typeof text !== 'string') throw new Error("Invalid input"); // 将输入文字编码成SVG格式的二维码图 let qrImage = await QRCode.toDataURL(text); return res.status(200).json({ success: true, data: qrImage }); } catch (error) { console.error(error.message); return res.status(400).send(`Error generating QR code`); } }); // 设置服务器监听端口 const PORT = process.env.PORT || 3000; app.listen(PORT, () => console.log(`Server running on port ${PORT}`)); ``` 上述代码片段展示了如何利用Express框架搭建RESTful API服务以及集成`qrcode`库来自动生成二维码。当客户端访问指定URL路径时,服务器会解析GET请求携带的数据字段[text],进而调用[qrcode.toDataURL()]函数将其转化为Base64编码形式存储于内存之中再反馈给前端展示出来。 #### 可选方案——调用第三方API 除了自行安装依赖项之外,还可以考虑直接对接已有的在线服务平台来进行操作[^2]。这种方式无需额外维护复杂的环境设置或者担心兼容性问题,只需按照官方文档说明发送HTTP POST/GET 请求即可获取所需资源文件下载地址链接供后续加载显示之用。 需要注意的是,在选用外部工具之前务必仔细阅读其条款协议内容,确保符合项目实际需求的同时也要注意保护个人隐私信息安全等方面的要求。 #### 前端渲染示例 如果希望进一步增强用户体验,则可以在网页内部嵌入动态效果让整个流程更加直观友好一些。下面给出了一段HTML+JavaScript组合而成的小例子作为参考[^3]: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Generate QR Code</title> <!-- 引入必要的CSS样式 --> <style>.qr-container{width:fit-content;margin:auto;padding-top:5rem;text-align:center}</style> </head> <body> <div class="qr-container"> <h2>Create Your Own QR Code Below:</h2><br/> <input id="textInput" type="url" placeholder="Enter URL here..." required/><button onclick="createQr()">Submit</button><hr /><img src="" alt="Generated QR Image" id="outputImg"/> </div> <!-- 添加JS脚本部分 --> <script src="https://cdn.jsdelivr.net/npm/qrcanvas@latest/dist/QRCanvas.min.js"></script> <script> function createQr() { var urlValue = document.getElementById('textInput').value.trim(); if(urlValue === "") alert("Please provide valid link!"); else{ QRCanvas({ el:'#outputImg', value:urlValue, size:200, colorDark:"#000", colorLight:"#fff" }) } } </script> </body> </html> ``` 此页面允许访客键入任意网址之后点击按钮触发事件处理器执行对应的动作序列最终呈现出可视化的成果物。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Dark智行者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值