一、业务
一篇文章,点击转发输入姓名以及手机号后生成一个二维码图片,随后点击下载图片,将图片分享给别人
二、结果
点击下载后的二维码
三、实现
html部分
<!-- 生成二维码以及文案的弹框 -->
<div class="qrcode-template" v-show="showTransferUrlDialog">
<div class="dialog-bind-alipay1">
<div class="main">
<div ref="dialog" class="qrcode-template">
<div class="title">点击下载二维码保存,分享给好友:</div>
<div id="qrCodeDiv" ref="qrCodeDiv" style="margin: 0 auto;"></div>
<div class="url-text" style="margin: 0 auto;"><span>扫一扫二维码,立即xxx</span></div>
</div>
<button class="btn" @click="cancel">确定</button>
<button class="btn" @click="downloadBtn">下载二维码</button>
</div>
</div>
</div>
js部分
安装依赖这里不做介绍,如果安装失败可以直接将以下代码放入package.json依赖中
"qrcodejs2": "0.0.2",
"html2canvas": "^1.0.0-rc.7"
// 引入插件
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
methods: {
getQrcode () {
this.$refs.qrCodeDiv.innerHTML = ''
new QRCode(this.$refs.qrCodeDiv, {
width: 150,
height: 150,
text: this.TransferUrl,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
this.createQrCodePic()
},
createQrCodePic () {
this.showTransferUrlDialog = true
},
downloadBtn() {
window.pageYOffset = 0;
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
html2canvas(this.$refs.dialog, {
useCORS: true, //设置为true,避免图片产生跨域
allowTaint: false,
scale: 1.5,
backgroundColor: null
}).then(canvas => {
let dataURL = canvas.toDataURL('image/png')
// 下载图片
var link = document.createElement('a')
link.href = dataURL
link.download = 'download.png'
setTimeout(function () {
link.click()
}, 1000)
})
},
}
代码中这三句很重要,因为在h5中,长的内容会出现滚动条,使用html2canvas截图,如果出现滚动条,那么截图会生成空白图片。所以使用原生js设置定位回到窗口顶部
window.pageYOffset = 0;
document.documentElement.scrollTop = 0
document.body.scrollTop = 0