1、安装这两个插件 并导入
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
npm install qrcodejs2 --save
npm install --save html2canvas
2、我这里是海报上得要有二维码,我是先展示背景和二维码,最后在生成一张海报,class="box"节点 是展示背景和二维码,class="boxs"才是最后生成的海报
data () {
return {
colse: false, // 点击关闭海报
isShow: true, // 控制海报框展示
cInput: false,
link: 'www.baidu.com' // 二维码链接
}
},
components: {
QRCode
},
<div class="dialog" v-if="colse">
<div class="dialog_mask"></div>
<div class="box" ref="pronbit" id="posterHtml" v-if="isShow">
<div class="dialogs" >
<div class="dialog_container" >
<div class="logo_icon"><img src="../../assets/img/logo.jpg" crossorigin="anonymous"></div>
<div style="font-size: 14px;padding: 10px">
<h4>{{this.username}}</h4>
<h5 style="color: #9b9a9a;letter-spacing:2px">送您一份知识大礼,希望你喜欢哟!</h5>
</div>
<div class="dialog_content">
<img :src="BASE_URL+img+'?any_string_is_ok'" crossorigin="anonymous" alt="">
</div>
<div style="text-align: center;font-size: 16px;padding: 10px"><h5>《{{this.$route.params.coursename}}》</h5></div>
<div class="dialog_code">
<!-- 二维码 -->
<div class="" id="qrcodeImg"></div>
<div style="font-size: 15px;margin-left: 15px">
<h4>长按识别二维码分享给好友</h4>
</div>
</div>
</div>
</div>
</div>
<div class="boxs" ref="pronbit" v-if="!isShow">
<img :src="posterImg" style="width: 100%;height: 100%" crossorigin="anonymous" alt="">
<div class="colse_log" @click.stop="colsedolog"></div>
</div>
</div>
createQrcode (text) {
// 生成二维码
this.$nextTick(() => {
const qrcodeImgEl = document.getElementById('qrcodeImg')
let qrcode = new QRCode(qrcodeImgEl, {
width: 80,
height: 80,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
qrcode.makeCode(text)
})
},
createPoster () {
// 生成海报
const vm = this
// vm.posterImg = vm.$Http.defaults.staticURL + vm.detail.logo_url
setTimeout(function() {
const domObj = document.getElementById('posterHtml')
html2canvas(domObj, {
useCORS: true,
allowTaint: true,
logging: false,
letterRendering: true,
onclone(doc) {
let e = doc.querySelector('#posterHtml')
e.style.display = 'block'
}
}).then(canvas => {
// 在微信里,可长按保存或转发
vm.posterImg = canvas.toDataURL('image/png')
// vm.imgDown(vm.posterImg)
vm.isShow = false
})
},2300)
},
3、生成二维码的时候 如果报 'appendChild' null ,就得注意document.getElementById('qrcodeImg') 页面节点 渲染的顺序了,最后在需要的时候调用
this.createQrcode(this.link)
this.createPoster()
.dialog_mask{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
}
.box{
left: 0;
right: 0;
top: 60px;
//bottom: 0;
margin: auto;
//top:50%;
//left:50%;
//transform: translate(-50%,-50%);
width: 280px;
height: 430px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.boxs{
left: 0;
right: 0;
top: 60px;
margin: auto;
width: 280px;
height: 430px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.dialogs{
background: linear-gradient(120deg, rgba(255, 175, 20, 1) 0%, rgba(255, 208, 0, 1) 100%);
width: 280px;
padding: 10px;
height: 430px;
margin: auto;
}
.dialog_container{
width: 100%;
height: 100%;
background: #fff;
border-radius: 10px;
}
.dialog_content{
width: 100%;
overflow: hidden;
position: relative;
padding: 10px 10px;
height: 120px;
}
.dialog_content img{
position: relative;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height:120px;
}
.logo_icon{
margin-left: 10px;
width: 40px;
height: 40px;
}
.logo_icon img{
width: 100%;
height: auto;
}
.dialog_code{
margin-top: 15px;
display: flex;
padding: 10px;
justify-content: space-between;
align-items: center;
}
.colse_log{
background: #fff;
border-radius: 50%;
line-height: 30px;
text-align: center;
font-size: 13px;
height: 30px;
width: 30px;
top: -0.5rem;
right: -0.43rem;
position: absolute;
}
.colse_log::before {
content: "关闭";
}
.dialog_btn{
margin-top: 20px;
}
最终的效果图没传上,说缺少什么文件源地址...