H5 动态加载二维码并实现保存相册功能

由于项目需求，第一次写这种功能，在网上查了好久，最后终于找到个类似的

参考：https://juejin.im/post/6844903869542055950

 

思路：链接转化为二维码，然后利用qrcode转化为的base64图片用img加载出来，再利用浏览器的长按图片可以保存到相册功能保存图片

 

下面是我自己写的内容：

1、安装  qrcodejs2 （我这里安装默认版本不行，所以指定了一下），然后你只是需要链接转二维码的功能，可以安装@xkeshi/vue-qrcode.js包

npm install qrcodejs2 --save-dev

npm install --save @xkeshi/vue-qrcode //安装到生产环境

2、使用 

import QRCode from 'qrcode'

<div id="code"><canvas id="canvas" ></canvas></div>

import QRCode from 'qrcode'

getUrlCode() {
  var canvas=document.getElementById("canvas"); //获取到canvas
  var code=document.getElementById("code");   //获取到code容器
  QRCode.toCanvas(canvas,this.qrcodeUrl, error=> {
    if (error) {
      
    } else {
      
    }
  })
  var image = new Image();     //实例一个img
  image.src = canvas.toDataURL("image/png");  //转换成base64格式路径的png图片
  image.style.width = "40%";    //设置样式
  code.appendChild(image);     //添加到code 容器中
  canvas.style.display = "none";   //隐藏掉canvas
},