methods:{
getQRcode(){
this.host = window.location.protocol+"//"+window.location.host; // 返回https://mp.csdn.net
// console.log(this.host)
this.tel = JSON.parse(localStorage.getItem('tel'));
get_qrcode({tel:this.tel}).then(res =>{//分组qrCodeInfo
this.qrCodeInfo = res.data;
this.qrcodeUrl = this.host+ '/#/reg' + this.qrCodeInfo[0].url;
// console.log(this.qrcodeUrl)
let qrcode = new QRCode('qrcode', {
width: 120,
height: 120,
text: this.qrcodeUrl,// 二维码地址
colorDark : "#000",
colorLight : "#fff",
})
}).then(res=>{
get_qrcode_img({tel:this.tel}).then( res=>{//获取背景图片
// console.log(res)
this.imgbg = res.data;//this.getURLBase64(res.data) getBase64Image
// console.log(this.getURLBase64(res.data))
})
}).then(res =>{
this.canvasBg();//绘制图片背景(将背景转换base64)
}).then( res =>{
html2canvas(document.querySelector("#canvasBg")).then(canvas => {
var img = document.createElement("img");
img.src=canvas.toDataURL('image/png');
document.body.appendChild(img)
});
})
},
changeCodeUrl(index){//修改二维码地址
let host = window.location.protocol+"//"+window.location.host; // 返回https://mp.csdn.net
let qrimg=document.querySelector("#qrcode img");//获取二维码
this.$refs.qrcode.innerHTML = '';//清除上一个二维码
this.qrcodeUrl = this.host+ '/#/reg' + this.qrCodeInfo[index].url;
let qrcode = new QRCode('qrcode', {
width: 110,
height: 110,
text: this.qrcodeUrl,// 二维码地址
colorDark : "#000",
colorLight : "#fff",
})
this.dialog = false;
},
toQrTemplate(){//跳转更多模板
this.$router.push('/qrTemplate')
},
savePicture(){//保存图片
console.log('保存图片')
let This = this;
new Promise(
function (resolve, reject) {
resolve(This.canvasImg())
}
).then(res =>{
// var dataURL = canvas.toDataURL("image/png");
// This.saveFile(dataURL,'test.jpg');
}
)
},
canvasImg(){//初始化画布
console.log("合成背景二维码!")
let canvas = document.getElementById("canvasBg");//获取画布
let ctx = canvas.getContext('2d');//设置画布为2d
let winW = window.innerWidth //获取屏幕宽度
let winH = window.innerHeight -30 //获取屏幕高度
canvas.width = winW //设置画布宽度
canvas.height = winH //设置画布高度
let imgbg=document.getElementById("canvasBg");//获取背景图片
// console.log(imgbg)
// return false
let qrimg=document.querySelector("#qrcode img");//获取二维码
console.log('绘制合成背景+二维码')
ctx.drawImage(imgbg,0,0,winW,winH);
qrimg.onload = function(){
ctx.drawImage(qrimg,winW/2-50,winH/2,110,110);
}
var dataURL = canvas.toDataURL("image/png");
// var alink = document.createElement("a");
// alink.href = dataURL;
// alink.setAttribute("download","test.png")
// alink.click();
// console.log(dataURL)
// const This = this;
// This.longPress(()=>{
// console.log('long')
// This.saveFile(dataURL,'test.jpg');
// } )
// this.saveFile(dataURL,'test.jpg');
console.log("合成")
},
saveFile(data, filename){//保存图片的方法
console.log('保存图片')
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
},
getBase64Image(img) {//将图片转为base64
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/png"); // 可选其他值 image/jpeg
return dataURL;
},
getURLBase64(url) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest()
xhr.open('get', url, true)
xhr.responseType = 'blob'
xhr.onload = function() {
if (this.status === 200) {
var blob = this.response
var fileReader = new FileReader()
fileReader.onloadend = function(e) {
var result = e.target.result
resolve(result)
}
fileReader.readAsDataURL(blob)
}
}
xhr.onerror = function() {
reject()
}
xhr.send()
})
},
canvasBg(){//绘制背景(转换在线图片为base64)
// console.log("绘制背景");
let canvasBg = document.getElementById("canvasBg");//获取画布
let ctx = canvasBg.getContext('2d');//设置画布为2d
let winW = window.innerWidth //获取屏幕宽度
let winH = window.innerHeight //获取屏幕高度
canvasBg.width = winW //设置画布宽度
canvasBg.height = winH //设置画布高度
let imgbg=document.getElementById("scream");//获取背景图片
let qrimg=document.querySelector("#qrcode img");//获取二维码
imgbg.onload = function(){
ctx.drawImage(imgbg,0,0,winW,winH);
ctx.drawImage(qrimg,winW/2-50,winH/2,110,110);
//this.saveFile(dataURL,'test.jpg');
// console.log(imgbg)
}
var dataURL = canvasBg.toDataURL("image/png");
// console.log('test')
// canvasBg.toDataURL("image/png");
},
longPress(fn){//长按保存
let timeout = 0;
const $this = this;
for (let i = 0; i < $this.length; i++) {
$this[i].addEventListener('touchstart', () => {
timeout = setTimeout(fn, 800); // 长按时间超过800ms，则执行传入的方法
}, false);
$this[i].addEventListener('touchend', () => {
clearTimeout(timeout); // 长按时间少于800ms，不会执行传入的方法
}, false);
}
}
},