qrcode 自定义二维码组件

qrcode 自定义二维码组件 `vue 自定组件`

1、安装 qrcode

npm install --save qrcode

2、介绍 toCanvas、toDataURL 用法

// toCanvas(canvasElement, text, [options], [cb(error)])
// 参数
// canvasElement 画布element
// text<String|Array> 需要编码的数据text
// options<Object> 配置项
// cb 回调方法
//

3、options 配置项

{version:"",// 二维码版本。如果未指定，将计算更合适的值。errorCorrectionLevel："M", // 纠错级别。low, medium, quartile, high , L, M, Q, HmaskPattern: 1, // 0、1、2、3、4、5、6、7toSJISFunc(){}, // margin:4, // 边距scale:4, // 每一个黑点的宽度width:4, // 二维码宽'color.dark':"#000000ff", // 二维码颜色'color.light':"#ffffffff" // 背景色
}

4、使用

import QRCode from 'qrcode'//promises
QRCode.toDataURL('kaixin').then(url => {console.log(url)}).catch(err => {console.error(err)})//  async/await
const generateQR = async text => {try {console.log(await QRCode.toDataURL(text))} catch (err) {console.error(err)}
}

vue 组件定义

<template><div class="qrcode"><canvas v-if="tag === 'canvas'" id="qrcode" /><div v-if="tag === 'img'"><img :src="qrcodeImageUrl" alt=""></div></div>
</template><script>
import QRCode from 'qrcode'
export default {name: 'Qrcode',props: {// 需要转换为二维码的值value: {type: [Number, String],default() {},required: true},// 生成二维码的形式tag: {type: String,default: 'img',validator: (v) => ['canvas', 'img'].includes(v)},// 二维码的宽width: {type: [Number, String],default() {return 100}},// 二维码的高height: {type: [Number, String],default() {return 100}},// logo地址, 带logo 一定是tag = canvaslogo: {type: String,default() {return ''},validator(v) {if (v) {const strRegex =/(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/return strRegex.test(v)}return true}}},data() {return {qrcodeImageUrl: ''}},watch: {value() {}},mounted() {if (this.tag === 'canvas') {// 判断是否需要带logoif (this.logo) {this.getLogoCanvas()} else {this.getCodeCanvas()}} else if (this.tag === 'img') {this.getCodeImage()}},methods: {canvasRoundRect(ctx) {return (x, y, w, h, r) => {const minSize = Math.min(w, h)if (r > minSize / 2) {r = minSize / 2}ctx.beginPath()ctx.moveTo(x + r, y)ctx.arcTo(x + w, y, x + w, y + h, r)ctx.arcTo(x + w, y + h, x, y + h, r)ctx.arcTo(x, y + h, x, y, r)ctx.arcTo(x, y, x + w, y, r)ctx.closePath()return ctx}},// 画logo二维码getLogoCanvas() {const canvas = document.getElementById(`qrcode`)const ctx = canvas.getContext('2d') // 获得渲染上下文和他的绘画功能// logoconst logoImage = new Image()logoImage.src = this.logo// qorcode 实例const qrcodeImage = new Image()// 画板canvas.width = this.width // 画板宽canvas.height = this.height // 画板高logoImage.onload = () => {QRCode.toDataURL(this.value, {errorCorrectionLevel: 'H',width: this.width,height: this.height,margin: 2}).then((url) => {qrcodeImage.src = urlqrcodeImage.onload = () => {// 画图// 参数：图片对象、相对画布的起点x坐标、相对画布的起点y坐标、绘制的图片宽度（二维码，px）、绘制的图片高度（二维码，px）ctx.drawImage(qrcodeImage, 0, 0, this.width, this.height)// 创建矩形ctx.rect((this.width - this.width * 0.3) / 2,(this.height - this.height * 0.3) / 2,this.width * 0.3,this.height * 0.3)ctx.fill()ctx.fillStyle = '#ffffff'ctx.fillRect(35, 35, 30, 30)// 把 logo 画到矩形里面ctx.drawImage(logoImage,(this.width - this.width * 0.24) / 2,(this.height - this.height * 0.24) / 2,this.width * 0.24,this.height * 0.24)// console.log(canvas.toDataURL())}})}},getCodeCanvas() {QRCode.toCanvas(document.getElementById(`qrcode`),this.value,{width: this.width,height: this.height,errorCorrectionLevel: 'H',margin: 2},function(error) {if (error) console.error(error)// console.log('success!')})},getCodeImage() {QRCode.toDataURL(this.value, {errorCorrectionLevel: 'H',width: this.width,height: this.height,margin: 2}).then((url) => {this.qrcodeImageUrl = url}).catch((err) => {console.error(err)})}}
}
</script>

qrcode 自定义二维码组件相关推荐

C# QRCode自定义二维码大小
当设置了QRCodeVersion=0之后,二维码的大小会根据文字内容改变,但是更多时候希望二维码的大小由参数指定,通过设置QRCodeScale也可以一定程度上改变大小,不过有个精度问题,我测试了下 ...
QRCode自定义二维码中间图片
本文转载自: 点击查看转载出处第一步: 下载所需文件需要下载的文件, 点我下载第二步: HTML 代码 <div id="qr-code" class="qr ...
Vue生成带图片logo以及文字的二维码组件，可下载二维码为图片，附组件调用代码--核心qrcode
目录 1.初始化qrcode 2.二维码生成以及下载组件代码可以自己控制是否生成logo以及文字说明 3.父页面调用组件代码 1.初始化qrcode cnpm install --save qrco ...
C# 利用QRCode生成二维码图片
网上生成二维码的组件是真多,可是真正好用的,并且生成速度很快的没几个,QRCode就是我在众多中找到的,它的生成速度快.但是网上关于它的使用说明,真的太少了,大都是千篇一律的复制粘贴.这是本要用它做了 ...
Android 自定义二维码
Android生成二维码使用的是zxing. 1.加入依赖,或者自己选择zxing版本:Releases · zxing/zxing · GitHub dependencies {...impleme ...
微信扫码登录自定义二维码显示信息
微信扫码登录,自定义二维码显示信息 <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js& ...
uniapp中应用H5自定义二维码扫码界面
uniapp中应用H5自定义二维码扫码界面最终效果 pages配置组件代码最终效果 pages配置 {"path": "components/barcode/sca ...
Java实现一行代码生成二维码，可传输到前端展示，可自定义二维码样式，可设置图片格式，可对二维码添加图片，可对二维码添加文字，可以设置二维码大小、字体大小、字体颜色、边框颜色、边框大小等等
Java实现一行代码生成二维码,可传输到前端展示,可自定义二维码样式,可设置图片格式,可对二维码添加图片,可对二维码添加文字,可以设置二维码大小.字体大小.字体颜色.边框颜色.边框大小等等. 0.准备 ...
使用flask+qrcode生成二维码
与别人合作开发项目的时候,如果需要对接另一个接口生成的二维码,而别人接口还没有做好,可以自己模拟api接口生成二维码.这里使用mock server模拟接口,而二维码接口可以使用python的flas ...

qrcode 自定义二维码组件

qrcode 自定义二维码组件 `vue 自定组件`

vue 组件定义

qrcode 自定义二维码组件相关推荐

最新文章

热门文章

qrcode 自定义二维码组件

qrcode 自定义二维码组件 vue 自定组件

vue 组件定义

qrcode 自定义二维码组件相关推荐

最新文章

热门文章

qrcode 自定义二维码组件 `vue 自定组件`