1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<template>
<div v-show="divShow" style="z-index: -1;position: absolute">
<div :class="{shareTimeBlock2:imgList.length<3,shareTimeBlock3:imgList.length==3}" :style="{backgroundImage:`url('${imgUrl.bg}')`}" id="capture33">
<img v-for="i in imgList" :src="imgUrl[i]">
</div>
</div>
</template>
<script>
import {shareTime} from "../util/shareTime";
import html2canvas from 'html2canvas'
export default {
name: "shareTime",
props:['day'],
data(){
return {
divShow:false,
imgUrl:shareTime,
imgList:[],
dataURL:'',
count:0
}
},
created(){
},
mounted(){
},
methods:{
initPage(){
console.log(this.day)
this.imgList = []
let num = 999
let str=this.count.toString();
// str = str.toString();
for(let i=0;i<str.length;i++){
this.imgList.push(str[i])
}
this.divShow = true;
let that = this
this.$nextTick(()=>{
html2canvas(document.getElementById('capture33'),{
async: true,
scrollX:1,
scale: 1,
letterRendering: true,
}).then((canvas) => {
this.divShow = false;
let dataURL = canvas.toDataURL("image/jpg");
// console.log(dataURL)
this.dataURL = dataURL;
this.$fetch('/api/public/qiniu/token',{file_name: `Day${this.count}.jpg`,is_rand : 0,is_number:1}).then(res=>{
var pic = dataURL.replace('data:image/png;base64,','');
var url = "https://upload.qiniup.com/putb64/-1/key/"+ window.btoa(res.new_name); //非华东空间需要根据注意事项 1 修改上传域名
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", "UpToken "+res.token);
xhr.send(pic);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
//当XHR的状态为4时判断请求成功与否，然后处理响应的数据，虽然当XHR的状态为2或者3时可以获取到响应状态，但是此时的数据还未下载完全，不能处理响应数据
if (xhr.status == 200) {
//请求成功，处理响应数据
console.log(xhr.response)
console.log(that.count,num)
// debugger
if(that.count<num){
that.count++
that.initPage()
}
// debugger
that.$emit('changeIcon',process.env.IMAGE_URL_HEAD+JSON.parse(xhr.response).key)
} else {
//请求失败
}
}
}
});
}).catch(res=>{alert(res);console.log()});
})
},
}
}
</script>
<style scoped lang="less">
@import "../util/public";
.shareTimeBlock2{
background-repeat: no-repeat;
background-size: 100% 100%;
width: 200*@toVw;
height: 200*@toVw;
text-align: center;
line-height: 200*@toVw;
img{
width:90*@toVw;
vertical-align: middle;
}
}
.shareTimeBlock3{
background-repeat: no-repeat;
background-size: 100% 100%;
width: 200*@toVw;
height: 200*@toVw;
text-align: center;
line-height: 200*@toVw;
img{
width:60*@toVw;
vertical-align: middle;
}
}
</style>