以vue项目为例,其他类型项目其实也是一样的
所需components:
-
QRCode
-
html2canvas
npm install qrcodejs2 -- save
npm install html2canvas --save
在需要使用的地方引入
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
生成二维码
creatQrCode() {
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: this.url + 'register?code=' + this.info.code,
colorDark: '#000000',
colorLight: '#ffffff',
width:80,
height:80,
correctLevel: QRCode.CorrectLevel.H
})
},
// this.$refs.qrCodeUrl 用来承载二维码的容器
// text 二维码包含的信息
// 其余配置看文档去
dom转图片
toImage() {
html2canvas(this.$refs.imageWrapper).then(canvas => {
this.imgUrl = canvas.toDataURL('image/png')
if (this.imgUrl !== '') {
var a = document.createElement('a') // 创建一个a节点插入的document
var event = new MouseEvent('click') // 模拟鼠标click点击事件
a.download = '图片名字' // 设置a节点的download属性值
a.href = this.imgUrl // 将图片的src赋值给a节点的href
a.dispatchEvent(event) // 触发鼠标点击事件
}
})
}
// this.$refs.imageWrapper 容器,生成的图片就是其中包含的内容
// this.imgUrl 就是生成的图片地址
小demo,供参考
<template>
<div class="bgBox" ref="imageWrapper">
<div class="name">{
{ info.name }}</div>
<img class="bgImg" :src="img" alt="" />
<div class="qrcode" ref="qrCodeUrl"></div>
</div>
</template>
<script>
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
import img from '@/assets/img/bg.jpg'
export default {
data() {
return {
info: {},
img,
// url:process.env.VUE_APP_BASE_API
url: 'https://baidu.com/'
}
},
mounted() {
this.info = this.$route.query
this.creatQrCode()
this.$nextTick(() => {
this.toImage()
})
},
methods: {
// 生成二维码
creatQrCode() {
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: this.url + 'register?code=' + this.info.code,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
},
// dom转图片
toImage() {
html2canvas(this.$refs.imageWrapper).then(canvas => {
this.imgUrl = canvas.toDataURL('image/png')
if (this.imgUrl !== '') {
var a = document.createElement('a') // 创建一个a节点插入的document
var event = new MouseEvent('click') // 模拟鼠标click点击事件
a.download = '图片名字' // 设置a节点的download属性值
a.href = this.imgUrl // 将图片的src赋值给a节点的href
a.dispatchEvent(event) // 触发鼠标点击事件
}
})
}
}
}
</script>
<style lang="less" scoped>
.bgBox {
position: relative;
width: 750px;
height: 1334px;
.bgImg {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.name {
position: absolute;
top: 64px;
left: 330px;
z-index: 2;
font-size: 42px;
}
.qrcode {
position: absolute;
bottom: 44px;
left: 40px;
width: 160px;
height: 160px;
}
}
</style>