vue2.0

前言

  今天在开发中，使用了qrcodejs2插件生成二维码图片。因为是在移动端当中，需要自适应不同分辨率。但是，发现了个问题。生成的canvas画布宽高无法自适应，并且配置项中的宽高因为是不能用px单位，也不能用百分比的，就导致不同分辨率下，宽高固定死了，没办法自适应。

配置项

安装qrcodejs2插件

npm install qrcodejs2 --save

使用 html

<div id="qrcode" ref="qrcode"></div>

js

<script>
  import QRCode from 'qrcodejs2'//引用插件
  export default {
    name: "index",
    data() {
      return {
        id:''
      }
    },
    mounted() {
      this.id = this.$route.query.id;
      this.load()
    },
    methods: {
      //获取图片的地址
      load(){
        const params ={
          'id':this.id
        }
        this.$request.getQueryById(params).then((res)=>{
          this.$nextTick(() => {
              this.getQRcode(res.qrCode)
          })
        })
      },
      //渲染二维码
      getQRcode(text) {
      	//通过获取页面的宽高乘以你计算好的所需宽高的百分比
        let long = document.documentElement.clientWidth*0.43;
        new QRCode('qrcode', {
          width:long,
          height:long,
          text, //图片地址
        })
      },
  }
</script>

公式

比如：你默认设置二维码图片宽高为180×180，页面宽高为375×846
width = document.documentElement.clientWidth*(180/375)；
height = width；

这样，不同分辨率下，都会进行重新计算，就能够实现二维码也跟着分辨率的不同而自适应的效果。