前言
在最近的项目中,有一个需求是要保存前端生成的二维码,同时需要在二维码上方显示课程名称或者活动名称,下方显示机构名称
这次前端分为PC管理端和uniapp移动端
- PC端计划使用qrcode生成二维码,然后再用 html2canvas 将二维码和标题、机构名称html元素保存成图片
- 移动端计划使用DCloud提供的 uni-qrcode 组件来生成二维码,然后使用 mosowe-canvas-image 来保存成图片
为什么使用qrcode而不用vue-qr
vue-qr可以在二维码中间加logo,而qrcode不可以。但是我们不必要使用带logo的二维码
实现上来说vue-qr还是要简单一些的,但是自己更加习惯使用qrcode
实现
PC端
1.引入qecode、html2canvas
npm install qrcodejs2 // 安装qrcode
npm install --save html2canvas // 安装html2canvas
在需要的页面中引入
import QRCode from 'qrcode'
import html2canvas from 'html2canvas'
2.生成二维码
// 判断活动状态,未结束就调用生成二维码
showQRCode(data) {
if (data.overTime < data.createTime) {
this.$message({
message: '该活动已结束',
type: 'warning'
})
return false
}
const toSignAd = ''
this.$nextTick(() => {
this.makeQrcode(toSignAd, data)
})
}
// 生成二维码
makeQrcode(str, data) {
QRCode.toDataURL(str, {
width: 250, margin: 1 }).then(res => {
// toDataURL方法返回一个promise
this.$set(data, 'imgSrc', res)
})
}
3.保存图片
a标签download属性可以实现下载
定义和用法
download 属性规定被下载的超链接目标。
在 标签中必须设置 href 属性。
该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。
// 保存图片
onSave() {
const _this = this
html2canvas(_this.$refs.testImg).then(canvas => {
const imgUrl = canvas.toDataURL('image/png')
var eleLink = document.createElement('a')
eleLink.href