JS生成二维码分享

一、通过引入方式使用总结（原生或Jquery）

• 不需要依赖任何库

• 主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,

• 基本用法

• 设置参数方式

   var qrcode = new QRCode(document.getElementById("qrcode"), {
     text: 'url',// 二维码地址
     width: 256,//图像宽度
     height: 256,//图像高度
     colorDark : '#000000',//  前景色
     colorLight : '#ffffff',//背景色
     correctLevel : QRCode.CorrectLevel.H//容错级别可设置为 QRCode.CorrectLevel.L  QRCode.CorrectLevel.M  QRCode.CorrectLevel.Q  QRCode.CorrectLevel.H
   });
  

• 使用API

  qrcode.clear(); // 清除代码，仅在不支持 Canvas 的浏览器下有效
  qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码，或用于动态生成二维码
  

Qrcode 库及实例下载
GitHub

二、 模块导入方式

• 安装qrcode.js

  npm install qrcode
  

• 引用

  import QRCode from 'qrcode' //引入qrcode
  export default{
    data(){
      return {
     }
    },
  components: {
    QRCode: QRCode //引入 QRCode组件
  },
  methods:{
    useqrcode(url){
      //一、直接生成写法,不转canvas
      let qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 132,  
        height: 132,
        text:url, // 二维码地址
        colorDark : "#000",
        colorLight : "#fff",
      })
      //二、转canvas写法
      var canvas = document.getElementById('canvas')
      QRCode.toCanvas(canvas, url, function (error) {
        if (error) console.error(error)
        console.log('success!');
      })
    }
  },
  mounted(){
      this.useqrcode('https://www.baidu.com');//调用生成二维码的方法
    }
  }
  

• 页面部分

三、 使用vue-qriously

• qrcode.js存在长度限制

• 安装

  npm install --save vue-qriously
  

• 引入

  // ES6
  import Vue from 'vue'
  import VueQriously from 'vue-qriously'
  Vue.use(VueQriously)
  

• 使用

注：在微信内置浏览器下均可长按实现识别二维码和保存图片