小编以前每当需要二维码的时候,就会到 草料二维码 去制作一张,然后下载图片。 这样做,一张两张还能搞一搞,但需求量增多后显得十分麻烦。 So,小编经过探索终于找到了一个免费的二维码生成接口。虽然有些简陋,但勉强能满足需求。
V2代码如此简单,就不用细讲了吧?
function $(id) {
return document.getElementById(id)
}
function getQrcode() {
let api = '/index/about/qrcode'
let target = $('domain').value || 'http://www.yixzm.cn'
$('qrcode-img').src = `http://${location.host}${api}?target=${target}`
}
$('btn-build').onclick = function () {
getQrcode();
}
getQrcode()
直接看成果:
http://www.yixzm.cn/qrcode?target=http://www.yixzm.cn
可以直接在图片src里这么写:
http://www.yixzm.cn/qrcode?target=http://www.yixzm.cn
有需要的同学快快拿走~ 实现效果如下图:传送门
接口文档 Request URL: http://mock.xunsu.online/sdk/about/qrcode Request Method: POST Payload:
{"url":"http://www.xunsu.online"}
接口说明 请求类型是POST,传json格式的payload,只需要URL一个字段 Axios 实现源码关键部分 HTML
生成二维码
JavaScript
function getQrcode() {
let api = 'http://mock.xunsu.online/sdk/about/qrcode'
let url = $('domain').value || 'http://www.xunsu.online'
let payload = {
url: url
}
let config = { responseType: 'arraybuffer' };
axios.post(api, payload, config).then(response => {
return 'data:image/png;base64,' + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
}).then(data => {
$('qrcode-img').src = data;
})
}
$('btn-build').onclick = function () {
getQrcode();
}