分享一个免费的二维码生成接口

小编以前每当需要二维码的时候,就会到 草料二维码 去制作一张,然后下载图片。

这样做,一张两张还能搞一搞,但需求量增多后显得十分麻烦。

So,小编经过探索终于找到了一个免费的二维码生成接口。虽然有些简陋,但勉强能满足需求。

V2,2020-7-31更新

V2代码如此简单,就不用细讲了吧?

<script>
  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()
</script>

查看效果

直接看成果:

http://www.yixzm.cn/qrcode?target=http://www.yixzm.cn

可以直接在图片src里这么写:

http://www.yixzm.cn/qrcode?target=http://www.yixzm.cn

Demo示例

有需要的同学快快拿走~

实现效果如下图:传送门

在这里插入图片描述

V1,据反馈使用不很方便,现已弃用

接口文档

Request URL: http://mock.xunsu.online/sdk/about/qrcode

Request Method: POST

Payload:

{"url":"http://www.xunsu.online"}
接口说明

请求类型是POST,传json格式的payload,只需要URL一个字段

Axios 实现源码关键部分

HTML

<img id="qrcode-img" src="">
<input id="domain" placeholder="示例:http://www.xunsu.online"/>
<button id="btn-build">生成二维码</button>

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();
}
版权声明

弈心博客


本文首发site_name,转载请附上博文链接!