直接拿去用就是
js源码：
canvas+api自己可以去了解：https://www.w3school.com.cn/tags/html_ref_canvas.asp
// 生成二维码
mounted() {
var url = window.location.href.substring(0,window.location.href.indexOf('#')+1)+'register?code='+this.inviteCode;
// 生成二维码
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: url,
width: 103,
height: 103,
colorDark: "#000000",
colorLight : '#ffffff',
correctLevel: QRCode.CorrectLevel.H,
});
qrcode.clear(); // clear the code.
qrcode.makeCode(url);
var that = this;
setTimeout(function(){
var nodes = that.$refs.qrCodeUrl.childNodes[1];
// console.log(nodes);
that.bg2 = nodes.src;
that.createdPost();
},200)
}
// 合成图片
createdPost() {
this.$toast({
type: 'loading',
})
var that = this;
var bg = {
width: 750,
height: 1334,
src: this.bg1
}
var code = {
width: 120,
height: 120,
src: this.bg2
}
var image = new Image();
var image1 = new Image();
image.src = bg.src;
image1.src = code.src;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
image.onload = function() {
ctx.drawImage(image, 0, 0, bg.width, bg.height);
ctx.fillStyle = "#fff";
ctx.fillRect(100,1110,130,130);
ctx.drawImage(image1, 105, 1115, code.width, code.height);
// ctx.save(); // 保存目前Canvas的状态，将目前Canvas的状态推到绘图堆栈中
// ctx.arc(185, 1235, 65, 0, Math.PI * 2, false);
// ctx.clip();
// ctx.restore(); // 还原状态，从绘图堆栈中弹出上一个Canvas的状态
ctx.font = "30px Arial";
ctx.fillStyle = '#ffffff';
ctx.font = "26px Arial";
ctx.fontWeight = 'bold';
ctx.fillText('扫码立即加入', 250, 1155,175);
ctx.fillText('“”', 250, 1205,180);
ctx.font = "26px Arial";
ctx.fillText('邀请码', 510, 1155,150);
ctx.font = "26px Arial";
ctx.fillText(that.inviteCode, 510, 1205,150);
ctx.beginPath();
ctx.moveTo(470, 1130);
ctx.lineWidth = 2;
ctx.strokeStyle = "#fff";
ctx.lineTo(470, 1220);
ctx.stroke();
// 转为图片png
html2canvas(that.$refs.poster,{
backgroundColor: null
}).then((canvas) => {
that.$toast.clear();
let poster = c.toDataURL("image/png");
that.poster = poster;
});
}
},
