-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.html
211 lines (182 loc) · 8.2 KB
/
main.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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<head>
<title>Share Generation</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="assets/icon.svg">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap" rel="stylesheet">
<script src="fabric.min.js"></script>
<script type="text/javascript">
// Allows to look at loaded canvas
// Doesn't affect generated image
const IS_DEBUG = true
const Colors = Object.freeze({
'bg': '#151518',
'main': '#FAFAFA',
'accent': '#A4F224'
})
const Sizes = Object.freeze({
'w': 1080,
'h': 1375,
'cover': 270,
'groupTop': 700,
'marginLeft': 75
})
const headings = [
'ваша вечеринка отстой',
'переключи\nте музыку',
'плейлист на троечку',
'4 — это хорошо',
'ну, фифти-фифти',
'подпеваю, но не всё',
'узнал за 10 секунд',
'сделайте погромче',
'1 предатель среди нас',
'10 из 10,\nизи вин'
]
const texts = [
'Узнал всего 1 трек из плейлиста',
'Распознал только 2 трека отсюда :(',
'Угадал 3 трека в плейлисте',
'Даже если это 4 из 10 треков в ',
'Угадал половину треков из',
'Угадал 6 треков в плейлисте',
'7 из 10! Шарю за треки в плейлисте',
'8 из 10 треков. Слабо столько же?',
'Угадал 9/10. Как так? Плейлист, кстати,',
'Угадал все треки плейлиста'
]
// Main parameters
let score = 0
let coverSrc = 'https://i.scdn.co/image/ab67706c0000bebb9fe89caef5c9f3d66b0d988d'
let playlistName = 'Топ-50 во всем мире'
let bottomText = null
function init() {
// URL params are acceptable
const urlParams = new URLSearchParams(window.location.search)
let scoreParam = 'score'
let coverParam = 'cover'
let playlistNameParam = 'playlist'
let bottomTextParam = 'bottom'
score = urlParams.has(scoreParam) ? urlParams.get(scoreParam) - 1 : score
coverSrc = urlParams.has(coverParam) ? urlParams.get(coverParam) : coverSrc
playlistName = urlParams.has(playlistNameParam) ? urlParams.get(playlistNameParam) : playlistName
bottomText = urlParams.has(bottomTextParam) ? urlParams.get(bottomTextParam) : bottomText
draw()
}
function draw() {
var canvas = new fabric.StaticCanvas('canvas', { backgroundColor: Colors.bg })
canvas.setWidth(Sizes.w)
canvas.setHeight(Sizes.h)
canvas.renderAll()
// Big green text
let heading = new fabric.Textbox(headings[score], {
left: Sizes.marginLeft, // Same margin
top: 150, // Absolute top
width: 955,
fill: Colors.accent,
fontFamily: 'Montserrat',
fontSize: 140,
fontWeight: 700,
lineHeight: 0.95
})
canvas.add(heading)
// Cover image, text and playlist grouped
fabric.Image.fromURL(coverSrc, (img) => {
img.scaleToWidth(Sizes.cover)
img.scaleToHeight(Sizes.cover)
let cover = img.set({
shadow: {
color: 'rgba(250, 250, 250, 0.1)',
blur: 100,
offsetX: 0,
offsetY: 50,
},
// Rounding
clipPath: new fabric.Rect({
width: Sizes.cover,
height: Sizes.cover,
top: Sizes.groupTop,
left: Sizes.marginLeft,
rx: 15, // Actually border-radius
ry: 15, // That too
absolutePositioned: true // Absolute position is a workaround for scaling
}),
})
// Grouping cover and texts (see below)
canvas.add(new fabric.Group([cover, textGroup], {
top: Sizes.groupTop,
left: Sizes.marginLeft
}))
// Anonymus cross-origin makes it dowloadable on localhost
}, { crossOrigin: "anonymous" })
// Little white text
let text = new fabric.Textbox(texts[score], {
width: 600,
fill: Colors.main,
fontFamily: 'Montserrat',
fontSize: 54,
fontWeight: 600
})
// Playlist is just green text so we are just cloning
let playlist = fabric.util.object.clone(text).set({
text: playlistName,
top: 150,
fill: Colors.accent,
})
// Forming text group staying right from the cover
let textGroup = new fabric.Group([text, playlist], {
left: 330
})
// Right bottom logo or custom text
if (bottomText == null) {
// Positioning logo to bottom right via math
fabric.loadSVGFromURL('assets/logo.svg', function (objects, options) {
let logo = fabric.util.groupSVGElements(objects, options)
logo.top = canvas.height - logo.height - 50
logo.left = canvas.width - logo.width - 75
canvas.add(logo)
})
} else {
// Icon left from bottom text
fabric.loadSVGFromURL('assets/icon.svg', function (objects, options) {
let icon = fabric.util.groupSVGElements(objects, options)
icon.top = 8
// Text at the bottom instead of logo
let bottom = new fabric.Text(bottomText, {
left: icon.width + 30,
fill: Colors.main,
fontFamily: 'Montserrat',
fontSize: 56,
fontWeight: 600,
opacity: 0.9
})
//canvas.add(bottom)
// Forming text group staying right from the cover
let bottomGroup = new fabric.Group([bottom, icon])
bottomGroup.top = canvas.height - bottomGroup.height - 50
bottomGroup.left = canvas.width - bottomGroup.width - 75
canvas.add(bottomGroup)
})
}
download(canvas)
}
function download(canvas) {
let filename = 'musiq sharing ' + (score + 1) + ' in ' + playlistName
// Creating temporary button
var link = document.createElement('a')
link.addEventListener(
"click",
function (e) {
this.href = canvas.toDataURL('png')
this.download = filename.substring(0, 32) + '.png'
},
false
)
document.body.appendChild(link)
setTimeout(function () { link.click() }, IS_DEBUG ? 500 : 0)
document.body.removeChild(link)
}
</script>
</head>
<body onload="init()"><canvas id="canvas"></canvas></body>