前端（Vue）怎么实现二维码生成

功能需求： 输入链接或文字，生成二维码

效果演示：

输入网址

使用手机扫码

输入文字

扫描二维码

好，现在我们开始编程，简单介绍一下思路：找到一个免费的二维码生成api接口，进行对接

我用到的是一个叫FREE API的网站，里面有许多免费的接口，初学前端的友友们可以用这个网站进行练习。

网址：https://www.free-api.com/

接下来我们找到二维码生成的接口技术文档,进入官方文档

通过接口文档，我们知道，需要写一个axios请求，然后传入text和size参数

generaterQRcode() {
   
   //生成二维码的axios请求
      this.axios({
   
   
        methods: "get",
        url: "https://api.oick.cn/qrcode/api.php",//接口地址
        params: {
   
   
          text:"早上好",//参数，这里是静态的
          size:200,
        },
      }).then((res) => {
   
   
        console.log('点击成功');
        let imgurl=res.data;
        this.QRcode.imgurl=imgurl;//图片链接
      });
    },

但是这样会出现一个问题

后端传回来的是一个图片，而不是一个URL，所以我们需要在请求头加上

responseType: "blob"

然后调用自带的window.URL.createObjectURL()函数来创建URL

let imgurl