Vue合成广告图片+二维码图片
实现方法
主要用到两个库：
qrcanvas和_html2canvas
1.先生成二维码覆盖在广告图上面
2.html转canvas canvas转成base64图片
3.广告图src替换为base64_
注意：
- 微信内不支持保存canvas为图片，所以多了第三步
- iframe标签
display：none时，导致生成的图片空白
async generateQrcode() {
this.showQr = true;
let canvas1 = qrcanvas({
data: decodeURIComponent(
"http://xiaoshuiw.com/jxjy_app/user/register?code=188"
),
size: 80
});
setTimeout(() => {
this.$refs.ttt.appendChild(canvas1);
html2canvas(this.$refs.qrmain,{backgroundColor: null}).then(canvas => {
this.$refs.ttt.innerHTML=""
this.$refs.img.src=canvas.toDataURL("image/png")
});
}, 100);
}
qrcanvas和_html2canvas_使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/qrcanvas@3"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.7/dist/html2canvas.min.js"></script>
</head>
<body>
<div id="qrcode"></div>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000">Hello world!</h4>
</div>
<script>
const canvas = qrcanvas.qrcanvas({
data: "hello, world",
});
document.getElementById("qrcode").appendChild(canvas);
html2canvas(document.querySelector("#capture")).then((canvas) => {
document.body.appendChild(canvas);
});
</script>
</body>
</html>