import { qrcanvas } from 'qrcanvas';
import html2canvas from 'html2canvas';
created() {
this.getQrCodeHandler();
},
getQrCodeHandler() {
let that = this;
that.$nextTick(() => {
var imgCode = document.querySelectorAll('.img-box-code');
imgCode.forEach(item => {
var canvas1 = qrcanvas({
data: 生成二维码的地址,
size: 33
});
item.innerHTML = '';
item.appendChild(canvas1);
});
// this.mateImgHandler();
});
},
// 手势开始
touchstartHandler(e) {
// console.log(e);
e.preventDefault();
this.startTime = e.touches[0].clientX;
// let imgBoxName = e.target.parentElement.className;
// let baseSrc = e.target.src;
this.timer = setTimeout(() => {
if (!this.birdFlag) {
this.$webridge.showLoadingDialog('加载中...');
if (e.target.parentElement.className == 'img-box') {
this.mateImgHandler(e.target.parentElement, 'savePicture', 0);
} else if (e.target.parentElement.parentElement.className == 'img-box') {
this.mateImgHandler(e.target.parentElement.parentElement, 'savePicture', 0);
} else {
this.mateImgHandler(e.target.parentElement.parentElement.parentElement, 'savePicture', 0);
}
} else {
console.log('我正在移动');
}
}, 700);
},
touchmoveHandler(e) {
this.endTime = e.touches[0].clientX;
if (Math.abs(this.startTime - this.endTime) >= 30) {
this.birdFlag = true;
}
},
// 手势结束
touchendHandler() {
clearTimeout(this.timer);
this.birdFlag = false;
console.log('清除定时');
},
// 生成图片的连接
mateImgHandler(ImageTarget, action, str) {
// 所有要生成图片的元素
// console.log(ImageTarget);
let width = ImageTarget.offsetWidth;
let height = ImageTarget.offsetHeight;
var opts = {
useCORS: true, // 【重要】开启跨域配置
width,
height: height,
backgroundColor: '#FDF1E9'
};
html2canvas(ImageTarget, opts).then(canvas => {
var baseSrc = canvas.toDataURL();
this.getPutToken(baseSrc, action, str);
});
},
// 获取token
getPutToken(pic, action, str) {
let that = this;
// var pic = '填写你的base64后的字符串';
var url = '地址';
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
console.log(xhr.readyState)
if (xhr.readyState == 4) {
// console.log(xhr.responseText);
if(JSON.parse(xhr.responseText).statusCode == 200){
let putb64token = JSON.parse(xhr.responseText).data.uptoken;
that.putb64(pic, putb64token, action, str);
}else {
that.$webridge.hideLoadingDialog();
that.toast('图片上传失败,请重试')
}
}
};
xhr.open('GET', url, true);
xhr.setRequestHeader('Content-Type', '*');
xhr.send();
},
putb64(pic, putb64token, action, str) {
// console.log(putb64token);
let that = this;
var picUrl = pic.split(';base64,')[1];
// console.log(picUrl);
var url = '//upload.qiniup.com/putb64/-1';
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
// console.log(xhr.responseText);
if(JSON.parse(xhr.responseText).key){
let src = '域名' + JSON.parse(xhr.responseText).key;
that.seedImgSrcHadnler(src, action, str);
}else {
that.toast('图片上传失败,请重试')
}
}
};
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.setRequestHeader('Authorization', 'UpToken ' + putb64token);
xhr.send(picUrl);
}