需求
把背景图和生成的带有id的二维码图片合成一张海报,提供给客户扫码进入网页
//因为分享是需要带id给予奖励的所以我这边做了是否登入的判断
handleClickShare() {
if (this.$store.state.token) {//登入后才会弹出弹框
this.show5 = true
setTimeout(() => {
let url = this.url + `?id=${this.$store.state.information._id}`//把特定的客户id带入
QRCode.toDataURL(url, (err, url) => { //利用插件QRCode把链接生成图片
const ownerurl = this.$store.state.information.headimgurl
this.drawAndShareImage(bgImage, url, ownerurl)//背景图,二维码,客户的头像
})
}, 10);
} else {
return Toast('请先登录!')
}
//核心代码三张图片合成一张,可以做两张合成一张,我这边是为了把客户的头像带入到二维码最中心,再把合成的图片和海报合成才用了三合一
drawAndShareImage(img1, img2, img3) {
let canvas = document.createElement("canvas");
let width = 640;
let height = 960;
canvas.width = width;
canvas.height = height;
let context = canvas.getContext("2d");
context.rect(0, 0, canvas.width;
canvas.height = height;
let context = canvas.getContext("2d");
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#fff";
context.fill();
let myImage = new Image();
myImage.src = img1; //背景图片 你自己本地的图片或者在线图片
myImage.crossOrigin = "Anonymous";
myImage.onload = function () {
context.drawImage(myImage, 0, 0, width, height);
let myImage2 = new Image();
myImage2.src = img2; //你自己本地的图片或者在线图片
myImage2.crossOrigin = "Anonymous";
let x = 450,
y = 780
myImage2.onload = function () {
context.drawImage(myImage2, x, y, 150, 150);
let myImage3 = new Image();
myImage3.src = img3; //你自己本地的图片或者在线图片
myImage3.crossOrigin = "Anonymous";
myImage3.onload = function () {context.drawImage(myImage3, x + 59, y + 58, 35, 35);
let base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
window.base64 = base64;
let img = document.getElementById("avatar");
// document.getElementById("avatar").src = base64;
let img = document.getElementById("avatar");
// document.getElementById("avatar").src = base64;
img.setAttribute("src", window.base64);
}
};
};
},
image.png
其实是三个图片合成一个的,当然有些小伙伴说可以拿定位做啊
确实可以拿定位做,看需求吧,这样做事为了只有一张图片,可以做图片的保存,如果是定位做的话是三张图片!
总结来说这里两个个知识点
1.利用Qrcode生成图片
2.多张图片的合成为一张图片
