-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathshader.html
182 lines (179 loc) · 5.74 KB
/
shader.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>sht4 image shader</title>
<meta
property="og:image"
content="https://stupidhackth.github.io/4/shader.jpg"
/>
<meta property="og:site_name" content="The Stupid Hackathon Thailand" />
<meta property="og:title" content="stupid image shader 4" />
<meta
property="og:url"
content="https://stupidhackth.github.io/4/shader.html"
/>
<meta
property="og:description"
content="image shader for stupid hackathon thailand the fourth / virtual 2020"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
integrity="sha256-CAI/7ThhltsmP2L2zKBYa7FknB3ZwFbD0nqL8FCdxdc="
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: inter, sans-serif;
--block-transform: translate(0, 0);
}
.difference {
mix-blend-mode: difference;
}
.our-shadow {
color: white;
text-shadow: -4px -4px 0 #000, -2px -2px 0 #000, 1px -1px 0 #000,
1px 1px 0 #000, -1px 1px 0 #000;
}
</style>
</head>
<body class="bg-black text-white">
<div id="app">
<div class="flex flex-row-reverse flex-wrap">
<div class="p-5 flex-auto mr-auto">
<h1 class="text-xl">stupid image shader 4</h1>
<p class="text-gray-400">please use Google Chrome</p>
<h2 class="text-yellow-300 mt-4">
<strong>step 1</strong> — select image
</h2>
<p class="mt-1">
<input type="file" @change="upload" ref="file" />
</p>
<h2 class="text-yellow-300 mt-4">
<strong>step 2</strong> — customize
</h2>
<p class="flex space-x-4 mt-1">
<button
class="relative border border-white"
style="width: 128px; height: 128px;"
@click="styles.bg = makeStyles().bg"
:style="styles.bg"
></button>
<button
class="relative bg-black inline-flex items-center justify-center font-bold appearance-none border border-white"
style="width: 128px; height: 128px; font-size: 45px;"
@click="styles.text = makeStyles().text"
>
<div :style="styles.text">sht4</div>
</button>
</p>
<h2 class="text-yellow-300 mt-4">
<strong>step 3</strong> — download
</h2>
<p class="mt-1">
<button
class="bg-white font-bold px-8 py-4 text-black rounded"
@click="download"
>
download result
</button>
</p>
</div>
<div
id="preview-container"
class="relative flex-none"
style="width: 512px; height: 512px;"
>
<div
class="absolute top-0 left-0"
style="
width: 1024px;
height: 1024px;
transform-origin: top left;
transform: scale(0.5);
"
>
<div id="preview" class="bg-black inset-0">
<div
class="absolute inset-0 z-10 bg-cover"
:style="{ backgroundImage: `url(${image})` }"
></div>
<div
class="absolute inset-0 z-20 difference"
:style="styles.bg"
></div>
<div
class="absolute inset-0 z-30 difference bg-black flex items-center justify-center font-bold"
style="font-size: 360px;"
>
<div :style="styles.text">sht4</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"
integrity="sha256-ngFW3UnAN0Tnm76mDuu7uUtYEcG3G5H1+zioJw3t+68="
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/src/dom-to-image.js"
integrity="sha256-Tw0/gX6aFDMese6GHQJFL/ZjF+f7edyF9okFVY/B9oU="
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/FileSaver.min.js"
integrity="sha256-u/J1Urdrk3nCYFefpoeTMgI5viU1ujCDu2fXXoSJjhg="
crossorigin="anonymous"
></script>
<script>
const rand = () => Math.random() * 2 - 1
const mkdeg = () => ~~(Math.random() * 360)
const mkc = () => `hsl(${mkdeg()}deg, 100%, 50%)`
const mkg = () => `linear-gradient(${mkdeg()}deg, ${mkc()}, ${mkc()})`
const makeStyles = () => {
const shadow = mkc()
return {
bg: { background: mkg() },
text: {
transform: `rotate(${mkdeg()}deg)`,
color: mkc(),
textShadow: `0 0 0.5ex ${shadow}`,
},
}
}
const vm = new Vue({
el: '#app',
data: {
image: '',
styles: makeStyles(),
},
methods: {
upload() {
this.image = URL.createObjectURL(this.$refs.file.files[0])
},
download() {
domtoimage
.toBlob(document.getElementById('preview'), {
width: 1024,
height: 1024,
})
.then(function (blob) {
console.log(blob)
window.saveAs(blob, 'sht4.png')
})
},
},
})
</script>
</body>
</html>