vue中qrcanvas生成带logo二维码并且下载二维码
1.引入qrcanvas模块
cnpm install --save qrcanvas
//parkage.json 中引入
"qrcanvas": "^3.1.2"
import {
qrcanvas } from 'qrcanvas'
2.前端vue页面展示
<el-button
size="mini"
type="text"
icon="el-icon-tickets"
@click="generateQRCode(scope.row)"
>二维码</el-button>
<!--
展示二维码窗口
-->
<el-dialog
:visible.sync="qrcodeDialogVisible"
title="二维码"
width="30%"
center>
<div id="shareQrcode" ref="shareQrcode" class="share-qrcode" style="width:256px;margin:0 auto;"/>
<span slot="footer" class="dialog-footer">
<el-button @click="qrcodeDialogVisible = false">关 闭</el-button>
<el-button type="primary" @click="downLoadQrcode">下载二维码</el-button>
</span>
</el-dialog>
3.js生成
设置属性
export default {
name: 'ParkLot',
props:{
canvasWidth:{
default:200,
type:Number
},
canvasHeight:{
default:200,
type:Number
}
},
data () {
return {
}
}
js代码：
//生成二维码
generateQRCode(row){
const uuids = "123456";
/* getGenerateQrCode(uuids).then(response => {
});*/
this.troubleListName = row.troubleListName
this.popQrcode(uuids)
},
// 点击下载按钮下载二维码图片
downLoadQrcode() {
let imgSrc, canvas
if (document.getElementById('shareQrcode').childNodes[0]) {
canvas = document.getElementById('shareQrcode').childNodes[0]
imgSrc = this.CanvasToImage(canvas).getAttribute('src')
const alink = document.createElement('a')
alink.href = imgSrc
alink.download = this.troubleListName + 'Qrcode.png'
alink.click()
}
},
// canvas 转换成图片, 从canvas中提取图片image
CanvasToImage(canvas) {
// 新Image对象，可以理解为DOM
var image = new Image()
// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
// 指定格式PNG
image.src = canvas.toDataURL('image/png')
return image
},
popQrcode(uuid) {
this.qrcodeDialogVisible = true
const colorFore = '#0d0d0e'
const colorOut = '#181717'
const colorIn = '#111113'
this.qrcode = ''
this.$nextTick(() => {
this.qrcode = qrcanvas({
cellSize: 8,
data: uuid,
effect: {
round: 0.4 },
correctLevel: 'M',
width: this.canvasWidth,//宽
height: this.canvasHeight,//高
foreground: [
// 前景色
{
style: colorFore },
// 外方块位置
{
row: 0, rows: 7, col: 0, cols: 7, style: colorOut },
{
row: -7, rows: 7, col: 0, cols: 7, style: colorOut },
{
row: 0, rows: 7, col: -7, cols: 7, style: colorOut },
// 内方块位置
{
row: 2, rows: 3, col: 2, cols: 3, style: colorIn },
{
row: -5, rows: 3, col: 2, cols: 3, style: colorIn },
{
row: 2, rows: 3, col: -5, cols: 3, style: colorIn }
],
background: '#f5f5f5',
padding: 12
})
// 判断是否有子节点，如果已经有则删除原有的，然后再新增子节点
if (document.getElementById('shareQrcode').childNodes[0]) {
this.$refs.shareQrcode.removeChild(document.getElementById('shareQrcode').childNodes[0])
}
this.$refs.shareQrcode.appendChild(this.qrcode)
console.log(this.qrcode)
//生成logo
let myCanvas = this.qrcode
let ctx = myCanvas.getContext('2d')
// 在Canvas画布 添加图片
let img = new Image()
img.crossOrigin = 'Anonymous';//解决Canvas.toDataURL 图片跨域问题
//图片路径
img.src = require('@/logo/123.png');
img.onload = ()=>{
//第一个设置的元素，第二三是位置，后面两个是宽和高
let codeWidth = (this.canvasWidth-70)/2
let codeHeight = (this.canvasHeight-70)/2
ctx.drawImage(img, codeWidth, codeHeight,this.canvasWidth*0.25,this.canvasHeight*0.25)
}
})
},
我是一个后端开发人员，前端写的有什么问题，欢迎大家来指点我一下。。。。。。
