前端动态生成二维码后合成海报，下载分享
转载：zgh0711：https://blog.csdn.net/zgh0711/article/details/88192993
如何生成二维码
现在前端环境下，要生成二维码，可用的工具库有很多，我这里用的是 qrcode，首先安装
npm install --save qrcode
安装完之后 import 导入就能使用了
import QRCode from 'qrcode'
一，将生成的二维码通过 canvas 标签展示
<canvas class="qr" id="qrCode-canvas"></canvas>
let canvas = document.getElementById('qrCode-canvas')
QRCode.toCanvas(canvas, this.qrCodeUrl, (error) => {
if (error) {
console.log(error)
} else {
canvas.style.width = '1.68rem'
canvas.style.height = '1.68rem'
});
}
})
二维码生成好后，有需要的话可以调整下 canvas 的大小等属性，因为 qrcode 生成的二维码会带有一些默认样式，需要调整下。
二，先通过 canvas 生成二维码，然后将 canvas 的内容转为 base64 格式以 img 标签展示
<img class="qr" id="qr-img" :src="dataUrl" alt="邀请二维码"/>
let img = document.getElementById('qr-img')
let canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
//用 canvas 对象和邀请链接生成二维码，并将生成的二维码转为 base64
QRCode.toCanvas(canvas, this.qrCodeUrl, (error) => {
if (error) {
console.log(error)
} else {
this.dataUrl = canvas.toDataURL("image/jpeg")
});
}
})
上面两种方式都可以生成二维码并显示在界面上，区别在于第一种是以 canvas 标签显示，在微信中长按是无法识别的。第二种是以 img 标签显示，在微信中长按会自动识别并可以直接以图片形式分享出去。
做到这一步，需求已经完成了一半，下一步就是按设计图要求把二维码定位到海报背景上，将二维码和海报合成为一张图片。之所以要合成为一张图片还是为了让用户在微信中操作方便。合成为一张图片后，用户在微信中直接长按合成后的海报就可以分享或者识别二维码。
合成海报时碰到的坑
合成海报时需要用到另一个工具库 html2canvas ，基本使用方法也很简单，先获取要合成图片的 dom 对象，然后调用 html2canvas ，它会返回一个 promise，里面的 canvas 就是合成后的图片信息，同样的，这里的 canvas 可以直接显示出来，也可以转成 base64 之后放到 img 标签里显示，但是为了分享或者下载方便，基本都是转成了 base64
let poster = document.getElementById('poster')
html2canvas(poster).then(canvas => {
this.posterDataUrl = canvas.toDataURL()
});
到这里，基本需求就完成了。然而世界上的事情往往都不会是一帆风顺的，在测试的时候发现出了问题。
我前面二维码是用上面说的第二种方法显示的，将二维码的 canvas 转成了 base64 显示在 img 标签上，再将这个二维码 img 和海报背景 img 合成。这样的实现方式在 iOS 和浏览器中都没有问题，然而在安卓版微信里面却是只有海报背景而没有二维码。
在查了N多资料和尝试了好多遍之后终于发现，是因为我的二维码是 base64 的，如果二维码是以 canvas 形式显示，再去合成海报，将合成后的海报转为 base64 就没有问题了。 所以我在前面写生成二维码的时候写了二种方法。至此，整个需求也就真正的完成了。
下面是完整代码
<template>
<div class="ypl-flex">
<mt-header title="邀请用户" go-back></mt-header>
<div class="invitePosterPage flex">
<p class="title">分享专属海报，邀请用户注册，即可成功邀请</p>
<p class="remark">（注：只能通过此二维码注册用户才可成功邀请）</p>
<img v-if="posterDataUrl" :src="posterDataUrl" class="poster-bg" alt="邀请海报"/>
<div v-else id="poster" class="flex-row" style="position: relative">
<img class="poster-bg" src="../../../assets/img/img_poster_bg.png" alt="邀请海报背景"/>
<canvas class="qr" id="qrCode-canvas"></canvas>
</div>
</div>
</div>
</template>
<script>
/**
* 这是邀请海报组件
*/
import QRCode from 'qrcode'
import html2canvas from 'html2canvas';
export default {
name: 'Poster',
data () {
return {
posterDataUrl:'',
qrCodeUrl: 'https://www.baidu.com'
}
},
async mounted () {
this.createQRCode()
},
methods: {
createQRCode () {
//先用 QRCode 生成二维码 canvas，然后用 html2canvas 合成整张海报并转成 base64 显示出来
let canvas = document.getElementById('qrCode-canvas')
QRCode.toCanvas(canvas, this.qrCodeUrl, (error) => {
if (error) {
console.log(error)
} else {
//qrcode 生成的二维码会带有一些默认样式，需要调整下
canvas.style.width = '1.68rem'
canvas.style.height = '1.68rem'
let poster = document.getElementById('poster')
html2canvas(poster).then(canvas => {
this.posterDataUrl = canvas.toDataURL()
});
}
})
}
},
}
</script>
这次做这个需求的过程中，查到了一些 html2canvas 的资料，有很多文章都提到 html2canvas 有一些坑，我是没碰到，现在将这些文章列出来，给需要的人。
html2canvas 用法详解
Html2canvas - 项目中遇到的那些坑点汇总(更新中…)
一次 H5 「保存页面为图片」 的踩坑之旅
微信H5实现网页长按保存图片及识别二维码
基于html2canvas实现网页保存为图片及图片清晰度优化
Vue.js结合Canvas制作二维码和图片的合成（qrcanvas + html2canvas）
然后就是 canvas 转 base64 的 .toDataURL()] 这个方法，这个方法里面其实是可以配置参数的，有需要的可以去看下这个文档
HTMLCanvasElement.toDataURL()
