谷歌的二维码接口好像开放十几年了,但是如果我没有记错的话,在今年2021年,谷歌在自家的产品chrome上使用了。

我稍微的查了下,貌似现在网上很多二维码接口也是从谷歌那过来的,所以,我也要有属于自己的谷歌二维码接口(哈哈哈哈哈)。

原始接口https://chart.googleapis.com/chart?cht=qr&chs=300×300&chl=这里填写内容

接口类型HTTP(GET)
接口返回值image/png
参数1.cht=qr 指定接口生成的图片类型,这里固定为qr,代表二维码。
2.chs=300 x 300 指定生成的图片尺寸。
3.choe=UTF-8 指定编码。
4.chld=L|4 未知,没有他自定义接口400
5.chl=生成内容在此填写
备注以上参数一定不能错,官方原滋原味

以上原始接口出于网络原因,在大陆是无法正常访问的,所以,我给替换了下api,以方便调用。

新接口https://qr.minibox.tk/chart?cht=qr&chs=150×150&choe=UTF-8&chld=L|4&chl=这里填写内容

……………………………….分割线…………………………………………..

接部分网友反应,会出现400现象….。这个估计是和官方的检测有关

所以,我不建议直接访问连接,故此我给你们一个简单的例子,代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码生成</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

</head>

<body>
    <div id="app">
        <input type="text" ref='urlVal'>
        <input type="button" @click=generate() value="生成">
        <br>
        <img :src=qr width="150" height="150" alt="QR 码" />
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    url: 'https://qr.minibox.tk/chart?cht=qr&chs=150x150&choe=UTF-8&chld=L|4&chl=',
                    val: '',
                    qr: ''
                }
            },
            methods: {
                generate() {
                    this.val = this.$refs.urlVal.value;
                    this.qr = this.url + this.val;
                }
            }
        })
    </script>
</body>

</html>

这样来使用,就不会出现400了,我测试了三天也没出现,单独访问链接就有,你们也可以试试。


版权声明:

如未注明,均为原创,转载需注明出处!

本文链接:https://jkgblog.com/1237.html

最后修改日期:2021年3月16日

作者

留言

这个比较实用,我之前也整了一个,用于侧栏滚动图标那里手机扫码访问。。。。

goodjob..试试先

撰写回覆或留言

发布留言必须填写的电子邮件地址不会公开。