qrcode.js生成二维码，将canvas改成img，并长按保存

个人blog，欢迎关注加收藏

qrcode.js生成二维码：

1、 安装qrcode.js：
npm install qrcode

2、 html内容：

<template>
  <div id="QRCode"> <!-- 保存二维码的容器 -->
        <div id='code'></div> 
        <canvas id="canvas"></canvas>
    </div>
</template>

3、 js部分：

import QRCode from 'qrcode' //引入qrcode
  export default{
    data(){
      return {
      }
    },
    components: {
      QRCode: QRCode //引入 QRCode组件
    },
    methods:{
      useqrcode(url){//url是生成二维码的内容
        var canvas = document.getElementById('canvas')
        QRCode.toCanvas(canvas, url, function (error) {
          if (error) console.error(error)
          console.log('success!');
        })
      }
    },
    mounted(){
      this.useqrcode('www.baidu.com');//调用生成二维码的方法
    }
  }

将canvas修改为img：

在方法useqrcode(url)中加入以下代码：

useqrcode(url){//url是生成二维码的内容
    let _this = this;

    let fatherQrcode = document.getElementById('QRCode');           
    //先清除fatherQrcode的img子节点：防止重复添加
    let childs = fatherQrcode.children; 
    console.log(childs);
    for(var i = childs .length - 1; i >= 0; i--) {
        // console.log(typeof childs[i])
        if(childs[i].className == "QRCode"){
            fatherQrcode.removeChild(childs[i]);
        }
    }


    //生成二维码
    var canvas = document.getElementById('canvas')
    QRCode.toCanvas(canvas, url, function (error) {
      if (error) console.error(error)
      console.log('success!');



       //获取网页中的canvas对象转换为img
        var mycanvas1=document.getElementsByTagName('canvas')[0];
        mycanvas1.style.display = 'none'//隐藏生成的canvas
        //将转换后的img标签插入到html中
        var img=_this.convertCanvasToImage(mycanvas1);
        img.classList.add("QRCode");//为img添加类名QRCode
        fatherQrcode.append(img);//imagQrDiv表示你要插入的容器id

    })
  },
  //转换为img
    convertCanvasToImage(canvas) {
        //新Image对象，可以理解为DOM
        var image = new Image();
        // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
        // 指定格式 PNG
        image.src = canvas.toDataURL("image/png");
        return image;
    },

长按保存图片

css部分：

/* 二维码长按保存图片 */
.share>>>img.QRCode{
    -webkit-touch-callout:default;
}