首页 > 其他分享> 文章详细

生成二维码方式集合

2021-04-12 18:29:42 阅读：278 来源： 互联网

标签：canvas vue 生成 qrcode 二维码集合 import

现在二维码是愈发流行，无论app、pc页面、小程序、公众号等平台几乎都能看见二维码的身影。下面将讲述前端生成二维码的几种方式。

文章目录

1、qrcode.js插件

官方网站：https://github.com/davidshimjs/qrcodejs

qrcode.js文件下载：qrcode.js

1.1 引入

<!-- 引入jquery扩展库 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js</script> 
<script type="text/javascript" src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<!-- 引入js库，无需jquery库 -->
<script src="http://www.itxst.com/package/qrcodejs/qrcode.min.js"></script>

1.2 参数说明

引入jquery的情况

获取选择器：

var code = jQuery(“idName”); // 可以使用类名、ID名、标签名

生成二维码：

code.qrcode(url); // url 指代二维码指向的方向

引入单纯的js库

属性	描述
text	生成的二维码指向的url
render	输出格式，支持svg、png
width	二维码的宽度
height	二维码的高度
colorDark	方形框用于描绘二维码线条的颜色
colorLight	方形框中非二维码线条部分的颜色
correctLevel	纠错级别

纠错级别：表示二维码能被解析的范围，并不是说范围越低越好，越高越好；需要考虑实际的情况去设置。当二维码的受损几率很小时（固定的网页上）尽量使用减小的范围；受损几率较高时（打印在某物品上）则应该使用较大的范围

纠错级别	描述
L	最大 7% 的错误能够被纠正识别
M	最大 15% 的错误能够被纠正识别
Q	最大 25% 的错误能够被纠正识别
H	最大 30% 的错误能够被纠正识别

1.3 使用

引入jquery的情况

<body>
	<div id="qrcode"></div>
	<script>
		jQuery('#qrcode').qrcode("https://www.baidu.com"); 
	</script>
</body>

引入单纯的js库

<div id="qrcode"></div>
<script type="text/javascript">
 var qrcode = new QRCode(document.getElementById("qrcode"), {
	text: "https://www.baidu.com",
   render:  "svg",
	width: 128,
	height: 128,
	colorDark : "red",
	colorLight : "#cccccc",
	correctLevel : QRCode.CorrectLevel.H
});

在这里插入图片描述

2、vue-qrcode（参考）

官方网站：https://github.com/fengyuanchen/vue-qrcode

文件下载：http://img1.itxst.com/a/8/a8e55f727e373d50d828264f7e5337f5.zip

2.1 安装与引入

NPM方式

npm install @chenfengyuan/vue-qrcode --save

<template>
	<qrcode :value="'https://www.baidu.com'"></qrcode>
</template>
<script>
import Vue from "vue"
import VueQrcode from "@chenfengyuan/vue-qrcode";
//注册vue-qrcode组件
Vue.component(VueQrcode.name, VueQrcode);
export default {}
</script>

本地文件引入

<!-- 前提需要引入vue环境 -->
<script src="./vue-qrcode.min.js"></script>

2.2 参数说明

value：二维码的指向内容

options参数	说明
errorCorrectionLevel	纠错级别（与qrcode相同）
type	渲染成的元素（支持png, svg, utf8默认png）
margin	间距（二维码内容距离边距的大小）
width	二维码宽度，由于是正方形，不需要高度
color	颜色（子属性：dark——前景色；light——后景色）

2.3 使用

<template>
	<qrcode 
    value="https://www.baidu.com"
	:options="options"
	></qrcode>
</template>
<script>
import Vue from "vue"
import VueQrcode from "@chenfengyuan/vue-qrcode";
//注册vue-qrcode组件
Vue.component(VueQrcode.name, VueQrcode);
export default {
    data(){
        return {
            options: {
                errorCorrectionLevel: "L",
				type: "image/png",
                margin: 1,
                width: 130,
                color: {
                    dark: "#00ff00",
                    light: "#ebebeb"
                }
            }
        }
    }
}
</script>

在这里插入图片描述

3、qrcode.vue组件

3.1 安装与引入

npm方式

npm install qrcode.vue --save

<template>
	<qrcode-vue
	:value= "'https://www.baidu.com'"
	></qrcode-vue>
</template>
<script>
import qrcodeVue from 'qrcode.vue';
export defaule {
	components: {
		qrcodeVue,
	}
}
</script>

3.2 使用

<template>
	<div class="qrcode">
    	<qrcode-vue 
		:value= "'https://www.baidu.com'" 
		:size= "130"
		></qrcode-vue>
		<br />
  	</div>
</template>
<script>
import qrcodeVue from 'qrcode.vue';
export defaule {
	components: {
		qrcodeVue,
	}
}
</script>

在这里插入图片描述

3.3 下载生成的二维码

由于qrcode.vue组件是通过canvas标签实现的，可以将其下载保存在本地

<template>
	<div class="qrcode">
    	<qrcode-vue 
		value= "https://www.baidu.com" 
		:size= "130"
		></qrcode-vue>
		<br />
  	</div>
</template>
<script>
import qrcodeVue from 'qrcode.vue';
export defaule {
	components: {
		qrcodeVue,
	},
    methods: {
    	handledown() {
      	//获取canvas标签
      	let canvas = document.getElementsByClassName('qrcode')[0].getElementsByTagName('canvas')
      	//创建a标签
      	let a = document.createElement('a')
      	//获取二维码的url并赋值地址为a.href
      	a.href = canvas[0].toDataURL('img/png')
      	//设置下载文件的名字
      	a.download = '二维码图片'
      	//点击事件，相当于下载
      	a.click()
    },
}
</script>

PS. toDataURL方法用于将画布生成为图片：canvas API

HTMLCanvasElement.toDataURL()方法返回一个包含图片展示的data URI。可以使用type参数表示其类型，默认为PNG格式。图片的分辨率为96dpi。

canvas.toDataURL(type , encoderOptions );

（Chrome支持 “image/webp”类型）

4、小程序

官方网站：wx.canvasToTempFilePath

4.1 相应的API

wx.canvasToTempFilePath(Object object , Object this)

使用画布绘制出特定大小、规格的图片

通过获取该图片的 url 并使用 image 标签展示实现生成二维码

PS. 需要在 canvas 的 draw() 回调里调用该方法才能保证图片导出成功

4.2 API参数

object参数	说明	默认值
x	画布区域的左上角横坐标	0
y	画布区域的左上角纵坐标	0
width	画布区域的宽度	canvas宽度
height	画布区域的高度	canvas高度
destWidth	生成的图片宽度	width*屏幕像素密度
destHeight	生成的图片高度	height*屏幕像素密度
canvasId	画布的ID
success	调用成功的回调函数（参数：res：tempFilePath——生成的文件的临时路径）
fail	调用失败的回调函数
complete	调用完成的回调函数

4.3 使用

<template>
	<canvas
	canvas-id= "qrcode"
	></canvas>
	<image />
</template>
<script>
wepy.page({
	data: {
	
	},
	methods: {
		createImage(){
		let obj = {
    		x: 0,
    		y: 0,
    		width: width,
    		height: width,
    		canvasId: "qrcode",
    		success: (res) => {
      			console.log(res.tempFilePath)
      			// 返回的 res 对象中存在 temFilePath (生成文件的临时路径(本地路径))
    		},
    		fail: (res) {
      			console.log('二维码生成失败 ', res)
    		}
  		}
  		wx.canvasToTempFilePath(obj) // 绘制	
		}
	}
})

未完待续…

5、二维码扩展——带logo及背景（vue-qr）

官方网站：https://www.npmjs.com/package/vue-qr

本地下载：vue-qr

5.1 安装与引入

npm方式

npm insatll vue-qr --save

<template>
	<vue-qr
	:text= "'https://www.baidu.com'"
	></vue-qr>
</template>
<script>
//导入vue和vue-qrcode
import Vue from "vue";
import VueQr from 'vue-qr';
//注册vue-qrcode组件
Vue.component(VueQr.name, VueQr);
</script>

CDN方式

需要注意的是logo图片和二维码背景图片必须和网页在同一个域名下面否则会有跨域问题，只能生成二维码而无法显示图片和logo
```
<script src="http://www.itxst.com/package/vue/vue.min.js"></script>
<script src="http://www.itxst.com/package/vue-qr/vue-qr.js"></script>
```

5.2 参数说明

参数	描述
text	二维码内容
correctLevel	纠错级别0-3
size	二维码宽高
margin	二维码内容距离边距的大小
colorDark	前景色，autoColor为true时无效
colorLight	后景色，autoColor为true时无效
bgSrc	二维码背景图
gifBgSrc	gif作为背景图
backgroundColor	背景颜色
logoSrc	二维码中间的logo的url地址
logoMargin	logo距离周边的位置，默认为0
logoBackgroundColor	当logoMargin不为0时，空白区域的颜色
logoCornerRadius	logo的圆角大小，默认为0
whiteMargin	是否绘制白边
dotScale	二维码数据点的缩小比例，默认为0.35，如果背景图片不清晰可以缩小这个值
bindElement	默认true,否需要自动将生成的二维码绑定到HTML上。
callback	生成成功的回调函数，第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid，因为是异步生成，所以需要用到qid
autoColor	是否把背景图片的主色作为数据点的颜色
binarize	若为 true, 图像将被二值化处理

5.3 使用

<template>
	<vue-qr
	:text= "text"
	:logoSrc= "logoSrc"
	:colorDark= "colorDark"
    :autoColor= "autoColor"
	:size= "size"
	></vue-qr>
</template>
<script>
//导入vue和vue-qrcode
import Vue from "vue";
import VueQr from 'vue-qr';
//注册vue-qrcode组件
Vue.component(VueQr.name, VueQr);
export default {
    data(){
		return {
            text: 'https://www.baidu.com',
            logoSrc: 'http://192.168.2.103:8080/bg0.png',
            colorDark: '#00ff00',
            autoColor: fale,
            size: 120,
        }
    }
}
</script>

标签：canvas,vue,生成,qrcode,二维码,集合,import
来源： https://blog.csdn.net/qq_44708990/article/details/115633908

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

生成二维码方式集合

文章目录

1、qrcode.js插件

1.1 引入

1.2 参数说明

1.3 使用

2、vue-qrcode（参考）

2.1 安装与引入

2.2 参数说明

2.3 使用

3、qrcode.vue组件

3.1 安装与引入

3.2 使用

3.3 下载生成的二维码

4、小程序

4.1 相应的API

4.2 API参数

4.3 使用

5、二维码扩展——带logo及背景（vue-qr）

5.1 安装与引入

5.2 参数说明

5.3 使用