-
Notifications
You must be signed in to change notification settings - Fork 17
/
generate.html
127 lines (117 loc) · 3.78 KB
/
generate.html
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Poster in canvas</title>
<style>
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.container {
padding-top: 20px;
}
.poster {
width: 460px;
margin-bottom: 15px;
position: relative;
}
.poster img {
display: block;
width: 100%;
height: auto;
}
.poster:hover .btn-download {
opacity: 1;
}
.btn-download {
position: absolute;
transition: opacity .6s;
z-index: 100;
opacity: 0;
top: 50%;
left: 50%;
background: rgb(87, 123, 255);
width: 88px;
height: 40px;
margin-top: -20px;
margin-left: -44px;
text-align: center;
line-height: 40px;
border-radius: 8px;
color: #fff;
font-weight: 600;
cursor: pointer;
}
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//at.alicdn.com/t/font_579509_p15123txqmh.css">
<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<script src="dist/poster.min.js"></script>
</head>
<body>
<div class="container">
<h1 style="text-align: center">Canvas poster</h1>
<div class="row">
<div class="col-lg-4 col-md-6 poster poster-ch" id="poster">
<a class="btn-download" download="poster2.jpg">
<i class=" icon icon-download"></i>
</a>
</div>
<div class="col-lg-4 poster">
<div>
<div class="form-group">
<label for="title">标题</label>
<input type="text" class="form-control" id="title" placeholder="没有不可能">
</div>
<div class="form-group">
<label for="desc">描述</label>
<input type="text" class="form-control" id="desc" placeholder="专注开发最漂亮、最优雅的主题">
</div>
<div class="form-group">
<label for="logo">logo名字</label>
<input type="text" class="form-control" id="logo" placeholder="16px.io">
</div>
<div class="form-group">
<label for="content">内容</label>
<textarea class="form-control" id="content" rows="3" placeholder="没有不可能的事；每件事都有方..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block" id="btn-generate">一键生成</button>
</div>
</div>
</div>
</div>
<script>
poster.init(
{
banner: './images/dream.png',
selector: '.poster-ch',
title: '没有不可能',
content: '没有不可能的事；每件事都有方法，且如果有充足的意愿，我们永远都会有充足的方法。通常我们只是因为一个借口而说某件事不可能。',
logo: '16px.io',
description: '专注开发最漂亮、最优雅的主题',
callback: download
})
$('#btn-generate').on('click', function () {
$('#poster img').remove()
poster.init(
{
banner: './images/dream.png',
selector: '.poster-ch',
title: $('#title').val(),
content: $('#content').val(),
logo: $('#logo').val(),
description: $('#desc').val(),
callback: download
})
})
function download(container) {
const $btn = container.querySelector('.btn-download')
const $img = container.querySelector('img')
$btn.setAttribute('href', $img.getAttribute('src'))
}
</script>
</body>
</html>