vue2.0生成二维码图片并且下载图片到本地

插件有很多方式，第一种用的qrcodejs2
第一步，安装依赖

cnpm install --save qrcodejs2

第二步，在页面中使用

<template>
  <div>
    <div @click="getQrcode">点击生成二维码</div>//生成二维码
    <div id="qrcode"></div> //创建一个div，并设置id为qrcode 
    <div @click="downs()">点击下载</div> //下载图片
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'  // 引入qrcode
export default {
    name : 'test',
　　data(){

　　　　return{
     　　　　link: 'http://test.wx.jia-r.com/temporaryCarIndex.html' //需要生成二维码图片的字符串
    　　}，
　　}
　　components:{QRCode },
 　 methods: {
       getQrcode(){
            document.getElementById('qrcode').innerHTML=''
             this.$nextTick (function () {//生成二维码
                this.qrcode();
            })
        },
        qrcode () {
            let that = this;
            let qrcode = new QRCode('qrcode', {
                width: 200,
                height: 200,        // 高度
                text:  this.link,   // 二维码内容
                // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
                // background: '#f0f',   // 背景色
                // foreground: '#ff0'    // 前景色
            })
        },
        downs(){
            // //找到canvas标签
            let myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas');
            let img=document.getElementById('qrcode').getElementsByTagName('img')
            // // //创建一个a标签节点
            let a= document.createElement("a")
            // //设置a标签的href属性（将canvas变成png图片）
            let imgURL=myCanvas[0].toDataURL('image/jpg');
            let ua = navigator.userAgent;
            if (ua.indexOf("Trident") != -1 && ua.indexOf("Windows") != -1) { // IE内核 并且  windows系统 情况下 才执行;
                var bstr = atob(imgURL.split(',')[1])
                var n = bstr.length
                var u8arr = new Uint8Array(n)
                while (n--) {
                  u8arr[n] = bstr.charCodeAt(n)
                }
                var blob = new Blob([u8arr])
                window.navigator.msSaveOrOpenBlob(blob, '下载' + '.' + 'png')
            }else if(ua.indexOf("Firefox") > -1){ //火狐兼容下载
                let blob = this.base64ToBlob(imgURL); //new Blob([content]);
                let evt = document.createEvent("HTMLEvents");
                evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
                a.download = ' ';//下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
                a.href = URL.createObjectURL(blob);
                a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
            }else{ //谷歌兼容下载
                img.src=myCanvas[0].toDataURL('image/jpg');
                // a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
                a.href=img.src
                //设置下载文件的名字
                a.download = "下载"
                 //点击
                a.click()
            }
        },
        //base64转blob
        base64ToBlob(code) {
            let parts = code.split(';base64,');
            let contentType = parts[0].split(':')[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;
            let uInt8Array = new Uint8Array(rawLength);
            for (let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], {type: contentType});
        }
  }
}
</script>

样式代码

<style lang='less'>
 #qrcode { //图片有白边填充css
    display: inline-block;
    img {
      width: 132px;
      height: 132px;
      background-color: #fff; //设置白色背景色
      padding: 6px; // 利用padding的特性，挤出白边
    }
  }
</style>

第二种，html2canvas
安装依赖

npm install --s html2canvas

运用在项目中

<template>
<div >
<!-- 此处是要截取的图片 -->
   <div id="imgDownload" ref="QRcodeSrcImg"  @click="maskShow=false">
        <div class="box">
          <canvas id="QRCode"></canvas>
          <p class="text">扫描二维码</p>
        </div>
      </div>
<!-- 此处是储存截取后的图片 -->
    <div class="photoShow" v-if="photoShow">
         <div id="photo">
            <p>长按图片保存</p>
            <img :src="photoUrl" id="img" alt="">
           <!-- <span>长按图片保存和分享</span> -->
         </div>
     </div>
<!-- 此处是保存到本地的方法 -->
      <div class="bottom" @click="imgDownload()">
        <div style="text-align: center;">
          <p style="font-size:1.4rem;margin-top:10px;color:#a5a4a4;;">保存到本地</p>
        </div>
      </div>

</div>
</template>
<script>
import html2canvas from "html2canvas"
export default {
data(){
   return{
       photoUrl:"",
      photoShow:false
    }
  },
methods: {
     // 图片保存方法
    imgDownload() {
      let _this = this;
      _this.photoShow = true;
      // 声明一个画布元素,存储需下载图片范围
      let canvas = document.createElement("canvas");
      // 获取需下载范围元素
      let img = this.$refs["QRcodeSrcImg"];
      // 图片高度
      var w = parseInt(window.getComputedStyle(img).width);
      // 图片宽度
      var h = parseInt(window.getComputedStyle(img).height);
      // 声明画布宽高
      canvas.width = w;
      canvas.height = h;
      canvas.style.width = w + "px";
      canvas.style.height = h + "px";
      // console.log(w, h);
      // let context = canvas.getContext("2d");
      // context.scale(2, 2);
      // 利用 html2canvas 下载 canvas
      html2canvas(img, { canvas: canvas }).then(function(canvas) {
             _this.photoUrl = canvas.toDataURL()
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.photoShow{
    background: rgba(0, 0, 0, 0.616);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    #photo{
     //保存图片容器大小
        width: 250px;
        img{
            display: block;
            width: 100%;
        }
    }
}
#imgDownload{
    width: 300px;
    height: 300px;
    background: red;
}
</style>

bug解决
第一点：在点击保存图片时，此时要保存的资源较多，造成模块并没有完全加载完毕，就已经生成了截图；
解决方案：(加上一个延时操作)

// 利用 html2canvas 下载 canvas
      setTimeout(() => {
        html2canvas(img, { canvas: canvas }).then(function(canvas) {
          _this.photoUrl = canvas.toDataURL();
        });
      }, 500);

第二点：滚轮滑动造成的，主要是html2canvas是根据body进行截图，若内容高度高于body时，就会出现这样的问题(大概意思就是有滚动条时造成的)
解决方案：(在生成截图前，先把滚动条置顶)

      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0