Vue实现生成二维码并且能下载到本地_vue-qr的使用

更新日期: 2018-09-18阅读: 10.6k标签: 二维码

vue-qr先说一下特点:带可以设置logo图片、背景图片、背景颜色、尺寸、边距等。


1、vue-qr的安装:

npm install vue-qr --save


2、在你要生成二维码的组件里面 

import VueQr from 'vue-qr'


3、在export default里面注册组件

components:{
   VueQr
}


4、在template里使用

<vue-qr  :logoSrc="config.logo" :text="config.value" :size="200" :margin="0"></vue-qr>


5、在js中

export default data(){retrun{ config: {
      value: 'www.baidu.com',//显示的值、跳转的地址
      logo:'static/img/logo.png'//中间logo的地址
}}}


6.简单的生成了二维码,这个生成的是img的二维码,要想生成canvas的二维码,得安装awesome-qr.js,  但是这个稍微复杂一些需要兼容你的node版本,很可能会报错。这个几乎就满足你的需求了,所以就不用搞那么多麻烦事了。


7.如果你想下载这个二维码,可以用html的 a标签的 download属性 具体实现方法如下: 

7.1-1 先获取到img标签的src, let url = document.querySelector('#qrcode img').src
7.1-2 动态创建一个a标签 let a = document.createElement('a')  
7.1-3 定义一个点击事件 let event = new MouseEvent('click')
7.1-4 设置下载图片的名称 a.download = “张三的二维码”//默认下载下面的文件格式为;张三的二维码.png 
7.1-5 让a标签的href = 图片的src a.href = url 
7.1-6 利用合成函数,执行event点击下载事件 a.dispatchEvent(event)  
7.1-7 源代码如下: 
downloadImg(){
      var oQrcode = document.querySelector('#qrcode img')
      var url = oQrcode.src
      var a = document.createElement('a')  
      var event = new MouseEvent('click')  
     // 下载图名字
     a.download = '张三的二维码'
     //url 
     a.href = url 
      //合成函数,执行下载 
      a.dispatchEvent(event)
}


vue-qr地址;https://github.com/Binaryify/vue-qr  

链接: https://fly63.com/article/detial/1086

qrcode.js_一款使用JavaScript生成/解析识别二维码的js库

qrcode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。 这篇文章主要讲解qrcode.js生成二维码,qrcode.js解析识别二维码等

网页中二维码识别规则,以及二维码识别常见问题

当客户端发现用户在网页的img标签内进行长按操作时,会立刻截屏并且启动二维码识别算法。所以这里用于二维码识别的图片是截屏,而不是之前有人提到的img标签中的图片。基于截屏识别,网页中二维码无法被识别的原因有这几个

Node.js在指定的图片模板上生成二维码图片并附带底部文字说明

Node.js在指定的图片模板上生成二维码图片并附带底部文字说明,但是如果我们希望生成的不仅仅是二维码,而是在一张给定的背景图上生成二维码,并在底部配上相应的文字说明,那么就需要借助于其它一些包来实现。

React 生成二维码/条形码的插件

qrcode 是一个js插件,具体可以github,这边不多介绍。 qrcode.react这个是修改为React的一个插件。 具体是生成二维码的原理是什么,这边也不多做介绍。

利用qrcode.js生成二维码

什么是 QRCode.js?QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

canvas生成带二维码的海报踩坑

绘制渲染的时候图像不显示:是因为图片异步加载,所以canvas的操作需要放在onload事件中,否则图片会不显示,因为图片不止一张,建议放在promise中,用async,await调用

【小草活码】提供微信群二维码突破100人限制和7天不过期的方法

微信群营销已经成为淘客、微商等较为流行的营销方式,我们都知道微信群未满100人之前群二维码是有效可扫码的,让粉丝通过扫码进群。但是人数一旦超过100人后,发出的二维码就失效了,无法再次扫码进群。必须通过邀请加入的方式

vue-qr生成下载二维码

安装vue-qr:npm install vue-qr --save;生成二维码实列;属性介绍:text要生成二维码的内容,size设置二维码大小,宽高相等,margin二维码与边框的距离,可以设置白边

three.js 制作属于自己的动态二维码

这是一个Uint8ClampedArray的类型化数组,这个数组出现最多的也是在imgData上。它会将负数归入0,大于255的数归入255,所以取模就不用了。我们再来看这个数组的长度是384400是怎么来的呢?

在UniApp的H5项目中,生成二维码和扫描二维码的操作处理

在我们基于UniApp的H5项目中,需要生成一些二维码进行展示,另外也需要让用户可以扫码进行一定的快捷操作,本篇随笔介绍一下二维码的生成处理和基于H5的扫码进行操作。二维码的生成,使用了JS文件weapp-qrcode.js进行处理

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!